• 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