Add guid creation in client side

fatihkabakk · May 12, 2022 · e34194c · e34194c
1 parent 78e005b
commit e34194c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/client-app/package-lock.json b/client-app/package-lock.json
diff --git a/client-app/package.json b/client-app/package.json
@@ -17,6 +17,7 @@
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.4",
     "typescript": "^4.4.3",
+    "uuid": "^8.3.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
@@ -42,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/uuid": "^8.3.4"
   }
 }
diff --git a/client-app/src/app/layout/App.tsx b/client-app/src/app/layout/App.tsx
@@ -4,6 +4,7 @@ import { Container } from 'semantic-ui-react';
 import { Activity } from '../models/activity';
 import NavBar from './NavBar';
 import ActivityDashboard from '../../features/activities/dashboard/ActivityDashboard';
+import { v4 as uuid } from 'uuid';
 
 function App() {
     const [activities, setActivities] = useState<Activity[]>([]);
@@ -28,7 +29,9 @@ function App() {
     }
 
     const handleCreateOrEditActivity = (activity: Activity) => {
-        activity.id ? setActivities([...activities.filter(a => a.id !== activity.id), activity]) : setActivities([...activities, activity]);
+        activity.id
+            ? setActivities([...activities.filter(a => a.id !== activity.id), activity])
+            : setActivities([...activities, { ...activity, id: uuid() }]);
         setEditMode(false);
         setSelectedActivity(activity);
     }