196 as a dev I want to refactor the header component #297

SamuelPelletierEvraire · 2024-10-24T15:26:44Z

Must contain the ACIA logo
Must contain a button to change language
Must contain a profile button profile / dashboard page issue
Must contain a button to display the side menu side menu issue

- Created User class file (Base) - Implement header component. - Remove some console.log unused in layout.tsx - Add userPopUp component (Not finish yet)

- Added user class to manage user information - Added UserPopup.tsx for log out/ version app / username - Added theme.d.ts file to add additional type for theme

- Add new new type (Breakpoints)

- Remove file counter.tsx that was not used (Exemple case) - Fix lint - Fix ACIA logo adaptiveness

- Create file for test Header

SamuelPelletierEvraire · 2024-10-24T16:55:27Z

Animations like loading indicators are necessary however.
@k-allagbe
This is gonna be made in another Issue about skeleton loading

SamuelPelletierEvraire · 2024-10-24T17:03:19Z

Create new issue : Create new issue for separate user Popup and the header.: #298

k-allagbe · 2024-10-24T18:34:35Z

src/app/layout.tsx

 export default function RootLayout({
  children,
 }: Readonly<{ children: React.ReactNode }>) {
-  const [SideNavOpen, setSideNavOpen] = useState(false);
+  const { sideNavOpen } = useStore();


Let's use the zustand stores sparsely. As a rule of thumb, when the components sharing the state are grouped and hierarchically not too distant, we should use useState and props drilling. Like in this case with Header and SideNav, they are close enough, using useState is fine.

ChromaticPanic · 2024-10-24T18:38:16Z

It's doing a weird horizontal scroll thing on the sidenav . Left Bottom.
Also the vertical scrollbar persists no matter the browser height

SamuelPelletierEvraire · 2024-10-24T18:49:41Z

It's doing a weird horizontal scroll thing on the sidenav . Left Bottom. Also the vertical scrollbar persists no matter the browser height

The side nav was already implemented but not done at all gonna be done in other issue.

…https://github.com/ai-cfia/fertiscan-frontend into 196-as-a-dev-i-want-to-refactor-the-header-component

- Added hover style on button and icon button

…https://github.com/ai-cfia/fertiscan-frontend into 196-as-a-dev-i-want-to-refactor-the-header-component

…nto 196-refactor-header-suggestions

issue #196: header component responsiveness suggestions

SamuelPelletierEvraire added 4 commits October 23, 2024 15:52

- Created Class folder

9e72ca4

- Created User class file (Base) - Implement header component. - Remove some console.log unused in layout.tsx - Add userPopUp component (Not finish yet)

- Modify state to use zustand

94f209e

- Added user class to manage user information - Added UserPopup.tsx for log out/ version app / username - Added theme.d.ts file to add additional type for theme

- fix popup icon adaptiveness

3cc5bc7

- Add new new type (Breakpoints)

- fix header adaptiveness to implement new way to adaptive icon

709e1a4

- Remove file counter.tsx that was not used (Exemple case) - Fix lint - Fix ACIA logo adaptiveness

SamuelPelletierEvraire requested review from ChromaticPanic and k-allagbe October 24, 2024 15:26

SamuelPelletierEvraire self-assigned this Oct 24, 2024

SamuelPelletierEvraire requested a review from a team as a code owner October 24, 2024 15:26

SamuelPelletierEvraire linked an issue Oct 24, 2024 that may be closed by this pull request

As a dev, I want to refactor the header component #196

Closed

4 tasks

SamuelPelletierEvraire had a problem deploying to experimental October 24, 2024 15:26 — with GitHub Actions Failure

- Rename folder component to components

7a61827

- Create file for test Header

SamuelPelletierEvraire had a problem deploying to experimental October 24, 2024 15:37 — with GitHub Actions Failure

Fix test for header

33afe41

SamuelPelletierEvraire temporarily deployed to experimental October 24, 2024 16:21 — with GitHub Actions Inactive

This comment was marked as resolved.

Sign in to view

Add comments / documentation

7d4fd31

SamuelPelletierEvraire temporarily deployed to experimental October 24, 2024 16:34 — with GitHub Actions Inactive

This comment was marked as resolved.

Sign in to view

Remove all related code about UserPopup

f2cf105

SamuelPelletierEvraire temporarily deployed to experimental October 24, 2024 16:53 — with GitHub Actions Inactive

- Removing animation

ab2a57b

SamuelPelletierEvraire temporarily deployed to experimental October 24, 2024 17:31 — with GitHub Actions Inactive

k-allagbe reviewed Oct 24, 2024

View reviewed changes

- removing zustand use for SideNavOpen

64b9574

SamuelPelletierEvraire requested a review from k-allagbe October 24, 2024 18:56

SamuelPelletierEvraire had a problem deploying to experimental October 24, 2024 18:56 — with GitHub Actions Failure

SamuelPelletierEvraire had a problem deploying to experimental October 24, 2024 20:30 — with GitHub Actions Failure

SamuelPelletierEvraire added 2 commits October 24, 2024 16:34

remove es lint for test

81353b4

Merge branch '196-as-a-dev-i-want-to-refactor-the-header-component' of …

8c7fd15

…https://github.com/ai-cfia/fertiscan-frontend into 196-as-a-dev-i-want-to-refactor-the-header-component

SamuelPelletierEvraire had a problem deploying to experimental October 24, 2024 20:34 — with GitHub Actions Failure

fix header test

7376141

SamuelPelletierEvraire temporarily deployed to experimental October 25, 2024 13:07 — with GitHub Actions Inactive

replacing Mui button to MuiButtonBase to apply to all type of button

e574efe

SamuelPelletierEvraire temporarily deployed to experimental October 25, 2024 14:17 — with GitHub Actions Inactive

k-allagbe and others added 5 commits October 26, 2024 08:23

issue #196: remove breakpoint-based variable font sizes

d83c7a7

issue #196: remove breakpoint-based variable icon sizes

0cbc3f1

issue #196: logo sizes use ResponsiveStyleValue

b12420d

issue #196: improve logo breakpoint-based responsiveness

b696dc0

- modify size theme to include xs (Extra small)

e4a2ce4

- Added hover style on button and icon button

SamuelPelletierEvraire had a problem deploying to experimental October 27, 2024 16:27 — with GitHub Actions Failure

SamuelPelletierEvraire added 3 commits October 27, 2024 12:29

- modify size theme to include xs (Extra small)

ac6f6a1

- Added hover style on button and icon button

Merge branch '196-as-a-dev-i-want-to-refactor-the-header-component' of …

f90b597

…https://github.com/ai-cfia/fertiscan-frontend into 196-as-a-dev-i-want-to-refactor-the-header-component

fix eslint

c8e5c4a

SamuelPelletierEvraire temporarily deployed to experimental October 27, 2024 16:30 — with GitHub Actions Inactive

- fix usage of theme

7a67a54

SamuelPelletierEvraire temporarily deployed to experimental October 28, 2024 10:29 — with GitHub Actions Inactive

k-allagbe and others added 4 commits October 28, 2024 09:36

Merge branch '196-as-a-dev-i-want-to-refactor-the-header-component' i…

e316baa

…nto 196-refactor-header-suggestions

issue #196: use useBreakpoints in Header

cdb20aa

issue #196: basic tests

5334ada

Merge pull request #300 from ai-cfia/196-refactor-header-suggestions

af0bdd6

issue #196: header component responsiveness suggestions

k-allagbe temporarily deployed to experimental October 28, 2024 21:52 — with GitHub Actions Inactive

Youllou approved these changes Oct 29, 2024

View reviewed changes

k-allagbe approved these changes Oct 29, 2024

View reviewed changes

k-allagbe merged commit 965c106 into main Oct 30, 2024
6 checks passed

k-allagbe temporarily deployed to experimental October 30, 2024 14:10 — with GitHub Actions Inactive

SamuelPelletierEvraire deleted the 196-as-a-dev-i-want-to-refactor-the-header-component branch December 19, 2024 17:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

196 as a dev I want to refactor the header component #297

196 as a dev I want to refactor the header component #297

SamuelPelletierEvraire commented Oct 24, 2024 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

SamuelPelletierEvraire commented Oct 24, 2024

SamuelPelletierEvraire commented Oct 24, 2024

k-allagbe Oct 24, 2024

SamuelPelletierEvraire Oct 24, 2024

ChromaticPanic commented Oct 24, 2024 •

edited

Loading

SamuelPelletierEvraire commented Oct 24, 2024

196 as a dev I want to refactor the header component #297

196 as a dev I want to refactor the header component #297

Conversation

SamuelPelletierEvraire commented Oct 24, 2024 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

SamuelPelletierEvraire commented Oct 24, 2024

SamuelPelletierEvraire commented Oct 24, 2024

k-allagbe Oct 24, 2024

Choose a reason for hiding this comment

SamuelPelletierEvraire Oct 24, 2024

Choose a reason for hiding this comment

ChromaticPanic commented Oct 24, 2024 • edited Loading

SamuelPelletierEvraire commented Oct 24, 2024

SamuelPelletierEvraire commented Oct 24, 2024 •

edited

Loading

ChromaticPanic commented Oct 24, 2024 •

edited

Loading