Skip to content

Commit

Permalink
Fixed user drawer open function
Browse files Browse the repository at this point in the history
  • Loading branch information
villepynttari committed Jun 28, 2024
1 parent 8f233a5 commit 05fe5a7
Show file tree
Hide file tree
Showing 7 changed files with 188 additions and 29 deletions.
27 changes: 15 additions & 12 deletions frontend/src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import MainView from './MainView/MainView';
import LoginView from './login/LoginView';
import { CssBaseline, Divider, styled, ThemeProvider } from '@mui/material';
import { theme_2024 } from '../theme_2024';
import { UserSettingsProvider } from '../contexts/UserSettingsContext';

export const GarApp = styled(Divider)(() => ({}));

Expand All @@ -22,18 +23,20 @@ const App = () => {
vertical: 'bottom'
}}
>
<GarApp id="app" orientation={'vertical'}>
<Router history={history}>
<Switch>
<Route path="/login">
<LoginView />
</Route>
<Route path="/">
<MainView />
</Route>
</Switch>
</Router>
</GarApp>
<UserSettingsProvider value={{}}>
<GarApp id="app" orientation={'vertical'}>
<Router history={history}>
<Switch>
<Route path="/login">
<LoginView />
</Route>
<Route path="/">
<MainView />
</Route>
</Switch>
</Router>
</GarApp>
</UserSettingsProvider>
</SnackbarProvider>
</ThemeProvider>
);
Expand Down
26 changes: 15 additions & 11 deletions frontend/src/components/BookingView/BookingView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
StretchingHorizontalSpacer,
UserIcon
} from '../../theme_2024';
import { useUserSettings } from '../../contexts/UserSettingsContext';

const UPDATE_FREQUENCY = 30000;
const GET_RESERVED = true;
Expand Down Expand Up @@ -75,6 +76,7 @@ const RoomsPageHeaderWithUserIcon = (props: { onClick: () => void }) => {
sx={{
width: '100%'
}}
onClick={props.onClick}
>
<Typography variant={'h1'}>
ROOMS
Expand Down Expand Up @@ -105,12 +107,7 @@ function BookingView(props: BookingViewProps) {
const [displayRooms, setDisplayRooms] = useState<Room[]>(rooms);
const [bookings, setBookings] = useState<Booking[]>([]);
const [bookingDuration, setBookingDuration] = useState(15);
const [expandSettingsDrawer, setExpandSettingsDrawer] = useState(
false as boolean
);
const [expandedFeaturesAll, setExpandedFeaturesAll] = useState(
false as boolean
);

const [expandFilteringDrawer, setExpandFilteringDrawer] = useState(false);

// Filtering states
Expand All @@ -123,6 +120,13 @@ function BookingView(props: BookingViewProps) {

const { createErrorNotification } = useCreateNotification();

const {
showUserSettingsMenu,
setShowUserSettingsMenu,
expandedFeaturesAll,
setExpandedFeaturesAll
} = useUserSettings();

const updateRooms = useCallback(() => {
if (preferences) {
const buildingPreference = preferences.building?.id;
Expand Down Expand Up @@ -362,11 +366,11 @@ function BookingView(props: BookingViewProps) {
};

const openSettingsDrawer = () => {
setExpandSettingsDrawer(true);
setShowUserSettingsMenu(true);
};

const toggleDrawers = (newOpen: boolean) => {
setExpandSettingsDrawer(newOpen);
const toggleSettingsDrawer = (newOpen: boolean) => {
setShowUserSettingsMenu(newOpen);
};

const updateData = useCallback(() => {
Expand Down Expand Up @@ -449,8 +453,8 @@ function BookingView(props: BookingViewProps) {
}}
>
<UserDrawer
open={expandSettingsDrawer}
toggle={toggleDrawers}
open={showUserSettingsMenu}
toggle={toggleSettingsDrawer}
name={name}
expandedFeaturesAll={expandedFeaturesAll}
setExpandedFeaturesAll={setExpandedFeaturesAll}
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/BookingView/FilteringDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import SearchIcon from '@mui/icons-material/Search';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import InputAdornment from '@mui/material/InputAdornment';
import styled from '@mui/styled-engine';
import { useUserSettings } from '../../contexts/UserSettingsContext';

export const Row = styled(Box)(({ theme }) => ({
display: 'flex',
Expand Down Expand Up @@ -48,6 +49,7 @@ interface Props {

// Note: Actual filtering of the rooms is done one level up in booking view
const FilteringDrawer = (props: Props) => {
const { showUserSettingsMenu } = useUserSettings();
const {
open,
toggle,
Expand Down Expand Up @@ -127,7 +129,7 @@ const FilteringDrawer = (props: Props) => {
iconRight={'Expand'}
isOpen={open}
toggle={toggle}
disableSwipeToOpen={false}
disableSwipeToOpen={showUserSettingsMenu}
mounted={true}
>
<StyledDrawerWrapper>
Expand Down
20 changes: 19 additions & 1 deletion frontend/src/components/BuildingList/BuildingList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
StretchingHorizontalSpacer,
UserIcon
} from '../../theme_2024';
import { useUserSettings } from '../../contexts/UserSettingsContext';
import UserDrawer from '../UserDrawer/UserDrawer';

type BuildingSelectProps = {
selectedBuildingId: string;
Expand Down Expand Up @@ -69,6 +71,12 @@ const BuildingList = (props: BuildingSelectProps) => {
setAlignment(newAlignment);
}
};
const {
showUserSettingsMenu,
setShowUserSettingsMenu,
expandedFeaturesAll,
setExpandedFeaturesAll
} = useUserSettings();

const renderBuildingList = (): JSX.Element[] => {
if (alignment === 'names') {
Expand Down Expand Up @@ -158,7 +166,9 @@ const BuildingList = (props: BuildingSelectProps) => {
</Typography>
<StretchingHorizontalSpacer />
{/*TODO villep: NOT IMPLEMENTED*/}
<UserIcon />
<UserIcon
onClick={() => setShowUserSettingsMenu(true)}
/>
</CenterAlignedStack>
<Typography
textAlign="left"
Expand Down Expand Up @@ -229,6 +239,14 @@ const BuildingList = (props: BuildingSelectProps) => {
</Stack>

{renderBuildingList()}

<UserDrawer
open={showUserSettingsMenu}
toggle={() => setShowUserSettingsMenu(!showUserSettingsMenu)}
name={name}
expandedFeaturesAll={expandedFeaturesAll}
setExpandedFeaturesAll={setExpandedFeaturesAll}
/>
</div>
);
};
Expand Down
56 changes: 56 additions & 0 deletions frontend/src/components/UserDrawer/UserDrawer.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// @ts-nocheck
import React from 'react';
import ReactDOM, { unmountComponentAtNode } from 'react-dom';
import { DateTime } from 'luxon';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import BookingDrawer from './BookingDrawer';
import UserDrawer from './UserDrawer';

const fakeRoom = {
id: '123',
name: 'Amor',
building: 'Hermia 5',
capacity: 15,
features: ['TV', 'Whiteboard'],
nextCalendarEvent: DateTime.now().plus({ minutes: 30 }).toUTC().toISO(),
email: '[email protected]'
};
let container = null;

describe('BookingDrawer', () => {
beforeEach(() => {
// Setup a DOM element as a render target
container = document.createElement('div');
document.body.appendChild(container);
});

afterEach(() => {
// Cleanup on exiting
container.remove();
container = null;
});

it('Shows logout button', async () => {
const userMock = jest.fn();
render(
<UserDrawer
open={true}
toggle={jest.fn()}
bookRoom={userMock}
room={fakeRoom}
duration={15}
additionalDuration={0}
availableMinutes={30}
onAddTime={jest.fn()}
startingTime={'Now'}
/>,
container
);

const bookButton = screen.queryByTestId('BookNowButton');
await waitFor(() => expect(bookButton).toBeTruthy());

fireEvent.click(bookButton);
expect(userMock).toBeCalledTimes(1);
});
});
10 changes: 6 additions & 4 deletions frontend/src/components/UserDrawer/UserDrawer.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useHistory } from 'react-router-dom';
import { Visibility } from '@mui/icons-material';
import { Logout, Visibility } from '@mui/icons-material';
import SwipeableEdgeDrawer, {
DrawerContent
} from '../SwipeableEdgeDrawer/SwipeableEdgeDrawer';
import { DrawerButtonSecondary } from '../BookingDrawer/BookingDrawer';
import { logout } from '../../services/authService';
import useCreateNotification from '../../hooks/useCreateNotification';
import { Box } from '@mui/material';
import { Box, Typography } from '@mui/material';
import LogoutIcon from '@mui/icons-material/Logout';

type userSettingsProps = {
open: boolean;
Expand Down Expand Up @@ -67,10 +68,11 @@ const UserDrawer = (props: userSettingsProps) => {
</DrawerButtonSecondary>
<DrawerButtonSecondary
aria-label="logout"
data-testid="BookNowButton"
data-testid="Logout"
onClick={doLogout}
>
logout
<Logout aria-label={'logout'}></Logout>
&nbsp;Logout
</DrawerButtonSecondary>
</DrawerContent>
</Box>
Expand Down
74 changes: 74 additions & 0 deletions frontend/src/contexts/UserSettingsContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React, {
Dispatch,
PropsWithChildren,
ProviderProps,
useState
} from 'react';
import { logout } from '../services/authService';
import useCreateNotification from '../hooks/useCreateNotification';
import { useHistory } from 'react-router-dom';

export interface UserSettingsContextProps {
showUserSettingsMenu: boolean;
setShowUserSettingsMenu: (show: boolean) => void;
expandedFeaturesAll: boolean;
setExpandedFeaturesAll: (expand: boolean) => void;
doLogout: () => void;
}

export const userSettingsContextDefaults = {
showUserSettingsMenu: false,
expandedFeaturesAll: false
};
export const UserSettingsContext = React.createContext<
Partial<UserSettingsContextProps>
>({
...userSettingsContextDefaults
});

export const UserSettingsProvider = (
props: PropsWithChildren<ProviderProps<Partial<UserSettingsContextProps>>>
) => {
const { createSuccessNotification, createErrorNotification } =
useCreateNotification();
const history = useHistory();
const doLogout = () => {
logout()
.then(() => {
createSuccessNotification('Logout successful');
history.push('/login');
})
.catch(() => {
createErrorNotification('Error in logout, try again later');
history.push('/login');
});
};

const [showUserSettingsMenu, setShowUserSettingsMenu] = React.useState(
props.value?.showUserSettingsMenu || false
);
const [expandedFeaturesAll, setExpandedFeaturesAll] = useState(
false as boolean
);

const ctx = {
showUserSettingsMenu,
setShowUserSettingsMenu,
doLogout,
expandedFeaturesAll,
setExpandedFeaturesAll
};

return (
<UserSettingsContext.Provider
value={{ ...userSettingsContextDefaults, ...props.value, ...ctx }}
>
{props.children}
</UserSettingsContext.Provider>
);
};

export const useUserSettings = (): UserSettingsContextProps => {
const ctx = React.useContext(UserSettingsContext);
return ctx as UserSettingsContextProps;
};

0 comments on commit 05fe5a7

Please sign in to comment.