- 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
![](https://private-user-images.githubusercontent.com/130120172/241303223-088265a2-84df-45c2-9ab1-9d3422386c4f.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1NDQ2ODYsIm5iZiI6MTcyMTU0NDM4NiwicGF0aCI6Ii8xMzAxMjAxNzIvMjQxMzAzMjIzLTA4ODI2NWEyLTg0ZGYtNDVjMi05YWIxLTlkMzQyMjM4NmM0Zi5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDY0NjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MGI4NzdiMDhkMWY2YjY2ZDJkNTdmMzIyMDYyYjY4MThiOWI4NDM4NzcxMGY5Mjk2MzMzOGQ4ODY5NzcwYTVmYyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bsNfWqBq_SZug6IHTGbuIthHsWBfDtPI77OmHEjGU_E)
![](https://private-user-images.githubusercontent.com/130120172/241303230-d4df4d23-87ae-4c53-86e0-f07aa28fb315.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1NDQ2ODYsIm5iZiI6MTcyMTU0NDM4NiwicGF0aCI6Ii8xMzAxMjAxNzIvMjQxMzAzMjMwLWQ0ZGY0ZDIzLTg3YWUtNGM1My04NmUwLWYwN2FhMjhmYjMxNS5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDY0NjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2FiNWZiYzYzZTU4YjZlODJhNzdmMzY1YWMxYWViNTM4ODc0NWJhNDI0ZDliOWYxNzhmYmM4MWQ4YzE3NTk5MSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.o1B3hhbLkJhQ5LBZLpb-dD30D8e8CUPQlVHYExoTxTM)
![](https://private-user-images.githubusercontent.com/130120172/241303190-fb88da37-62d1-47a6-87c6-bebaaae4c946.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1NDQ2ODYsIm5iZiI6MTcyMTU0NDM4NiwicGF0aCI6Ii8xMzAxMjAxNzIvMjQxMzAzMTkwLWZiODhkYTM3LTYyZDEtNDdhNi04N2M2LWJlYmFhYWU0Yzk0Ni5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDY0NjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGRhMTYyYjhhZjAwODc5ZjU1NGIzODNjODU4MDQ2YTk0YzYyMGJlMDU0ZTEwZjA4YTkwMzE2MmZmMTE0NTBmMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.9iKGSMoI836MTWYbtCP37YXleGmvpugzkWnqqJMWgAc)
![](https://private-user-images.githubusercontent.com/130120172/241303197-439babda-0f54-4b7e-91cd-520dcc58b6c9.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1NDQ2ODYsIm5iZiI6MTcyMTU0NDM4NiwicGF0aCI6Ii8xMzAxMjAxNzIvMjQxMzAzMTk3LTQzOWJhYmRhLTBmNTQtNGI3ZS05MWNkLTUyMGRjYzU4YjZjOS5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDY0NjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmJkMjYyODJmYmQxNjQzMTVlZDM0ZWQ0OTUxMDg3ZTExYjk5NGQ5MzIyNmE1Yzg3NjE0YWMzZWQxMjMwZWI1MSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.F3mTeuI33tmMRBG-dC5UE-yXnHTvWftRHIY-NLmyIUo)
![](https://private-user-images.githubusercontent.com/130120172/241303211-744cd13e-342b-434b-9628-c30793116ece.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1NDQ2ODYsIm5iZiI6MTcyMTU0NDM4NiwicGF0aCI6Ii8xMzAxMjAxNzIvMjQxMzAzMjExLTc0NGNkMTNlLTM0MmItNDM0Yi05NjI4LWMzMDc5MzExNmVjZS5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDY0NjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmIwNDdjMGI3ZDFiNGM4MGQzYmJmMzNkYjQxNjU2YjAxMWYxMjE3MTUyMjYxYWIzZjZmMDNkMWU1YTExMjI0MCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.3Z_wrT2SOdFG0SPU0pgdfrPoGWTBzgPkdJftxRjEV9c)
![](https://private-user-images.githubusercontent.com/130120172/241303218-996108e4-b1bb-465e-9b52-3848eccc7807.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE1NDQ2ODYsIm5iZiI6MTcyMTU0NDM4NiwicGF0aCI6Ii8xMzAxMjAxNzIvMjQxMzAzMjE4LTk5NjEwOGU0LWIxYmItNDY1ZS05YjUyLTM4NDhlY2NjNzgwNy5qcGVnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MjFUMDY0NjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjMxM2U3NDA0MTY3OGJhOWQ1ZWM1ZTMxMGRjZWYwMTdmNWI0MDk3MTcxOGZlNTk2MzQzYzQ4ZjIyYjE2YTVkZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.-nNOIty3X6YfihwTna-BCzmmgvkEDrsCGCIVGm4hNsI)