From 362447689bf9e87ebe3575106d01f0932bc0a7a2 Mon Sep 17 00:00:00 2001 From: Michael Fatemi Date: Wed, 7 Jul 2021 23:52:03 -0400 Subject: [PATCH] clean up some of the code --- src/components/App.tsx | 73 ++++++++++++------- .../Authentication/Authenticator.tsx | 59 ++++++++------- src/components/Notifications.tsx | 9 ++- src/components/WheelShare.tsx | 15 +--- src/components/WheelShareLoggedOut.tsx | 36 ++++----- 5 files changed, 106 insertions(+), 86 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index e926e39..4345575 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,11 +1,11 @@ -import { lazy, Suspense, useContext, useState, useEffect } from 'react'; +import { CSSProperties, lazy, Suspense, useEffect, useState } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; -import AuthenticationContext from './Authentication/AuthenticationContext'; +import { getReceivedInvitationsAndRequests } from './api'; +import { useMe } from './hooks'; +import Notifications from './Notifications'; +import { IInvitation } from './types'; import WheelShare from './WheelShare'; import WheelShareLoggedOut from './WheelShareLoggedOut'; -import Notifications from './Notifications'; -import { getReceivedInvitationsAndRequests } from './api'; -import { IInvitation } from './types'; const Authenticator = lazy(() => import('./Authentication/Authenticator')); const Group = lazy(() => import('./Group')); @@ -37,33 +37,54 @@ const dummyNotificationData: IInvitation[] = [ }, ]; -export default function App() { - const { user } = useContext(AuthenticationContext); - // eslint-disable-next-line +const style: CSSProperties = { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: '30rem', + maxWidth: '30rem', + marginLeft: 'auto', + marginRight: 'auto', +}; + +function useNotifications() { const [notifications, setNotifications] = useState(dummyNotificationData); + useEffect(() => { getReceivedInvitationsAndRequests().then(setNotifications); }, []); + + return notifications; +} + +export default function App() { + const user = useMe(); + const notifications = useNotifications(); return (
- {notifications.length > 0 ? ( - - ) : ( - No notifications - )} - - - - - - - - - +
+ {notifications.length > 0 ? ( + + ) : ( + No notifications + )} + + + + + + + + + +
); } diff --git a/src/components/Authentication/Authenticator.tsx b/src/components/Authentication/Authenticator.tsx index f5a1cfa..ba95556 100644 --- a/src/components/Authentication/Authenticator.tsx +++ b/src/components/Authentication/Authenticator.tsx @@ -19,22 +19,13 @@ function inferRedirectUrl() { return redirectUrl; } -export default function Authenticator() { - const { provider } = useParams<{ provider: string }>(); - const [code, error] = useCodeAndError(); - const { refresh } = useContext(AuthenticationContext); - - const [pending, setPending] = useState(true); +function useToken( + code: string | null, + provider: string +): [string | null, boolean] { + const [pending, setPending] = useState(false); const [token, setToken] = useState(null); - useEffect(() => { - if (token) { - localStorage.setItem('session_token', token); - } else { - localStorage.removeItem('session_token'); - } - }, [token]); - useEffect(() => { if (code) { setPending(true); @@ -46,10 +37,34 @@ export default function Authenticator() { } }, [code, provider]); + return [token, pending]; +} + +function useLocalStorageSync(key: string, value: string | null) { + useEffect(() => { + if (value) { + localStorage.setItem(key, value); + } else { + localStorage.removeItem(key); + } + }, [key, value]); +} + +function useRefresh(refresh: Function, watch: string | null) { useEffect(() => { - // Refresh when the token changes refresh(); - }, [token, refresh]); + }, [watch, refresh]); +} + +export default function Authenticator() { + const { provider } = useParams<{ provider: string }>(); + const [code, error] = useCodeAndError(); + const { refresh } = useContext(AuthenticationContext); + + const [token, pending] = useToken(code, provider); + + useLocalStorageSync('session_token', token); + useRefresh(refresh, token); let children: JSX.Element; @@ -86,15 +101,5 @@ export default function Authenticator() { ); } - return ( -
- {children} -
- ); + return children; } diff --git a/src/components/Notifications.tsx b/src/components/Notifications.tsx index 09d3ac1..5338312 100644 --- a/src/components/Notifications.tsx +++ b/src/components/Notifications.tsx @@ -10,9 +10,12 @@ export default function Notifications({

Notifications

- {notifications.map((notification) => { - return ; - })} + {notifications.map((notification) => ( + + ))}
); diff --git a/src/components/WheelShare.tsx b/src/components/WheelShare.tsx index 80bd3f8..fe8a1b2 100644 --- a/src/components/WheelShare.tsx +++ b/src/components/WheelShare.tsx @@ -1,4 +1,3 @@ -import { CSSProperties } from 'react'; import logout from './Authentication/logout'; import Carpool from './Carpool'; import Events from './Events'; @@ -7,21 +6,11 @@ import { useMe } from './hooks'; import UIPressable from './UIPressable'; import UIPrimaryTitle from './UIPrimaryTitle'; -const style: CSSProperties = { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: '30rem', - maxWidth: '30rem', - marginLeft: 'auto', - marginRight: 'auto', -}; - export default function WheelShare() { const user = useMe()!; return ( -
+ <> WheelShare -
+ ); } diff --git a/src/components/WheelShareLoggedOut.tsx b/src/components/WheelShareLoggedOut.tsx index b910e15..b1655d4 100644 --- a/src/components/WheelShareLoggedOut.tsx +++ b/src/components/WheelShareLoggedOut.tsx @@ -1,28 +1,30 @@ -import { CSSProperties } from 'react'; import UILink from './UILink'; import UIPrimaryTitle from './UIPrimaryTitle'; -const dev = true; -const ION_AUTHORIZATION_ENDPOINT = dev - ? 'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR&scope=read&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fion%2Fcallback' - : 'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR&scope=read&redirect_uri=https%3A%2F%2Fwheelshare.space%2Fauth%2Fion%2Fcallback'; +function createAuthorizationEndpoint(redirectUrl: string) { + const url = new URL('https://ion.tjhsst.edu/oauth/authorize'); -const style: CSSProperties = { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: '30rem', - maxWidth: '30rem', - marginLeft: 'auto', - marginRight: 'auto', -}; + url.searchParams.set('response_type', 'code'); + url.searchParams.set('client_id', 'rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR'); + url.searchParams.set('redirect_uri', redirectUrl); + url.searchParams.set('scope', 'read'); + + return url.toString(); +} + +const dev = true; +const endpoint = createAuthorizationEndpoint( + dev + ? 'http://localhost:3000/auth/ion/callback' + : 'https://wheelshare.space/auth/ion/callback' +); export default function WheelShareLoggedOut() { return ( -
+ <> WheelShare

To get started, log in with your Ion account.

- Log in -
+ Log in + ); }