refactor: rework design (eds)

netr0m · sebastianvitterso · commit f3db74afd105 · 2022-11-04T11:56:38.000+01:00
diff --git a/api/src/tests/unit/features/todo/use_cases/test_delete_todo_by_id.py b/api/src/tests/unit/features/todo/use_cases/test_delete_todo_by_id.py
@@ -20,4 +20,3 @@ def test_delete_todo_should_return_not_success(todo_repository: TodoRepositoryIn
     id = "unkown"
     with pytest.raises(NotFoundException):
         delete_todo_use_case(id=id, todo_repository=todo_repository)
-        assert error.message == "The todos item you specified does not exist."
diff --git a/api/src/tests/unit/features/todo/use_cases/test_get_todo_by_id.py b/api/src/tests/unit/features/todo/use_cases/test_get_todo_by_id.py
@@ -22,4 +22,3 @@ def test_get_todo_by_id_should_throw_todo_not_found_error(todo_repository: TodoR
     id = "unknown"
     with pytest.raises(NotFoundException):
         get_todo_by_id_use_case(id, todo_repository=todo_repository)
-        assert error.message == "The todos item you specified does not exist."
diff --git a/web/.pnp.cjs b/web/.pnp.cjs
diff --git a/web/.yarn/cache/@equinor-eds-icons-npm-0.15.0-6dfea88e54-b8f908b255.zip b/web/.yarn/cache/@equinor-eds-icons-npm-0.15.0-6dfea88e54-b8f908b255.zip
diff --git a/web/package.json b/web/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@equinor/eds-core-react": "^0.20.3",
+    "@equinor/eds-icons": "^0.15.0",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,8 +1,14 @@
 import { router } from './router'
 import { RouterProvider } from 'react-router-dom'
+import Header from './common/components/Header'
 
 function App() {
-  return <RouterProvider router={router} />
+  return (
+    <>
+      <Header />
+      <RouterProvider router={router} />
+    </>
+  )
 }
 
 export default App
diff --git a/web/src/common/components/Header.tsx b/web/src/common/components/Header.tsx
@@ -0,0 +1,25 @@
+import { useContext } from 'react'
+import { AuthContext } from 'react-oauth2-code-pkce'
+import { Icon, TopBar, Typography } from '@equinor/eds-core-react'
+import { receipt } from '@equinor/eds-icons'
+
+Icon.add({ receipt })
+
+const Header = () => {
+  const { tokenData, token } = useContext(AuthContext)
+  return (
+    <TopBar>
+      <TopBar.Header>
+        <Icon name="receipt" />
+        Todo App
+      </TopBar.Header>
+      <TopBar.Actions>
+        <Typography variant="caption">
+          Logged in as {token && tokenData?.['unique_name']}
+        </Typography>
+      </TopBar.Actions>
+    </TopBar>
+  )
+}
+
+export default Header
diff --git a/web/src/features/todos/todo-list/TodoItem.styled.tsx b/web/src/features/todos/todo-list/TodoItem.styled.tsx
@@ -1,17 +1,7 @@
 import styled from 'styled-components'
+import { Typography } from '@equinor/eds-core-react'
 
-export const StyledTodoItem = styled.div`
-  font-weight: bold;
-  cursor: pointer;
+export const StyledTodoItemTitle = styled(Typography)`
   text-decoration: ${(props: { is_completed?: boolean }) =>
     props.is_completed ? 'line-through' : 'none'};
 `
-
-export const StyledTodoContent = styled.div`
-  display: flex;
-  padding: 4px;
-`
-
-export const StyledTodoItemTitle = styled.div`
-  flex: 1 1 auto;
-`
diff --git a/web/src/features/todos/todo-list/TodoItem.tsx b/web/src/features/todos/todo-list/TodoItem.tsx
@@ -1,23 +1,53 @@
-import React from 'react'
+import { StyledTodoItemTitle } from './TodoItem.styled'
 import {
-  StyledTodoContent,
-  StyledTodoItem,
-  StyledTodoItemTitle,
-} from './TodoItem.styled'
-import { Button } from '@equinor/eds-core-react'
+  Button,
+  Card,
+  Typography,
+  Icon,
+  Tooltip,
+} from '@equinor/eds-core-react'
+import { undo, done, remove_outlined } from '@equinor/eds-icons'
+import { AddTodoResponse } from '../../../api/generated'
 
-const TodoItem = (props: any) => {
-  const { todo, index, onToggle, onRemove } = props
+Icon.add({ undo, done, remove_outlined })
+
+const TodoItem = (props: {
+  todo: AddTodoResponse
+  onToggle: (id: string) => void
+  onRemove: (id: string) => void
+}) => {
+  const { todo, onToggle, onRemove } = props
   return (
-    <StyledTodoItem
-      is_completed={todo.is_completed}
-      onClick={() => onToggle(todo.id, todo.is_completed as boolean, index)}
-    >
-      <StyledTodoContent>
-        <StyledTodoItemTitle>{todo.title}</StyledTodoItemTitle>
-        <Button onClick={() => onRemove(todo.id, index)}>Remove</Button>
-      </StyledTodoContent>
-    </StyledTodoItem>
+    <Card>
+      <Card.Header>
+        <Card.HeaderTitle>
+          <StyledTodoItemTitle
+            variant="h5"
+            className="todoTitle"
+            is_completed={todo.is_completed}
+          >
+            {todo.title}
+          </StyledTodoItemTitle>
+          <Typography variant="body_short">
+            {todo.is_completed ? 'Done' : 'Todo'}
+          </Typography>
+        </Card.HeaderTitle>
+        <Tooltip title={`Mark as ${todo.is_completed ? 'incomplete' : 'done'}`}>
+          <Button variant="ghost_icon" onClick={() => onToggle(todo.id)}>
+            <Icon
+              name={todo.is_completed ? 'undo' : 'done'}
+              size={24}
+              title={todo.is_completed ? 'incomplete' : 'done'}
+            />
+          </Button>
+        </Tooltip>
+        <Tooltip title="Remove">
+          <Button variant="ghost_icon" onClick={() => onRemove(todo.id)}>
+            <Icon name="remove_outlined" size={24} title="Remove" />
+          </Button>
+        </Tooltip>
+      </Card.Header>
+    </Card>
   )
 }
 
diff --git a/web/src/features/todos/todo-list/TodoList.styled.tsx b/web/src/features/todos/todo-list/TodoList.styled.tsx
@@ -4,3 +4,11 @@ export const StyledTodoList = styled.div`
   width: 400px;
   padding: 30px;
 `
+
+export const StyledInput = styled.div`
+  display: flex;
+
+  .input {
+    margin-right: 5px;
+  }
+`
diff --git a/web/src/features/todos/todo-list/TodoList.tsx b/web/src/features/todos/todo-list/TodoList.tsx
@@ -3,13 +3,13 @@ import { useState } from 'react'
 import { Button, CircularProgress, Input } from '@equinor/eds-core-react'
 import TodoItem from './TodoItem'
 import { AddTodoResponse } from '../../../api/generated'
-import { StyledTodoList } from './TodoList.styled'
+import { StyledTodoList, StyledInput } from './TodoList.styled'
 
-const AddItem = (props: any) => {
+const AddItem = (props: { onAddItem: (id: string) => void }) => {
   const { onAddItem } = props
   const [value, setValue] = useState('')
 
-  const handleAddItem = (event: any) => {
+  const handleAddItem = (event: Event) => {
     event.preventDefault()
     if (!value) return
     onAddItem(value)
@@ -18,14 +18,16 @@ const AddItem = (props: any) => {
   return (
     <div className="form">
       <form onSubmit={handleAddItem}>
-        <Input
-          className="input"
-          placeholder="Add Task"
-          onChange={(e) => setValue(e.target.value)}
-        />
-        <Button className="add-button" type="submit">
-          Add
-        </Button>
+        <StyledInput>
+          <Input
+            className="input"
+            placeholder="Add Task"
+            onChange={(e) => setValue(e.target.value)}
+          />
+          <Button className="add-button" type="submit">
+            Add
+          </Button>
+        </StyledInput>
       </form>
     </div>
   )
@@ -42,13 +44,12 @@ const TodoList = () => {
   return (
     <StyledTodoList>
       <AddItem onAddItem={addItem} />
-      {todos?.map((todo: AddTodoResponse, index: number) => (
+      {todos?.map((todo: AddTodoResponse) => (
         <TodoItem
-          key={`${index}-${todo.is_completed}`}
+          key={todo.id}
           onToggle={toggleItem}
           onRemove={removeItem}
           todo={todo}
-          index={index}
         />
       ))}
     </StyledTodoList>
diff --git a/web/src/hooks/useTodos.tsx b/web/src/hooks/useTodos.tsx
@@ -1,26 +1,20 @@
-import React, { useEffect, useContext, useState } from 'react'
+import { useEffect, useContext, useState } from 'react'
 import { AuthContext } from 'react-oauth2-code-pkce'
 import TodoAPI from '../api/TodoAPI'
-import { AxiosError, AxiosPromise, AxiosResponse } from 'axios'
+import { AxiosError } from 'axios'
 import { AddTodoResponse, ErrorResponse } from '../api/generated'
 
-type TodoItem = {
-  id: string
-  title: string
-  is_completed: boolean
-}
-
 const useTodos = (): [
   AddTodoResponse[],
   boolean,
   (title: string) => void,
-  (id: string, index: number) => void,
-  (id: string, is_completed: boolean, index: number) => void,
-  AxiosError<any> | null
+  (id: string) => void,
+  (id: string) => void,
+  AxiosError | null
 ] => {
   const [todos, setTodos] = useState<AddTodoResponse[]>([])
   const [isLoading, setLoading] = useState<boolean>(true)
-  const [error, setError] = useState<AxiosError<any> | null>(null)
+  const [error, setError] = useState<AxiosError | null>(null)
   const { token } = useContext(AuthContext)
   const todoAPI = new TodoAPI(token)
 
@@ -51,34 +45,38 @@ const useTodos = (): [
       .finally(() => setLoading(false))
   }
 
-  const removeItem = (id: string, index: number) => {
+  const removeItem = (id: string) => {
     setLoading(true)
     todoAPI
       .deleteById({ id: id })
-      .then((response) => {
-        const tmpTodos = [...todos]
-        tmpTodos.splice(index, 1)
+      .then(() => {
+        const tmpTodos = todos.filter(
+          (todoItem: AddTodoResponse) => todoItem.id !== id
+        )
         setTodos(tmpTodos)
       })
       .catch((error: AxiosError) => setError(error))
       .finally(() => setLoading(false))
   }
 
-  const toggleItem = (id: string, is_completed: boolean, index: number) => {
+  const toggleItem = (id: string) => {
     setLoading(true)
+    const index: number = todos.findIndex(
+      (item: AddTodoResponse) => item.id === id
+    )
+    const todoItem = todos[index]
     todoAPI
       .updateById({
         id: id,
         updateTodoRequest: {
-          is_completed: !is_completed,
-          title: todos[index].title,
+          is_completed: !todoItem.is_completed,
+          title: todoItem.title,
         },
       })
-      .then((response) => {
+      .then(() => {
         const items = todos
-        const item = items[index]
-        item.is_completed = !is_completed
-        items[index] = item
+        todoItem.is_completed = !todoItem.is_completed
+        items[index] = todoItem
         setTodos([...items])
       })
       .catch((error: AxiosError) => setError(error))
diff --git a/web/src/pages/TodoListPage.tsx b/web/src/pages/TodoListPage.tsx
@@ -1,14 +1,6 @@
-import React, { useContext } from 'react'
-import { AuthContext } from 'react-oauth2-code-pkce'
+import React from 'react'
 import TodoList from '../features/todos/todo-list/TodoList'
 
 export const TodoListPage: React.FC = () => {
-  const { tokenData, token } = useContext(AuthContext)
-
-  return (
-    <>
-      <div>Logged in as: {token && tokenData?.['unique_name']}</div>
-      <TodoList />
-    </>
-  )
+  return <TodoList />
 }
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -1716,6 +1716,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@equinor/eds-icons@npm:^0.15.0":
+  version: 0.15.0
+  resolution: "@equinor/eds-icons@npm:0.15.0"
+  checksum: b8f908b2557c930857d4df7acf1d2e2db408e21f853cf453eedd19ee0ec4680095a9ae210589e3e4ec01c84a2e8a834b0dae52517bb25f52f2bc7e863bfa614d
+  languageName: node
+  linkType: hard
+
 "@equinor/eds-tokens@npm:0.7.1":
   version: 0.7.1
   resolution: "@equinor/eds-tokens@npm:0.7.1"
@@ -12350,6 +12357,7 @@ __metadata:
   resolution: "web@workspace:."
   dependencies:
     "@equinor/eds-core-react": ^0.20.3
+    "@equinor/eds-icons": ^0.15.0
     "@testing-library/react": ^13.3.0
     "@testing-library/user-event": ^13.5.0
     "@types/jest": ^27.4.0
