diff --git a/src/app/stores/activityStore.ts b/src/app/stores/activityStore.ts index 961d0d42..311c900c 100644 --- a/src/app/stores/activityStore.ts +++ b/src/app/stores/activityStore.ts @@ -1,9 +1,13 @@ -import { makeObservable, observable, action, computed } from "mobx" +import { makeObservable, observable, action, computed, configure, runInAction } from "mobx" import { createContext, SyntheticEvent } from 'react' import { IActivity } from "../models/activity" import agent from '../api/agent' +configure({ + enforceActions: 'always' +}) + class ActivityStore { constructor() { @@ -27,15 +31,20 @@ class ActivityStore { try { const activityList = await agent.Activities.list() - activityList.forEach((activity) => { - activity.date = activity.date.split('.')[0] - this.activityRegistry.set(activity.id, activity) + runInAction(() => { + activityList.forEach((activity) => { + activity.date = activity.date.split('.')[0] + this.activityRegistry.set(activity.id, activity) + }) + + this.loadingInitial = false }) - this.loadingInitial = false } catch (error) { + runInAction(() => { + this.loadingInitial = false + }) console.log(error) - this.loadingInitial = false } } @@ -43,11 +52,17 @@ class ActivityStore { this.submitting = true try { await agent.Activities.create(activity) - this.activityRegistry.set(activity.id, activity) - this.editMode = false - this.submitting = false + + runInAction(() => { + this.activityRegistry.set(activity.id, activity) + this.editMode = false + this.submitting = false + }) + } catch (error) { - this.submitting = false + runInAction(() => { + this.submitting = false + }) console.log(error) } } @@ -56,12 +71,18 @@ class ActivityStore { this.submitting = true try { await agent.Activities.update(activity) - this.activityRegistry.set(activity.id, activity) - this.selectedActivity = activity - this.editMode = false - this.submitting = false + + runInAction(() => { + this.activityRegistry.set(activity.id, activity) + this.selectedActivity = activity + this.editMode = false + this.submitting = false + }) + } catch (error) { - this.submitting = false + runInAction(() => { + this.submitting = false + }) console.log(error) } } @@ -71,13 +92,18 @@ class ActivityStore { this.target = event.currentTarget.name try { await agent.Activities.delete(id) - this.activityRegistry.delete(id) - this.submitting = false - this.target = '' + runInAction(() => { + this.activityRegistry.delete(id) + this.submitting = false + this.target = '' + }) } catch (error) { - this.submitting = false - this.target = '' + runInAction(() => { + this.submitting = false + this.target = '' + }) + console.log(error) } } diff --git a/src/features/activities/dashboard/ActivityDashboard.tsx b/src/features/activities/dashboard/ActivityDashboard.tsx index 9a1d92dc..1f95303a 100644 --- a/src/features/activities/dashboard/ActivityDashboard.tsx +++ b/src/features/activities/dashboard/ActivityDashboard.tsx @@ -6,7 +6,7 @@ import ActivityStore from '../../../app/stores/activityStore' import ActivityList from './ActivityList' import ActivityDetails from '../details/ActivityDetails' -import { ActivityForm } from '../form/ActivityForm' +import ActivityForm from '../form/ActivityForm' const ActivityDashboard: React.FC = () => { const activityStore = useContext(ActivityStore) diff --git a/src/features/activities/form/ActivityForm.tsx b/src/features/activities/form/ActivityForm.tsx index 8b864d89..595fe6bc 100644 --- a/src/features/activities/form/ActivityForm.tsx +++ b/src/features/activities/form/ActivityForm.tsx @@ -1,6 +1,7 @@ import React, { FormEvent, useContext, useState } from 'react' import { Segment, Form, Button } from 'semantic-ui-react' import { v4 as uuid } from 'uuid' +import { observer } from 'mobx-react-lite' import { IActivity } from '../../../app/models/activity' @@ -15,7 +16,7 @@ const ActivityForm: React.FC = ({ const activityStore = useContext(ActivityStore) const { createActivity, editActivity, submitting, cancelFormOpen } = activityStore - + const initializeForm = () => { if (initialFormState) { return initialFormState @@ -100,4 +101,4 @@ const ActivityForm: React.FC = ({ ActivityForm.displayName = 'ActivityForm' -export { ActivityForm } \ No newline at end of file +export default observer(ActivityForm) \ No newline at end of file