# Daily Drinks Project

An demo website for fulfilling functions of create, read, update and delete using React

## Demo

https://h2tiz.csb.app/

## Code

https://codesandbox.io/s/dailydrinks-eng-h2tiz

## Features

- Use Styled-Components for implementing CSS-in-JS (TS)
- Use React-Router for handling wrong-url case and extra pages in the future

## React Components

- Split [Dumb Components and Smart Components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43)
- Smart Components are dealing with the state interaction
- Dumb Components are stateless, focusing on how to present the state
- Manage the logic of processing state by `useReducer` hook

## Folder Structure

┌── public                     # Static HTML
├── src                        # All source code
│    ├── components            # React components
│    │    ├── common                     # Reusable components
│    │    │    ├── Button.tsx    
│    │    │    ├── Card.tsx 
│    │    │    ├── Input.tsx 
│    │    │    ├── Layout.tsx 
│    │    │    └── Modal.tsx    
│    │    │      
│    │    ├── CardList                   # Composed CardList component
│    │    │    ├── index.tsx             # Root of CardList
│    │    │    ├── OrderCard.tsx 
│    │    │    ├── AddMoreOrderCard.tsx 
│    │    │    ├── Title.tsx 
│    │    │    └── Summary.tsx 
│    │    │     
│    │    ├──  FormModal                 # Composed FormModal component
│    │    │    ├── index.tsx             # Root of FormModal
│    │    │    └── OrderForm.tsx 
│    │    │
│    │    ├── GlobalStyle.tsx            # Global style reset
│    │    └── GlobalThemeProvider.tsx    # Theme color and font size
│    │
│    │   
│    ├── pages                 # Entrypoints for each pages           
│    │    └── dailydrinks      # dailydrinks page
│    │         ├── index.tsx   # Root of Dailydrinks
│    │         └── reducer.ts  # reducers used by Dailydrinks 
│    │  
│    ├── utils                   # Reusable functions
│    │    ├── inputValidator.ts  # function for validating input
│    │    └── textBuilder.ts     # function for building string
│    │ 
│    └── index.tsx             # Main entrypoint for the web app  
│      
├── package.json               # List dependencies packages,npm scripts, project name etc.
└── tsconfig.json              # TypeScript settings

## State of Dailydrinks page

- Order State

interface OrderWithId {
    id: number;
    name: string;
    price: number;
    quantity: number;
    notes: string;
}

// Example: 

const orderState: OrderWithId[] = [
    { id: 1234, name: 'tea', price: 1.2, quantity: 2, notes: 'no ice' },
    { id: 5678, name: 'coke', price: 1.5, quantity: 3, notes: '' },
];

- Modal State

interface ModalState {
    isOpenModal: boolean;
    modalType: string;
    formDefaultValue: {
        id: number; 
        name: string; 
        price: number;
        quantity: number;
        notes: string;
    };
}

// Example: 

const modalState: ModalState = {
    isOpenModal: true,
    modalType: 'OPEN_MODAL_FOR_EDIT',
    formDefaultValue: {
        id: 1234, name: 'tea', price: 1.2, quantity: 1, notes: '',
    },
};