feat: add completed/rejected/todo screens and configure client side r…

…outing

README.md

@@ -33,8 +33,8 @@ All design styles are written from scratch. This application does not use any UI
 ## Used technologies
 
 - 🎁 **Project:** vite, react, typescript
-- 🛠️ **Tools:** yarn, eslint, prettier, husky, speedy web compiler, conventional commits, storybook
-- 🎨 **Styling:** styled-components by emotion
+- 🛠️ **Tools:** yarn, eslint, prettier, husky, speedy web compiler, conventional commits, storybook, react-hook-form, react-router
+- 🎨 **Styling:** styled-components by emotion, lucide icons
 - 🧪 **Testing:** jest, react-testing-library
 - 💎 **Others:** desktop-first approach, atomic design, progressive web app, docker and dev container
 

src/components/molecules/navbar/CommonLink/common-link.styled.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { Icon, Text } from '../../../atoms';
+import { Link } from 'react-router-dom';
 
 export const CommonLinkContainer = styled.li<{ color: string }>`
  display: flex;
@@ -20,7 +21,7 @@ export const CommonLinkContainer = styled.li<{ color: string }>`
  }
 `;
 
-export const CommonLinkStyle = styled.a`
+export const CommonLinkStyle = styled(Link)`
  display: flex;
  align-items: center;
  justify-content: start;

src/components/molecules/navbar/CommonLink/common-link.tsx

@@ -16,7 +16,7 @@ export const CommonLink = ({
 }: CommonLinkProps) => {
  return (
  <CommonLinkContainer {...rest} color={color}>
- <CommonLinkStyle href={url} rel="noreferrer">
+ <CommonLinkStyle to={url}>
  <CommonLinkIcon icon={icon} />
  <CommonLinkText expanded={expanded} text={text} />
  </CommonLinkStyle>

src/components/organisms/MainContent/main-content.tsx

@@ -6,7 +6,8 @@ import {
  MainContentContainer,
  MainContentWrapper,
 } from './main-content.styled';
-import { ItemsTodo } from './views';
+import { ItemsCompleted, ItemsDeleted, ItemsTodo } from './views';
+import { Route, Routes, createBrowserRouter } from 'react-router-dom';
 
 export const MainContent = () => {
  const { openModal, closeModal } = useModalProvider();
@@ -45,13 +46,52 @@ export const MainContent = () => {
  return (
  <MainContentWrapper>
  <MainContentContainer>
- <ItemsTodo
+ <Routes>
+ <Route
+ index
+ element={
+ <ItemsTodo
+ tasks={tasks}
+ handleAddTaskModalClick={handleAddTaskModalClick}
+ handleDoneButtonClick={handleDoneButtonClick}
+ handleOnItemClick={handleOnItemClick}
+ handleRemoveClick={handleRemoveClick}
+ />
+ }
+ />
+ <Route
+ path="deleted"
+ element={
+ <ItemsDeleted
+ tasks={tasks}
+ handleAddTaskModalClick={handleAddTaskModalClick}
+ handleDoneButtonClick={handleDoneButtonClick}
+ handleOnItemClick={handleOnItemClick}
+ handleRemoveClick={handleRemoveClick}
+ />
+ }
+ />
+ <Route
+ path="completed"
+ element={
+ <ItemsCompleted
+ tasks={tasks}
+ handleAddTaskModalClick={handleAddTaskModalClick}
+ handleDoneButtonClick={handleDoneButtonClick}
+ handleOnItemClick={handleOnItemClick}
+ handleRemoveClick={handleRemoveClick}
+ />
+ }
+ />
+ <Route path="*" element={<p>404</p>} />
+ </Routes>
+ {/* <ItemsTodo
  tasks={tasks}
  handleAddTaskModalClick={handleAddTaskModalClick}
  handleDoneButtonClick={handleDoneButtonClick}
  handleOnItemClick={handleOnItemClick}
  handleRemoveClick={handleRemoveClick}
- />
+ /> */}
  </MainContentContainer>
  </MainContentWrapper>
  );

src/components/organisms/MainContent/views/Completed/index.ts

@@ -0,0 +1,2 @@
+export * from './items-completed';
+export * from './items-completed.styled';

src/components/organisms/MainContent/views/Completed/items-completed.hook.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { ItemsCompletedProps } from './items-completed.interface';
+
+export const useItemsCompleted = ({ tasks }: ItemsCompletedProps) => {
+ const [filteredTasks, setFilteredTasks] = useState(tasks);
+ const handleSearchInputChange = (phrase: string) => {
+ const filteredTasks = tasks.filter(
+ (task) => task.title.includes(phrase) || task.description.includes(phrase)
+ );
+ setFilteredTasks(filteredTasks);
+ };
+
+ return {
+ filteredTasks,
+ handleSearchInputChange,
+ };
+};

src/components/organisms/MainContent/views/Completed/items-completed.interface.ts

@@ -0,0 +1,9 @@
+import { Task } from '../../../../../common';
+
+export interface ItemsCompletedProps {
+ tasks: Task[];
+ handleAddTaskModalClick: () => void;
+ handleOnItemClick: (id: number) => void;
+ handleDoneButtonClick: (id: number) => void;
+ handleRemoveClick: (id: number) => void;
+}

src/components/organisms/MainContent/views/Completed/items-completed.styled.tsx

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+import { Button, Divider, Title } from '../../../../atoms';
+import { IconInput } from '../../../../molecules';
+
+export const ItemsCompletedContainer = styled.div`
+ margin: 0 2em;
+ display: flex;
+ flex-direction: column;
+`;
+
+export const ItemsCompletedTitle = styled(Title)`
+ font-size: 2.75rem;
+ margin-top: 0.5em;
+
+ padding: 0;
+ font-weight: 900;
+
+ color: var(--text-font-color);
+ text-shadow: var(--text-box-shadow);
+`;
+
+export const ItemsCompletedSearchAndAdd = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 3em;
+ margin-top: 1.5em;
+`;
+
+export const ItemsCompletedIconInput = styled(IconInput)`
+ height: 100%;
+ width: calc((100% - (100% / 3)) - 0.5em);
+ box-shadow: var(--container-box-shadow);
+`;
+
+export const ItemsCompletedAddButton = styled(Button)`
+ background-color: var(--add-new-task-button-bg-color);
+ color: var(--button-font-color);
+ border-radius: var(--standard-border-radius);
+ height: 100%;
+ width: calc((100% / 3) - 0.5em);
+ font-weight: 900;
+ font-size: 1rem;
+ border: var(--standard-border);
+ transition: filter 0.3s ease-in-out;
+ box-shadow: var(--button-box-shadow);
+
+ &:hover {
+ filter: brightness(0.9);
+ }
+`;
+
+export const ItemsCompletedDivider = styled(Divider)`
+ margin: 2em 0;
+ background-color: var(--divider-color);
+`;
+
+export const ItemsCompletedList = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+`;

src/components/organisms/MainContent/views/Completed/items-completed.tsx

@@ -0,0 +1,43 @@
+import {
+ ItemsCompletedAddButton,
+ ItemsCompletedContainer,
+ ItemsCompletedDivider,
+ ItemsCompletedIconInput,
+ ItemsCompletedList,
+ ItemsCompletedSearchAndAdd,
+ ItemsCompletedTitle,
+} from './items-completed.styled';
+
+import { Search } from 'lucide-react';
+import { TaskItem } from '../../../../molecules';
+import { ItemsCompletedProps } from './items-completed.interface';
+import { useItemsCompleted } from './items-completed.hook';
+
+export const ItemsCompleted = (props: ItemsCompletedProps) => {
+ const {
+ handleAddTaskModalClick,
+ handleDoneButtonClick,
+ handleOnItemClick,
+ handleRemoveClick,
+ } = props;
+
+ const { filteredTasks, handleSearchInputChange } = useItemsCompleted(props);
+
+ return (
+ <ItemsCompletedContainer>
+ <ItemsCompletedTitle title="Things completed" />
+ <ItemsCompletedDivider />
+ <ItemsCompletedList>
+ {filteredTasks.map((task) => (
+ <TaskItem
+ key={task.id}
+ task={task}
+ handleDoneButtonClick={handleDoneButtonClick}
+ handleOnItemClick={handleOnItemClick}
+ handleRemoveClick={handleRemoveClick}
+ />
+ ))}
+ </ItemsCompletedList>
+ </ItemsCompletedContainer>
+ );
+};

src/components/organisms/MainContent/views/Deleted/index.ts

@@ -0,0 +1,2 @@
+export * from './items-deleted';
+export * from './items-deleted.styled';

src/components/organisms/MainContent/views/Deleted/items-deleted.hook.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { ItemsDeletedProps } from './items-deleted.interface';
+
+export const useItemsDeleted = ({ tasks }: ItemsDeletedProps) => {
+ const [filteredTasks, setFilteredTasks] = useState(tasks);
+ const handleSearchInputChange = (phrase: string) => {
+ const filteredTasks = tasks.filter(
+ (task) => task.title.includes(phrase) || task.description.includes(phrase)
+ );
+ setFilteredTasks(filteredTasks);
+ };
+
+ return {
+ filteredTasks,
+ handleSearchInputChange,
+ };
+};

src/components/organisms/MainContent/views/Deleted/items-deleted.interface.ts

@@ -0,0 +1,9 @@
+import { Task } from '../../../../../common';
+
+export interface ItemsDeletedProps {
+ tasks: Task[];
+ handleAddTaskModalClick: () => void;
+ handleOnItemClick: (id: number) => void;
+ handleDoneButtonClick: (id: number) => void;
+ handleRemoveClick: (id: number) => void;
+}

src/components/organisms/MainContent/views/Deleted/items-deleted.styled.tsx

@@ -0,0 +1,64 @@
+import styled from '@emotion/styled';
+import { Button, Divider, Title } from '../../../../atoms';
+import { IconInput } from '../../../../molecules';
+
+export const ItemsDeletedContainer = styled.div`
+ margin: 0 2em;
+ display: flex;
+ flex-direction: column;
+`;
+
+export const ItemsDeletedTitle = styled(Title)`
+ font-size: 2.75rem;
+ margin-top: 0.5em;
+
+ padding: 0;
+ font-weight: 900;
+
+ color: var(--text-font-color);
+ text-shadow: var(--text-box-shadow);
+`;
+
+export const ItemsDeletedSearchAndAdd = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 3em;
+ margin-top: 1.5em;
+`;
+
+export const ItemsDeletedIconInput = styled(IconInput)`
+ height: 100%;
+ width: calc((100% - (100% / 3)) - 0.5em);
+ box-shadow: var(--container-box-shadow);
+`;
+
+export const ItemsDeletedAddButton = styled(Button)`
+ background-color: var(--add-new-task-button-bg-color);
+ color: var(--button-font-color);
+ border-radius: var(--standard-border-radius);
+ height: 100%;
+ width: calc((100% / 3) - 0.5em);
+ font-weight: 900;
+ font-size: 1rem;
+ border: var(--standard-border);
+ transition: filter 0.3s ease-in-out;
+ box-shadow: var(--button-box-shadow);
+
+ &:hover {
+ filter: brightness(0.9);
+ }
+`;
+
+export const ItemsDeletedDivider = styled(Divider)`
+ margin: 2em 0;
+ background-color: var(--divider-color);
+`;
+
+export const ItemsDeletedList = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+`;

src/components/organisms/MainContent/views/Deleted/items-deleted.tsx

@@ -0,0 +1,43 @@
+import {
+ ItemsDeletedAddButton,
+ ItemsDeletedContainer,
+ ItemsDeletedDivider,
+ ItemsDeletedIconInput,
+ ItemsDeletedList,
+ ItemsDeletedSearchAndAdd,
+ ItemsDeletedTitle,
+} from './items-deleted.styled';
+
+import { Search } from 'lucide-react';
+import { TaskItem } from '../../../../molecules';
+import { ItemsDeletedProps } from './items-deleted.interface';
+import { useItemsDeleted } from './items-deleted.hook';
+
+export const ItemsDeleted = (props: ItemsDeletedProps) => {
+ const {
+ handleAddTaskModalClick,
+ handleDoneButtonClick,
+ handleOnItemClick,
+ handleRemoveClick,
+ } = props;
+
+ const { filteredTasks, handleSearchInputChange } = useItemsDeleted(props);
+
+ return (
+ <ItemsDeletedContainer>
+ <ItemsDeletedTitle title="Things deleted:" />
+ <ItemsDeletedDivider />
+ <ItemsDeletedList>
+ {filteredTasks.map((task) => (
+ <TaskItem
+ key={task.id}
+ task={task}
+ handleDoneButtonClick={handleDoneButtonClick}
+ handleOnItemClick={handleOnItemClick}
+ handleRemoveClick={handleRemoveClick}
+ />
+ ))}
+ </ItemsDeletedList>
+ </ItemsDeletedContainer>
+ );
+};

src/components/organisms/MainContent/views/index.ts

@@ -1 +1,3 @@
 export * from './Todo';
+export * from './Completed';
+export * from './Deleted';