-
Notifications
You must be signed in to change notification settings - Fork 208
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend Detail Drawer: Add detail drawer mode
Signed-off-by: Vincent T <[email protected]>
- Loading branch information
Showing
13 changed files
with
230 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { FormControlLabel, Switch } from '@material-ui/core'; | ||
| import React from 'react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { setDetailDrawerEnabled } from '../../../redux/drawerModeSlice'; | ||
| import { useTypedSelector } from '../../../redux/reducers/reducers'; | ||
|
|
||
| export default function DrawerModeButton() { | ||
| // This will fix the problem of the project refreshing the state away from needed position | ||
|
|
||
| // we initate a const that sets the state for the drawerMode, it will read whatever state is on and then set it to local storage through the setDetailDrawerEnabled function later | ||
| const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); | ||
|
|
||
| // localStorage.getItem('detailDrawerEnabled') will return a string, so we need to convert it to a boolean | ||
| // ex. localStorage.getItem('detailDrawerEnabled') = 'true' or 'false' | ||
| const localDetailDrawerEnabled = Boolean(localStorage.getItem('detailDrawerEnabled')); | ||
|
|
||
| // we need to create a state for the current changes to the drawerMode, so we create a new state called newDrawerEnabled and set it to the localDetailDrawerEnabled | ||
| // we use newDrawerEnabled to take in a change of state, send it to the setDetailDrawerEnabled function which the function then sets sets the state to the new change and ALSO sets it to local storage | ||
|
|
||
| const [newDrawerEnabled, changeDetailDrawerEnabled] = useState(localDetailDrawerEnabled); | ||
|
|
||
| const dispatch = useDispatch(); | ||
| const { t } = useTranslation('translation'); | ||
|
|
||
| // the useEffect will run everytime the newDrawerEnabled state changes, which is everytime the user clicks the switch button because the switch button changes the state of newDrawerEnabled | ||
| useEffect(() => { | ||
| dispatch(setDetailDrawerEnabled(newDrawerEnabled)); | ||
| console.log('ON SETTINGS'); | ||
| console.log(localStorage.getItem('detailDrawerEnabled')); | ||
| }, [newDrawerEnabled]); | ||
|
|
||
| // this function takes in the current changes and updates it, this kicks off the useEffect that is listening for changes to newDrawerEnabled | ||
| function drawerModeToggle() { | ||
| console.log('drawerModeToggle'); | ||
| changeDetailDrawerEnabled(!newDrawerEnabled); | ||
| } | ||
|
|
||
| // NOTICE THAT WE DO NOT USE NewDrawerEnabled TO DETERMINE HOW THE SWITCH IS RENDERED UNDER THE CHECKED PROP, THIS IS BECAUSE THE USEEFFECT WILL RERENDER THE COMPONENT WITH THE NEW STATE | ||
| return ( | ||
| <FormControlLabel | ||
| control={ | ||
| <Switch | ||
| checked={isDetailDrawerEnabled} | ||
| onClick={() => drawerModeToggle()} | ||
| name="drawerMode" | ||
| color="primary" | ||
| /> | ||
| } | ||
| // will need to replace label | ||
| label={t('translation|Drawer Mode')} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
frontend/src/components/common/DetailDrawer/DetailDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { Button } from '@material-ui/core'; | ||
| import Box from '@material-ui/core/Box'; | ||
| import Drawer from '@material-ui/core/Drawer'; | ||
| import React from 'react'; | ||
| import { useState } from 'react'; | ||
| import { useEffect } from 'react'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { setDetailDrawerOpen } from '../../../redux/drawerModeSlice'; | ||
| import { useTypedSelector } from '../../../redux/reducers/reducers'; | ||
|
|
||
| export interface DetailDrawerProps { | ||
| open: boolean; | ||
| onClose?: () => void; | ||
| children?: React.ReactNode; | ||
| } | ||
|
|
||
| export default function DetailDrawer({ open, onClose, children }: DetailDrawerProps) { | ||
| // localDetailDrawerEnabled is a string of either 'true' or 'false', if it does not exist yet it needs to be created | ||
| const localDetailDrawerEnabled = Boolean(localStorage.getItem('detailDrawerEnabled')); | ||
| console.log('LOCAL B OFF SETTINGS BEFORE localDetailDrawerEnabled', localDetailDrawerEnabled); | ||
|
|
||
| if (!localDetailDrawerEnabled) { | ||
| useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); | ||
| } | ||
| console.log('LOCAL B OFF SETTINGS localDetailDrawerEnabled', localDetailDrawerEnabled); | ||
|
|
||
| // const isDetailDrawerOpen = localStorage.getItem('detialDrawerOpen') ? Boolean(localStorage.getItem('detailDrawerOpen')) : useTypedSelector(state => state.drawerMode.isDetailDrawerOpen); | ||
| const isDetailDrawerOpen = open; | ||
| console.log('OFF SETTINGS isDetailDrawerOpen', isDetailDrawerOpen); | ||
| // localDetailDrawerOpen is a string of either 'true' or 'false', if it does not exist yet it needs to be created | ||
| // const localDetailDrawerOpen = Boolean(localStorage.getItem('detailDrawerOpen')) | ||
|
|
||
| const [openDetailDrawer, changeOpenDetailDrawer] = useState(isDetailDrawerOpen); | ||
| console.log('openDetailDrawer', openDetailDrawer); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| useEffect(() => { | ||
| console.log('Toggle Open Drawer', openDetailDrawer); | ||
| dispatch(setDetailDrawerOpen(openDetailDrawer)); | ||
| }, [openDetailDrawer]); | ||
|
|
||
| function toggleOpenDrawer() { | ||
| changeOpenDetailDrawer(!openDetailDrawer); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {!openDetailDrawer && ( | ||
| <> | ||
| <Drawer anchor="right" open onClose={onClose}> | ||
| <Box width={200} p={2}> | ||
| <Button onClick={() => toggleOpenDrawer()}>Open</Button> | ||
| </Box> | ||
| </Drawer> | ||
| </> | ||
| )} | ||
| {openDetailDrawer && ( | ||
| <> | ||
| <Drawer anchor="right" open onClose={() => toggleOpenDrawer()}> | ||
| <Box width={600} p={2}> | ||
| <Button onClick={() => toggleOpenDrawer()}>Close</Button> | ||
| {children} | ||
| </Box> | ||
| </Drawer> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| // * the drawer is not opening in minimized mode? persistent drawer fix maybe - https://mui.com/material-ui/react-drawer/#persistent-drawer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { createSlice, PayloadAction } from '@reduxjs/toolkit'; | ||
|
|
||
| interface DrawerModeState { | ||
| isDetailDrawerEnabled: boolean; | ||
| isDetailDrawerOpen: boolean; | ||
| } | ||
|
|
||
| const initialState: DrawerModeState = { | ||
| isDetailDrawerEnabled: false, | ||
| isDetailDrawerOpen: false, | ||
| }; | ||
|
|
||
| const drawerModeSlice = createSlice({ | ||
| name: 'drawerMode', | ||
| initialState, | ||
| reducers: { | ||
| setDetailDrawerEnabled: (state, action: PayloadAction<boolean>) => { | ||
| state.isDetailDrawerEnabled = action.payload; | ||
| localStorage.setItem('detailDrawerEnabled', `${action.payload}`); | ||
| }, | ||
| setDetailDrawerOpen: (state, action: PayloadAction<boolean>) => { | ||
| state.isDetailDrawerOpen = action.payload; | ||
| localStorage.setItem('detailDrawerOpen', `${action.payload}`); | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export const { setDetailDrawerEnabled, setDetailDrawerOpen } = drawerModeSlice.actions; | ||
| export default drawerModeSlice.reducer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters