Skip to content

Commit f6ac296

Browse files
diogenis-sidiogenis-si
authored
Merge pull request #202 from swiftss-org/staging
Release 11/2/2022
2 parents 149f601 + 412ea81 commit f6ac296

File tree

32 files changed

+346
-110
lines changed

32 files changed

+346
-110
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@ You can run the app in development mode. Open [http://localhost:3000](http://loc
2121

2222
`yarn start`
2323

24+
> __Note:__ If you are using Node v17+ you may get `error:03000086:digital envelope routines::initialization error` error when running `yarn start`. If so please follow the instructions on https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported to resolve.
25+
2426
You can run the test runner in the interactive watch mode.
2527

2628
`yarn test`
29+
30+
### Running against a local instance of the registry-api
31+
You can run against a different registry-api backend by changing `BASE_URL` in `src/api/axiosInstances.ts`. For example to run against a local development instance this should be set to:
32+
~~~
33+
const BASE_URL = 'http://localhost:8000/api';
34+
~~~

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@
4141
"scripts": {
4242
"start:prod": "node --max_old_space_size=460 server.js",
4343
"start": "react-app-rewired start",
44-
"build": "react-app-rewired build",
44+
"start": "react-scripts --openssl-legacy-provider start",
45+
"build": "react-app-rewired --openssl-legacy-provider build",
4546
"test": "react-app-rewired test",
4647
"lint": "eslint 'src/**/*.{ts,tsx}'",
4748
"eject": "react-scripts eject",

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>TMH Registry</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.style.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
22

33
import { appTheme } from './theme/globals';
44

5-
export const AppWrapper = styled.div`
5+
export const AppWrapper = styled.div<{ isDesktop: boolean }>`
66
background-color: white;
77
color: black;
88
font-family: ${appTheme.fontFamily};

‎src/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
55
import { BrowserRouter as Router } from 'react-router-dom';
66

77
import { AppWrapper } from './App.style';
8+
import { useResponsiveLayout } from './hooks/useResponsiveSidebar';
89
import NotificationsProvider from './providers/Notifications/NotificationProvider';
910
import Routes from './routing/Routes';
1011
import { themeOverride } from './theme/globals';
@@ -14,12 +15,13 @@ const queryClient = new QueryClient({
1415
});
1516

1617
const App: React.FC = () => {
18+
const { isDesktop } = useResponsiveLayout();
1719
return (
1820
<QueryClientProvider client={queryClient}>
1921
<ThemeProvider theme={themeOverride}>
2022
<NotificationsProvider>
2123
<Router>
22-
<AppWrapper>
24+
<AppWrapper isDesktop={isDesktop}>
2325
<Routes />
2426
</AppWrapper>
2527
</Router>

‎src/common.style.tsx‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,19 @@ import { grid } from '@orfium/ictinus/dist/theme/functions';
44

55
import { flex } from './theme/functions';
66

7-
export const PageWrapper = styled.div`
7+
export const PageWrapper = styled.div<{ isDesktop: boolean }>`
88
${flex};
99
flex-direction: column;
10-
height: calc(100vh);
11-
width: 100%;
10+
height: ${({ isDesktop }) => (isDesktop ? '100%' : 'calc(100vh)')};
11+
justify-content: center;
12+
width: ${({ isDesktop }) => (isDesktop ? '50%' : '100%')};
13+
14+
${({ isDesktop }) =>
15+
isDesktop &&
16+
`
17+
justify-content: flex-start;
18+
19+
`}
1220
`;
1321

1422
export const CheckBoxContainer = styled.div<{ error?: boolean; checked?: boolean }>`
@@ -34,6 +42,18 @@ export const LongFieldWrapper = styled.div`
3442
export const FieldWrapper = styled.div`
3543
box-sizing: border-box;
3644
width: 100%;
45+
46+
/* Chrome, Safari, Edge, Opera */
47+
input::-webkit-outer-spin-button,
48+
input::-webkit-inner-spin-button {
49+
-webkit-appearance: none;
50+
margin: 0;
51+
}
52+
53+
/* Firefox */
54+
input[type='number'] {
55+
-moz-appearance: textfield;
56+
}
3757
`;
3858

3959
export const RadioText = styled.span`
@@ -91,12 +111,12 @@ export const SectionTitle = styled.div`
91111
font-weight: 500;
92112
`;
93113

94-
export const ButtonContainer = styled.div`
114+
export const ButtonContainer = styled.div<{ isDesktop: boolean }>`
95115
background: ${(props) => props.theme.utils.getColor('lightCoolGray', 400)};
96116
border-top: 1px solid ${(props) => props.theme.utils.getColor('lightGray', 200)};
97117
bottom: 0;
98118
box-sizing: border-box;
99119
padding: 16px;
100-
position: fixed;
120+
position: ${({ isDesktop }) => (isDesktop ? 'relative' : 'fixed')};
101121
width: 100%;
102122
`;

‎src/components/Drawer/Drawer.style.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const Container = styled.div<{
1616
min-height: 100%;
1717
overflow: hidden;
1818
position: ${(props) => (props.isSmallDesktop ? 'absolute' : 'relative')};
19-
width: ${(props) =>
20-
props.expanded ? rem('308px') : props.isDesktop ? rem('112px') : rem('0px')};
19+
width: ${(props) => (props.expanded ? rem('308px') : rem('0px'))};
2120
z-index: 100;
2221
`;

‎src/components/Drawer/Drawer.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export type Props = {
2525
setExpanded: (v: boolean) => void;
2626
/** The menu items to be displayed in the drawer */
2727
menuItems: MenuItem[];
28+
handleClick?: () => void;
2829
};
2930

3031
const Drawer: React.FC<Props> = (props) => {
@@ -38,11 +39,18 @@ const Drawer: React.FC<Props> = (props) => {
3839
history.push('/');
3940
};
4041

42+
const handleClick = () => {
43+
props.setExpanded(false);
44+
};
45+
46+
const isDesktop =
47+
breakpoints.des1200 || breakpoints.des1440 || breakpoints.des1366 || breakpoints.des1920;
48+
4149
return (
4250
<Container
4351
expanded={props.expanded}
44-
isDesktop={breakpoints.des1200}
45-
isSmallDesktop={!breakpoints.des1440}
52+
isDesktop={isDesktop}
53+
isSmallDesktop={isSmallDesktop}
4654
onMouseEnter={() => isSmallDesktop && props.setExpanded(true)}
4755
onMouseLeave={() => isSmallDesktop && props.setExpanded(false)}
4856
>
@@ -71,7 +79,7 @@ const Drawer: React.FC<Props> = (props) => {
7179
NMHP Registry
7280
</HeaderText>
7381
</Header>
74-
<Navigation {...props} />
82+
<Navigation handleClick={handleClick} {...props} />
7583

7684
<Footer>
7785
<div style={{ display: 'flex', gap: '12px' }}>

‎src/components/Drawer/Navigation/MenuItem/MenuItem.tsx‎

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,38 @@ import { MenuItemText, MenuLink } from '../Navigation.style';
77
type Props = {
88
/** Defines the current menu item whose submenu item is currently selected */
99
isCurrent: boolean;
10+
handleClick?: () => void;
1011
} & MenuItemProps;
1112

12-
const MenuItem: React.FC<Props> = memo(({ isCurrent, name, url, state: linkState }) => {
13-
const MenuItemContent = (
14-
<React.Fragment>
15-
<MenuItemText current={isCurrent} className={'menu-item-text'}>
16-
{name}
17-
</MenuItemText>
18-
</React.Fragment>
19-
);
13+
const MenuItem: React.FC<Props> = memo(
14+
({ isCurrent, name, url, handleClick, state: linkState }) => {
15+
const MenuItemContent = (
16+
<React.Fragment>
17+
<MenuItemText current={isCurrent} className={'menu-item-text'}>
18+
{name}
19+
</MenuItemText>
20+
</React.Fragment>
21+
);
2022

21-
return (
22-
<React.Fragment>
23-
<MenuLink
24-
exact
25-
to={{
26-
pathname: url,
27-
state: linkState,
28-
}}
29-
data-testid={url}
30-
activeClassName="active"
31-
key={url}
32-
>
33-
{MenuItemContent}
34-
</MenuLink>
35-
</React.Fragment>
36-
);
37-
});
23+
return (
24+
<React.Fragment>
25+
<MenuLink
26+
exact
27+
to={{
28+
pathname: url,
29+
state: linkState,
30+
}}
31+
data-testid={url}
32+
activeClassName="active"
33+
key={url}
34+
onClick={handleClick}
35+
>
36+
{MenuItemContent}
37+
</MenuLink>
38+
</React.Fragment>
39+
);
40+
}
41+
);
3842

3943
MenuItem.displayName = 'MenuItem';
4044
export default MenuItem;

‎src/components/Drawer/Navigation/Navigation.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,18 @@
11
import React, { useState } from 'react';
22

33
import useLocationToGetCurrentMenuItem from '@orfium/ictinus/dist/hooks/useLocationToGetCurrentMenuItem';
4-
import { useHistory } from 'react-router-dom';
54

65
import { useIsLoggedIn } from '../../../hooks/useIsLoggedIn';
76
import { Props } from '../Drawer';
87
import MenuItem from './MenuItem/MenuItem';
9-
import {
10-
Container,
11-
PlaceholderContainer,
12-
PlaceholderText,
13-
PlaceholderLink,
14-
} from './Navigation.style';
8+
import { Container, PlaceholderContainer, PlaceholderText } from './Navigation.style';
159

1610
type NavigationProps = Props;
1711

18-
const Navigation: React.FC<NavigationProps> = ({ menuItems, expanded }) => {
12+
const Navigation: React.FC<NavigationProps> = ({ menuItems, expanded, handleClick }) => {
1913
const [, setOpenMenuItems] = useState<string[]>([]);
2014
const [currentMenuItem] = useLocationToGetCurrentMenuItem(menuItems, setOpenMenuItems);
2115
const { isLoggedIn } = useIsLoggedIn();
22-
const history = useHistory();
2316

2417
return (
2518
<Container expanded={expanded}>
@@ -28,6 +21,7 @@ const Navigation: React.FC<NavigationProps> = ({ menuItems, expanded }) => {
2821
(menuItem) =>
2922
menuItem.visible && (
3023
<MenuItem
24+
handleClick={handleClick}
3125
key={menuItem.url}
3226
isCurrent={currentMenuItem === menuItem.url}
3327
{...menuItem}
@@ -40,9 +34,6 @@ const Navigation: React.FC<NavigationProps> = ({ menuItems, expanded }) => {
4034
For more options please go to sign in page and use your credentials to enter the
4135
application.
4236
</PlaceholderText>
43-
<PlaceholderLink onClick={() => history.push('/login')}>
44-
Go to sign in page
45-
</PlaceholderLink>
4637
</PlaceholderContainer>
4738
)}
4839
</Container>

0 commit comments

Comments
 (0)