Merge pull request #198 from canyener/clean-up

Clean up

Author: canyener

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,27 +31,38 @@ 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
     }
   }
 
   @action createActivity = async (activity: IActivity) => {
     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)
     }
   }

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)

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<IProps> = ({
 
   const activityStore = useContext(ActivityStore)
   const { createActivity, editActivity, submitting, cancelFormOpen } = activityStore
-  
+
   const initializeForm = () => {
     if (initialFormState) {
       return initialFormState
@@ -100,4 +101,4 @@ const ActivityForm: React.FC<IProps> = ({
 
 ActivityForm.displayName = 'ActivityForm'
 
-export { ActivityForm }
+export default observer(ActivityForm)