-
Notifications
You must be signed in to change notification settings - Fork 164
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
19 changed files
with
378 additions
and
14 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
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,59 @@ | ||
| 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() { | ||
| const dispatch = useDispatch(); | ||
| const { t } = useTranslation('translation'); | ||
| // This will fix the problem of the project refreshing the state away from needed position | ||
|
|
||
| // DETAIL DRAWER MODE | ||
| const isDetailDrawerEnabled = useTypedSelector(state => state.drawerMode.isDetailDrawerEnabled); | ||
| // const localDetailDrawerEnabled = localStorage.getItem('detailDrawerEnabled'); | ||
| const [isDrawerEnabled, changeDetailDrawerEnabled] = useState<any>(isDetailDrawerEnabled); | ||
|
|
||
| if (isDetailDrawerEnabled) { | ||
| console.log('THE LOCAL STORAGE IS TRUE'); | ||
| dispatch(setDetailDrawerEnabled(true)); | ||
| console.log('READING FROM DISPATCHED STATE', isDetailDrawerEnabled); | ||
| } else { | ||
| console.log(" THE LOCAL STORAGE IS NULL, UNDEFINED, OR 'FALSE' "); | ||
| dispatch(setDetailDrawerEnabled(false)); | ||
| console.log('READING FROM DISPATCHED STATE', isDetailDrawerEnabled); | ||
| } | ||
|
|
||
| console.log('BUTTON - isDetailDrawerEnabled', isDetailDrawerEnabled); | ||
|
|
||
| // the useEffect will run everytime the isDrawerEnabled state changes, which is everytime the user clicks the switch button because the switch button changes the state of isDrawerEnabled | ||
| useEffect(() => { | ||
| dispatch(setDetailDrawerEnabled(isDrawerEnabled)); | ||
| console.log('ON SETTINGS'); | ||
| console.log(localStorage.getItem('detailDrawerEnabled')); | ||
| }, [isDrawerEnabled]); | ||
|
|
||
| // 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(!isDrawerEnabled); | ||
| } | ||
|
|
||
| // NOTICE THAT WE DO NOT USE isDrawerEnabled 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
124 changes: 124 additions & 0 deletions
124
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,124 @@ | ||
| // PUT BACK LATER ♦ | ||
| // 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 { useLocation } from 'react-router-dom'; | ||
| // import { useParams } from 'react-router-dom'; | ||
| import { setDetailDrawerOpen } from '../../../redux/drawerModeSlice'; | ||
| import { useTypedSelector } from '../../../redux/reducers/reducers'; | ||
|
|
||
| // PUT BACK LATER ♦ | ||
| // import DetailDrawerFrame from './DetailDrawerFrame'; ♦ | ||
|
|
||
| export interface DetailDrawerProps { | ||
| // isOpen: boolean; | ||
| onClose?: () => void; | ||
| children?: React.ReactNode; | ||
| } | ||
|
|
||
| // DELETE OR FIND A WAY TO USE CHILDREN LIKE IN CONSOLE LOG ♦ | ||
| // export default function DetailDrawer({ children }: DetailDrawerProps) { ♦ | ||
| export default function DetailDrawer({ children }: DetailDrawerProps) { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| // DELETE LATER - CONSOLE LOG ♦ | ||
| console.log(children); | ||
|
|
||
| const isDetailDrawerOpen = useTypedSelector(state => state.drawerMode.isDetailDrawerOpen); | ||
| console.log('OFF SETTINGS isDetailDrawerOpen', isDetailDrawerOpen); | ||
|
|
||
| // USE CHANGEOPENDETAILDRAWER OR JUST OPEN DETAIL DRAWER ♦ | ||
| // const [openDetailDrawer, changeOpenDetailDrawer] = useState<boolean>(isDetailDrawerOpen); | ||
| const [openDetailDrawer] = useState<boolean>(isDetailDrawerOpen); | ||
| console.log('openDetailDrawer', openDetailDrawer); | ||
|
|
||
| useEffect(() => { | ||
| console.log('Toggle Open Drawer', openDetailDrawer); | ||
| dispatch(setDetailDrawerOpen(openDetailDrawer)); | ||
| }, [openDetailDrawer]); | ||
|
|
||
| // * Trying to find a way to get the path and params to determine if it should be rendered within the iframe | ||
| const location = window.location.pathname; | ||
| // const url = window.location.href; | ||
|
|
||
| console.log('WINDOW', window.location); | ||
|
|
||
| const pathDetails = ['/pods/']; | ||
|
|
||
| useEffect(() => { | ||
| for (let i = 0; i < pathDetails.length; i++) { | ||
| if (location.includes(pathDetails[i])) { | ||
| console.log('URL PAIR MATCHED', pathDetails[i], location); | ||
| } | ||
| } | ||
| }, [window.location.href]); | ||
|
|
||
| // * DOES NOT WORK, WILL PRINT '{}' WHEN CONSOLE LOG params | ||
| // const location = useLocation(); | ||
| // const params = useParams(); | ||
|
|
||
| useEffect(() => { | ||
| console.log('location changed'); | ||
| console.log('LOCATION', location); | ||
|
|
||
| // console.log('PARAMS', params); | ||
| }, [location]); | ||
|
|
||
| // function toggleOpenDrawer() { | ||
| // changeOpenDetailDrawer(!openDetailDrawer); | ||
| // } | ||
|
|
||
| return ( | ||
| <> | ||
| {/* {!openDetailDrawer && ( | ||
| <> | ||
| <Box p={2}> | ||
| <Fab | ||
| style={{ | ||
| position: 'fixed', | ||
| bottom: '20px', | ||
| right: '20px', | ||
| padding: '0 20px', | ||
| borderRadius: '1em', | ||
| }} | ||
| color="primary" | ||
| variant="extended" | ||
| onClick={toggleOpenDrawer} | ||
| > | ||
| Open Drawer | ||
| </Fab> | ||
| </Box> | ||
| </> | ||
| )} */} | ||
|
|
||
| {/* {openDetailDrawer && ( | ||
| <> | ||
| <Drawer variant="temporary" anchor="right" open onClose={toggleOpenDrawer}> | ||
| <Box width={600} p={2}> | ||
| <DetailDrawerFrame title={'Example'} source={url} /> | ||
| <Button onClick={toggleOpenDrawer}>Close Drawer</Button> | ||
| {children} | ||
| </Box> | ||
| </Drawer> | ||
| </> | ||
| )} */} | ||
|
|
||
| {/* {!openDetailDrawer && ( | ||
| <> | ||
| <Drawer anchor="right" open onClose={toggleOpenDrawer}> | ||
| <Box width={200} p={2}> | ||
| <Button onClick={toggleOpenDrawer}>Open Drawer</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 |
17 changes: 17 additions & 0 deletions
17
frontend/src/components/common/DetailDrawer/DetailDrawerFrame.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,17 @@ | ||
| import React from 'react'; | ||
| import PodDetails from '../../pod/Details'; | ||
|
|
||
| export interface DetailDrawerFrameProps { | ||
| title?: string; | ||
| source?: string; | ||
| } | ||
|
|
||
| export default function DetailDrawerFrame({ title }: DetailDrawerFrameProps) { | ||
| return ( | ||
| <> | ||
| <p>{title}</p> | ||
| {/* <iframe title={title} src={source} width={'100%'} height={'100%'}></iframe> */} | ||
| <PodDetails /> | ||
| </> | ||
| ); | ||
| } |
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
Oops, something went wrong.