feat: do some auth typing

public-convenience-ltd · Jun 27, 2021 · 999b08f · 999b08f
1 parent 34912dc
commit 999b08f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/src/Auth.tsx b/src/Auth.tsx
@@ -4,7 +4,16 @@ import auth0 from 'auth0-js';
 const CLIENT_ID = 'sUts4RKy04JcyZ2IVFgMAC0rhPARCQYg';
 const permissionsKey = 'https://toiletmap.org.uk/permissions';
 
-export const AuthContext = React.createContext();
+export const AuthContext = React.createContext<{
+  isAuthenticated: () => boolean,
+  getAccessToken: () => string | null,
+  redirectOnNextLogin: (location: any) => any,
+  redirectOnLogin: () => void,
+  login: () => void,
+  logout: () => void,
+  checkPermission: (perm: string) => boolean,
+  handleAuthentication: () => void,
+}>(null);
 export const useAuth = () => React.useContext(AuthContext);
 
 export const isAuthenticated = () => {

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -7,26 +7,25 @@ import {
   flexbox,
   position,
   border,
+  ColorProps,
+  SpaceProps,
+  FlexboxProps,
+  PositionProps,
+  BorderProps,
+  LayoutProps,
 } from 'styled-system';
 import { createPropTypes } from '@styled-system/prop-types';
 
-// https://styled-system.com/guides/build-a-box
-const Box = styled.div(compose(space, color, layout, flexbox, position, border))
-
-// `
+interface IBoxProps extends ColorProps, SpaceProps, FlexboxProps, PositionProps, BorderProps, LayoutProps {
+  children: React.ReactNode;
+}
 
-//   // ensures the Box can shrink below its minimum content size when used as a flex item
-//   min-width: 0;
-// `;
+// https://styled-system.com/guides/build-a-box
+const Box = styled.div<IBoxProps>`${compose(space, color, layout, flexbox, position, border)}
+  // ensures the Box can shrink below its minimum content size when used as a flex item
+  min-width: 0;
+`
 
-Box.propTypes = {
-  ...createPropTypes(space.propNames),
-  ...createPropTypes(color.propNames),
-  ...createPropTypes(layout.propNames),
-  ...createPropTypes(flexbox.propNames),
-  ...createPropTypes(position.propNames),
-  ...createPropTypes(border.propNames),
-};
 
 /** @component */
 export default Box;
diff --git a/src/components/Header/MainMenu.tsx b/src/components/Header/MainMenu.tsx
@@ -1,14 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import NavLink from 'next/link';
+import Link, { LinkProps } from 'next/link';
 import {useRouter} from 'next/router';
 import styled from '@emotion/styled';
 import Box from '../Box';
 import Text from '../Text';
 import { Media } from '../Media';
 import { useAuth } from '../../Auth';
 
-const StyledNavLink = styled(NavLink)`
+const StyledNavLink = styled(Link)<LinkProps & {
+  onMouseEnter?: React.MouseEventHandler<Element> | undefined;
+  onClick: React.MouseEventHandler;
+  href?: string | undefined;
+  ref?: any;
+}>`
   // active class is added by NavLink component
   &.active {
     color: ${(props) => props.theme.colors.tertiary};
@@ -57,7 +62,7 @@ const MainMenu = ({
           width="100%"
         >
           <Box as="li" ml={[0, 4]}>
-            <StyledNavLink href="/" onClick={onMenuItemClick} exact>
+            <StyledNavLink  href="/" onClick={onMenuItemClick}>
               Find a Toilet
             </StyledNavLink>
           </Box>
@@ -75,17 +80,17 @@ const MainMenu = ({
           </Box>
 
           <Box as="li" mt={['auto', 0]} ml={[0, 'auto']}>
-            <StyledNavLink to="/about" onClick={onMenuItemClick}>
+            <StyledNavLink href="/about" onClick={onMenuItemClick}>
               About
             </StyledNavLink>
           </Box>
           <Box as="li" mt={[3, 0]} ml={[0, 4]}>
-            <StyledNavLink to="/use-our-loos" onClick={onMenuItemClick}>
+            <StyledNavLink href="/use-our-loos" onClick={onMenuItemClick}>
               Our Sponsor
             </StyledNavLink>
           </Box>
           <Box as="li" mt={[3, 0]} mb={['auto', 0]} ml={[0, 4]}>
-            <StyledNavLink to="/contact" onClick={onMenuItemClick}>
+            <StyledNavLink href="/contact" onClick={onMenuItemClick}>
               Contact
             </StyledNavLink>
           </Box>