Todo component

src/App.scss

@@ -1,38 +1,36 @@
-.App {
-  text-align: center;
+body {
+  background-color: #ededed;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.page-wrapper {
+  width: 70%;
+  margin: 0 auto;
+  background-color: white;
+  height: 100vh;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.content {
+  padding-top: 70px;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+}
+
+.button {
+  margin: 2px;
+  padding: 5px 15px;
+  border-radius: 3px;
+  height: 35px;
+  font-size: 14px;
+  outline-style: none;
+  cursor: pointer;
   color: white;
+  background-color: #3b92b3;
 }
 
-.App-link {
-  color: #61dafb;
+.red-button {
+  background-color: #ce1400;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.green-button {
+  background-color: #52b230;
 }

src/App.tsx

@@ -1,29 +1,80 @@
 import React from "react";
 import "./App.scss";
 import { useGlobalState } from "./state/useGlobalState";
-import { UpdateUserName, UpdateUserAge } from "./state/user/UserActions";
+import { InProgressList } from "./features/InProgressList/InProgressList";
+import { Header } from "./shared/Header/Header";
+import { DoneList } from "./features/DoneList/DoneList";
+import { UpdateToDoItems } from "./state/toDoItems/ToDoItemsActions";
+import { ListItemType } from "./common.types";
 
 function App() {
-  const {state, dispatch} = useGlobalState();
+  const { state, dispatch } = useGlobalState();
 
-  const updateName = () => {
-    dispatch(new UpdateUserName('Emanuel'))
-  }
+  const moveItemFromArrayToAnother = (
+    itemId: number,
+    oldArray: ListItemType[],
+    newArray: ListItemType[]
+  ) => {
+    const item = oldArray.find(item => item.id === itemId);
+    if (!item) {
+      return;
+    }
+    const newArrayUpdated = [...newArray];
+    newArrayUpdated.push(item);
+    const oldArrayUpdated = oldArray.filter(item => item.id !== itemId);
 
-  const updateAge = () => {
-    dispatch(new UpdateUserAge(30))
-  }
+    return [oldArrayUpdated, newArrayUpdated];
+  };
 
+  const deleteInProgressItem = (itemIndex: number) => {
+    const { inProgress, done } = state.toDoItems;
+    const newArray = inProgress.filter(item => item.id !== itemIndex);
+
+    dispatch(
+      new UpdateToDoItems({
+        done: [...done],
+        inProgress: newArray
+      })
+    );
+  };
+
+  const moveItemToDone = (itemIndex: number) => {
+    const { inProgress, done } = state.toDoItems;
+    const result = moveItemFromArrayToAnother(itemIndex, inProgress, done);
+    if (result) {
+      dispatch(new UpdateToDoItems({ done: result[1], inProgress: result[0] }));
+    }
+  };
+
+  const removeItemFromDone = (itemIndex: number) => {
+    const { inProgress, done } = state.toDoItems;
+    const result = moveItemFromArrayToAnother(itemIndex, done, inProgress);
+    if (result) {
+      dispatch(new UpdateToDoItems({ done: result[0], inProgress: result[1] }));
+    }
+  };
 
   return (
     <div className="App">
-     <button onClick={updateName}>set name to Emanuel</button>
-     <button onClick={updateAge}>set age to 30</button><br /><br />
-     Current name: <b>{state.user.name}</b><br />
-     Current age: <b>{state.user.age}</b>
+      Current name: <b>{state.user.name}</b>
+      <br />
+      Current age: <b>{state.user.age}</b>
+      <div className="page-wrapper">
+        <Header label={"Done"}></Header>
+        <div className="content">
+          <InProgressList
+            inProgressItems={state.toDoItems.inProgress}
+            onDelete={deleteInProgressItem}
+            onMoveItemToDone={moveItemToDone}
+          />
+          <DoneList
+            doneItems={state.toDoItems.done}
+            onRemove={removeItemFromDone}
+          />
+        </div>
+      </div>
     </div>
   );
 }
 
 export default App;
-

src/common.types.ts

@@ -0,0 +1,11 @@
+export type ListItemType = {
+  title: string;
+  buttons?: ListItemButtonType[];
+  id: number;
+};
+
+export type ListItemButtonType = {
+  label: string;
+  class: string;
+  action: Function;
+};

src/features/DoneList/DoneList.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+import { List } from "../../shared/List/List";
+import { ListItemButtonType, ListItemType } from "../../common.types";
+
+type Props = { doneItems: ListItemType[]; onRemove: Function };
+
+export const DoneList: FunctionComponent<Props> = ({ doneItems, onRemove }) => {
+  const buttons: ListItemButtonType[] = [
+    { label: "Remove", class: "red-button", action: onRemove }
+  ];
+  let DoneItems: ListItemType[] = doneItems.map(item => {
+    item.buttons = buttons;
+    return item;
+  });
+
+  return <List items={DoneItems} />;
+};

src/features/InProgressList/InProgressList.tsx

@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from "react";
+import { List } from "../../shared/List/List";
+import "./InProgressList.scss";
+import { ListItemButtonType, ListItemType } from "../../common.types";
+
+type Props = {
+  onDelete: Function;
+  onMoveItemToDone: Function;
+  inProgressItems: ListItemType[];
+};
+
+export const InProgressList: FunctionComponent<Props> = ({
+  onDelete,
+  onMoveItemToDone,
+  inProgressItems
+}) => {
+  const buttons: ListItemButtonType[] = [
+    { label: "Done", class: "green-button", action: onMoveItemToDone },
+    { label: "Delete", class: "red-button", action: onDelete }
+  ];
+  let items: ListItemType[] = inProgressItems.map(item => {
+    item.buttons = buttons;
+    return item;
+  });
+
+  return <List items={items} />;
+};

src/shared/Header/Header.scss

@@ -0,0 +1,8 @@
+.header-bar {
+  height: 50px;
+  background-color: #c8d3d6;
+  padding: 0 10px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

src/shared/Header/Header.tsx

@@ -0,0 +1,12 @@
+import React, { FunctionComponent } from "react";
+import "./Header.scss";
+
+type Props = { label: string };
+
+export const Header: FunctionComponent<Props> = ({ label }) => {
+  return (
+    <div className="header-bar">
+      <button className="button">Go to {label}</button>
+    </div>
+  );
+};

src/shared/List/List.scss

@@ -0,0 +1,11 @@
+.list-wrapper {
+  border: 1px solid #cccccc;
+  background-color: #f7f7f7;
+  border-radius: 5px;
+  width: 400px;
+  .info {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+  }
+}

src/shared/List/List.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent } from "react";
+import { ListItem } from "../ListItem/ListItem";
+import { ListItemType } from "../../common.types";
+import "./List.scss";
+
+type Props = {
+  items: ListItemType[];
+};
+
+export const List: FunctionComponent<Props> = ({ items }) => {
+  return (
+    <div className="list-wrapper">
+      {items.length ? (
+        items.map(item => <ListItem key={item.id} item={item} />)
+      ) : (
+        <span className="info">No items in the list</span>
+      )}
+    </div>
+  );
+};

src/shared/ListItem/ListItem.scss

@@ -0,0 +1,9 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 10px;
+  .left {
+    display: flex;
+    align-items: center;
+  }
+}

src/shared/ListItem/ListItem.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from "react";
+import { ListItemType } from "../../common.types";
+import "./ListItem.scss";
+
+type Props = {
+  item: ListItemType;
+};
+
+export const ListItem: FunctionComponent<Props> = ({ item }) => {
+  function getButtons() {
+    if (!item.buttons) {
+      return;
+    }
+    return item.buttons.map(button => {
+      return (
+        <button
+          key={button.label}
+          className={`button ${button.class}`}
+          onClick={() => button.action(item.id)}
+        >
+          {button.label}
+        </button>
+      );
+    });
+  }
+
+  return (
+    <div className="wrapper">
+      <div className="left">
+        <span>{item.title} </span>
+      </div>
+      <div className="right">{getButtons()}</div>
+    </div>
+  );
+};

src/state/Reducer.ts

@@ -1,19 +1,21 @@
 import { UserReducer } from "./user/UserReducer";
 import { State } from "./State";
+import { ToDoItemsReducer } from "./toDoItems/ToDoItemsReducer";
 
-export const combineReducers = <T>(reducers: {[P in keyof T]: any}) =>  {
+export const combineReducers = <T>(reducers: { [P in keyof T]: any }) => {
   const reducerEntries = Object.entries<any>(reducers) as [keyof T, any][];
-    return (state: T, action: any) => {
-      const nextState = {} as T;
-          for(const [key, reducer] of reducerEntries){
-            const previousStateForKey = state[key];
-            const nextStateForKey = reducer(previousStateForKey, action)
-            nextState[key] = nextStateForKey;
-          }
-      return nextState;
+  return (state: T, action: any) => {
+    const nextState = {} as T;
+    for (const [key, reducer] of reducerEntries) {
+      const previousStateForKey = state[key];
+      const nextStateForKey = reducer(previousStateForKey, action);
+      nextState[key] = nextStateForKey;
     }
-}
+    return nextState;
+  };
+};
 
-  export const reducer = combineReducers<State>({
-      user: UserReducer,
-  })
+export const reducer = combineReducers<State>({
+  user: UserReducer,
+  toDoItems: ToDoItemsReducer
+});

src/state/State.ts

@@ -1,9 +1,15 @@
+import {
+  initialToDoItemsState,
+  ToDoItemsState
+} from "./toDoItems/ToDoItemsState";
 import { UserState, initialUserState } from "./user/UserState";
 
 export interface State {
-    user: UserState
+  user: UserState;
+  toDoItems: ToDoItemsState;
 }
 
 export const initialState: State = {
-    user: initialUserState
-}
+  user: initialUserState,
+  toDoItems: initialToDoItemsState
+};

src/state/toDoItems/ToDoItemsActions.ts

@@ -0,0 +1,13 @@
+import { Action } from "../Action";
+import { ToDoItemsState } from "./ToDoItemsState";
+
+export enum ToDoItemsActionTypes {
+  UpdateToDoItems = "[ToDoItems] Update items"
+}
+
+export class UpdateToDoItems implements Action {
+  public readonly type = ToDoItemsActionTypes.UpdateToDoItems;
+  constructor(public items: ToDoItemsState) {}
+}
+
+export type ToDoItemsActions = UpdateToDoItems;