- Responsive
- Desktop size got a route indicator
- Other parts of the UI are responsive now
- Test
- Added Some Unit Tests for Reducers
- learn and adding components test progressively
- Readme
- Readme got updated using the markup language
-
Performance Prevent re-rendering using React Dev Tools.
- List items on selection,
- Next Button,
- Header Stepper,
- Route Indicator.
-
Hooks refactor functions and turn them into the hook
- useDiffrenceDateTime
- useNextStep
- usePlanSeperator
-
Component Structure
- create a new component and a data type for guest and occasion pages, that uses a similar implementation to the other create-plan outlets ( question+answer)
initialState includes a Array<Plan>
and a Plan object that will fill through the life cycle of creating a plan, purpose of having a single plan object was to not modify the original plan Array and keep it untouched.
how it works:
- initially newPlan object is undefined
const plan: Plan | undefined = undefined;
- on add new plan we create a dummy id and initialize all the properties with empty values
state.newPlan = {
id: action.payload,
alcohol: "",
etc ... }
- after that we add user modifications step by step to the same plan object.
- in the end we have a full-filled Plan object that we can add to our plan Array.
state.plans.push(state.newPlan);
I can tell 4 pages had the same structure icon + question + answer and I use the same data structure and component for all of them.
I used Outlet instead of conditional rendering due to the declarative syntax of Routes
in the todo route, I just pass an index prop to simply access the array plan and show the todos of a plan.
first, I want to separate todos from plans in a different slice but I just figured out we can`t access a slice in another slice. in the end, todos were very tight and specific to the plans
src
┣ assets
┃ ┣ icons
┃ ┃
┣ components
┃ ┣ layout
┃ ┗ shared-ui
┃ ┃
┣ core
┃ ┣ constant
┃ ┣ hook
┃ ┗ util
┃ ┃
┣ pages
┃ ┣ Home
┃ ┃ ┣ test
┃ ┃ ┣ components
┃ ┃ ┗ home.tsx
┃ ┣ plan
┃ ┃ ┣ components
┃ ┃ ┗ CreatePlan.tsx
┃ ┗ todo
┃ ┃ ┣ components
┃ ┃ ┗ Todo.tsx
┃ ┃
┣ redux
┃ ┣ test
┃ ┃ ┣ plan-slice.test.ts
┃ ┃ ┗ ui-slice.test.ts
┃ ┣ slices
┃ ┃ ┣ plan-slice.ts
┃ ┃ ┗ ui-slice.ts
┃ ┃
┃ ┗ store.ts
┃ ┃
┣ types
┃ ┣ plan.d.ts
┃ ┣ etc ...
┃ ┃
┗ App.tsx