trycatchlearn / reactivities-v6 Goto Github PK

Hi and thanks for the time and effort on the course.
I got a question, what happens if we switch to react-query for caching the server data and context for our few client-side states?
Wouldn't some state management library like Mobx seem redundant in that case?

The onSubmit functionality for the form has no response when you run the app

This is from the ActivityForm.tsx

<Segment clearing>
<Form onSubmit={handleSubmit} autoComplete='off' >
<Form.Input placeholder='Title' value={activity.title} name ='title' onChange={hanldeInputChange}/>
<Form.TextArea placeholder='Description' value={activity.description} name='description' onChange={hanldeInputChange} />
<Form.Input placeholder='Category' value={activity.category} name='category' onChange={hanldeInputChange} />
<Form.Input type = 'date' placeholder='Date' value={activity.date} name='date' onChange={hanldeInputChange} />
<Form.Input placeholder='City' value={activity.city} name='city' onChange={hanldeInputChange}/>
<Form.Input placeholder='Venue' value={activity.venue} name='venue' onChange={hanldeInputChange}/>
<Button type='submit' loading = {submitting} floated = 'right' positive content = 'Submit' />
<Button onClick={closeForm} floated = 'right' type='button' content = 'Cancel' />
</Form>
</Segment>

I'm only up to the end of section 8 - Routing, however I've found an issue when going to the /create-activity route from the initial page load, rather than being redirected from another route.

The issue is that the 'Loading' screen stays for ever, and doesn't go away. The fix seems pretty simple, all we need to do is set the loadingInitial = false if there is no id.

In the ActivityForm.tsx file, make the following change to the useEffect hook and the *activityStore deconstructor:

const {createActvity, updateActivity, loading, loadActivity, loadingInitial, setLoadingInitial} = activityStore;

...

useEffect(() => {
		if (id) {
			loadActivity(id).then(activity => setActivity(activity!));
		} else {
			setLoadingInitial(false);
		}
	}, [id, loadActivity, setLoadingInitial])

As mentioned initially, I have't actually finished the course yet, so if this is picked up and fixed in a later section, then happy days, however looking the source files on git, this doesn't seem to be immediately apparent.

Great course so far!

Cheers,
Justin

Thanks for the course. I'm still working my way through it. I noticed an issue working with the date picker. meta.touched is used to limit showing an error state until after the user has had a chance to change the field or submit the form. However I find it doesn't show the error status in one scenario:

• Starting with the activity form loading an existing activity
• Select the date text and delete it. Don't touch the actual date picker control.
• Click some other field
• Observe that no error status is shown for the empty date field.
• Expected result is that the background color gets highlighted and the error text tells the user about a problem with the date.

I was going to see if I could repro the issue with your repro, but couldn't even get it to run. It looks like its setup to run postgres, I'm not there yet. I kind of assumed the final project would still run against SQLite for development mode. I tried changing the connection string to "DefaultConnection": "Data source=database.db" but that wasn't enough.

I randomly came across you and your project, and I learned a lot from your codes. Thank you for that
Can you write a sample test for the ActivitiesController file?

No overload matches in line 18
Overload 1 of 2, '(props: RouterProps | Readonly): Router', gave the following error.
Type 'BrowserHistory' is missing the following properties from type 'History': length, goBack, goForward
Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error.
Type 'BrowserHistory' is not assignable to type 'History'.

ReactDOM.render(
<StoreContext.Provider value={store}>
/*18 */ <Router history={history}>


</StoreContext.Provider>,
document.getElementById('root')

Hello, thanks for this content.
I'm listening to your Udemy course but Chapter 3 > 29 - I'm getting an error in Semantic UI React
Can you help me?

Question:
The following line added to index.tsx is not working
import 'semantic-ui-css/semantic.css';