bugfix(item list): fix unique key issue

oyo · Oct 10, 2023 · 646910b · 646910b
1 parent c59e238
commit 646910b
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -26,10 +26,12 @@
     "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
     "sass": "^1.69.1",
-    "typescript": "^4.4.2"
+    "typescript": "^4.4.2",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/uuid": "^9.0.5"
   },
   "scripts": {
     "start": "GENERATE_SOURCEMAP=false react-scripts start",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,23 +5,27 @@ import UserItem from './User'
 import PostItem from './Post'
 import Notify from './Notify'
 
-const renderUser = (item: User) => <UserItem item={item}/>
-const renderPost = (item: Post) => <PostItem item={item}/>
+const renderUser = (item: User) => <UserItem item={item} />
+const renderPost = (item: Post) => <PostItem item={item} />
 
 const App = () => {
   return (
     <main style={{ padding: '40px 100px' }}>
+
       <h3>Users</h3>
       <ItemList<User>
         fetchItems={useFetchUsersQuery}
         renderItem={renderUser}
-        />      
+      />
+
       <h3>Posts</h3>
       <ItemList<Post>
         fetchItems={useFetchPostsQuery}
         renderItem={renderPost}
       />
+
       <Notify />
+
     </main>
   )
 }

diff --git a/src/features/control/notify.ts b/src/features/control/notify.ts
@@ -12,6 +12,7 @@ export type NotifyDataItem = object | string | number | boolean
 export type NotifyData = NotifyDataItem | Array<NotifyDataItem>
 
 export type Notify = {
+  time: Date
   severity: SeverityType
   message: string
   data?: NotifyData

diff --git a/src/index.scss b/src/index.scss
@@ -0,0 +1,8 @@
+@import url('https://fonts.cdnfonts.com/css/libre-franklin');
+
+body {
+    margin: 0;
+    font-family: 'LibreFranklin', 'Libre Franklin', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    color: black;
+    font-weight: 300;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -4,6 +4,7 @@ import App from 'components/App'
 import { Provider } from 'react-redux'
 import { store } from 'features/store'
 import { SharedCssBaseline, SharedThemeProvider } from '@catena-x/portal-shared-components'
+import './index.scss'
 
 ReactDOM.createRoot(
   document.getElementById('app') as HTMLElement

diff --git a/src/services/NotifyService.ts b/src/services/NotifyService.ts
@@ -5,7 +5,7 @@ const NOTIFY_TIME = 7000
 
 const NotifyService = {
   notify: (severity: SeverityType, message: string) => {
-    store.dispatch(enq({ severity, message }))
+    store.dispatch(enq({ time: new Date(), severity, message }))
     setTimeout(() => store.dispatch(deq()), NOTIFY_TIME)
   },
   success: (message: string) => NotifyService.notify(SeverityType.SUCCESS, message),

diff --git a/src/shared/ItemList/index.tsx b/src/shared/ItemList/index.tsx
@@ -1,3 +1,4 @@
+import { v4 as uuid } from 'uuid'
 import './style.scss'
 
 const defaultRender = function<Item>(item: Item) {
@@ -21,7 +22,7 @@ const ItemList = function <Item>({
   return (
     <ul>
       {
-        data?.map((item: Item) => <li>{renderItem(item)}</li>)
+        data?.map((item: Item) => <li key={uuid()}>{renderItem(item)}</li>)
       }
     </ul>
   )

diff --git a/yarn.lock b/yarn.lock
@@ -2459,6 +2459,11 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/uuid@^9.0.5":
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.5.tgz#25a71eb73eba95ac0e559ff3dd018fc08294acf6"
+  integrity sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ==
+
 "@types/ws@^8.5.5":
   version "8.5.6"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.6.tgz#e9ad51f0ab79b9110c50916c9fcbddc36d373065"
@@ -9614,6 +9619,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-to-istanbul@^8.1.0:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"