Feat/8 Logout (#39)

* move global into src, instead of app folder

* add some components

* configure uikit, emotion and typings

* uikit happy

* Basic Env Vars

* Populating Basic Configs

* cleanup

* add theme provider

* emotion imports

* emotion uikit style tpying

* First Working Test

* Working Redirect w/ URL Join

* remove DataCallout uikit re-export wrapper

* Basic Reusable Component

* Remove .env

* Update .gitignore

* Remove Duplicate

* Stage for UI Kit

* Loading Test w/ UI Kit

* NavBar Setup

* Fix Landing Page

* Remove Next logo

* Skeleton Cookies

* Basic Logout

* AuthContext Setup

* AuthContext Simplest State

* Generic Vars

* Major Update w/ Logout + UI Kit

* Testing Context + State

* Add Copyrights

* Update TypeScript, Imports, File Structure

* Login Button Component

* Use AuthContextValue

* Use GoogleLogin

* Use URL Join

* Local .env updates

* Remove Boilerplate

* Shuffle Files Around

* Refactor w/o Context

* Remove Logging

* Fix env settings

* Add React Query + Mock Login State

* Add Copyright

* Current Working State

* Fix User Badge

* Temporary Login Solution

* Clean Up State Changes

* Remove Redirect

* Cleaned Up User Badge

* Basic Pathname Solution

* Cleaned Up Login Flow

* Improved Layout + Header Handling

* Remove vscode from gitignore

* Fix /public import

* Update page names

* Refactor Auth / Layout

* General Clean Up

* Stub Middleware

* Tidying

* Middleware + Auth Route Setup - Infinite Loop

* Current State - Testing

* Children prop cleanup

* Header UI Updates

* Current Working State

* Clean Up Use of Stored Token

* Remove extra storedToken

* First Lint Changes

* Hook + Middleware Cleanup

* Better fallback, LoggingIn dependency

* Move Middleware to Feature Branch

* Unnecesary changes

* Remove Server side token management

* First Setup

* Log Out Update

* Updated Var name + Conditional

* Improve Loading Var Names + Reusable Logout

* Use Context logOut

* Remove Dummy Logout Button

* 1st Header PR Feedback

* Remove Unused Imports

* Fix Build Issues

* ProfileMenu Component

* Reusable Login

---------

Co-authored-by: Ciaran Schutte <[email protected]>
Feat/#14 programs list page (#47)

* add submission layout

* add some components

* add All Programs layout

* skeleton

* cleanup + add linking for programs

* remove sidemenu logic for PR

* remove program list and search func for PR

* fix type error

* mmove types around

* fix build

* clean import

---------

Co-authored-by: Ciaran Schutte <[email protected]>
add All Programs layout

skeleton

cleanup + add linking for programs

remove sidemenu logic for PR

remove program list and search func for PR

use route groups

content additions to sidemenu

poor mans sidebar toggle

Revert "Merge branch 'develop' into sidemenu-layout-restructure"

This reverts commit 640bb4b.

clean up

add sidemenu toggle

fix build

lots of styling

add page count

add table comps, fix font

fix percent cell

table updates

sidemenu

styling

styling

cleanup

cleanup

src/app/(post-login)/submission/components/ProgramMenu.tsx

@@ -22,7 +22,7 @@ import { css } from '@/lib/emotion';
 import { MenuItem } from '@icgc-argo/uikit';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { MouseEventHandler, useState } from 'react';
+import { useState } from 'react';
 
 export default function ProgramMenu({
 	programs,
@@ -34,14 +34,9 @@ export default function ProgramMenu({
 	const pathname = usePathname();
 	const [activeProgramIndex, setActiveProgramIndex] = useState(-1);
 
-	const filteredPrograms = !searchQuery.length
-		? programs
-		: programs.filter(({ shortName }) => shortName.search(new RegExp(searchQuery, 'i')) > -1);
-
-	const setActiveProgram =
-		(index: number): MouseEventHandler =>
-		() =>
-			setActiveProgramIndex(index);
+	const filteredPrograms = programs.filter(
+		({ shortName }) => !searchQuery.length || shortName.search(new RegExp(searchQuery, 'i')) > -1,
+	);
 
 	return (
 		<>
@@ -54,7 +49,7 @@ export default function ProgramMenu({
 				<MenuItem
 					level={2}
 					content="All Programs"
-					onClick={setActiveProgram(-1)}
+					onClick={() => setActiveProgramIndex(-1)}
 					selected={pathname === '/submission'}
 				/>
 			</Link>
@@ -64,7 +59,7 @@ export default function ProgramMenu({
 					level={2}
 					key={program.shortName}
 					content={program.shortName}
-					onClick={setActiveProgram(programIndex)}
+					onClick={() => setActiveProgramIndex(programIndex)}
 					selected={programIndex === activeProgramIndex}
 				>
 					<MenuItem level={3}>{program.shortName}</MenuItem>

src/app/(post-login)/submission/components/Search.tsx

@@ -35,8 +35,8 @@ export default function Search({
 			content={
 				<Input
 					aria-label="programs search"
-					onChange={(event) => {
-						onChange(event.target.value);
+					onChange={(e) => {
+						onChange(e.target.value);
 					}}
 					value={query}
 					css={css`

src/app/(post-login)/submission/components/SideMenu/Menu.tsx → src/app/(post-login)/submission/components/Sidemenu.tsx

@@ -19,10 +19,76 @@
 'use client';
 
 import { css, useTheme } from '@/lib/emotion';
-import SideMenuContent from './Content';
-import SideMenuToggle, { TOGGLE_HEIGHT_PX } from './Toggle';
-import { SideMenuProps } from './types';
+import { Interpolation, Theme } from '@emotion/react';
+import { Icon, MenuItem, SubMenu, UikitIconNames } from '@icgc-argo/uikit';
+import { useState } from 'react';
+import ProgramMenu from './ProgramMenu';
+import Search from './Search';
 
+const SideMenuContent = ({ content }: { content: any[] }) => {
+	const [programNameSearch, setProgramNameSearch] = useState('');
+
+	return (
+		<SubMenu>
+			<MenuItem icon={<Icon name="programs" />} content={'My Programs'} selected>
+				<Search query={programNameSearch} onChange={setProgramNameSearch} />
+				<ProgramMenu programs={content.slice(0, -1)} searchQuery={programNameSearch} />
+			</MenuItem>
+		</SubMenu>
+	);
+};
+
+const ToggleChevron = ({ css, name }: { css?: Interpolation<Theme>; name: UikitIconNames }) => (
+	<Icon height="10px" fill="primary_2" css={css} name={name} />
+);
+
+const SideMenuToggle = ({ onToggle, open }: { onToggle: () => void; open: boolean }) => (
+	<div
+		css={css`
+			height: 56px;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			padding-right: ${open ? '22px' : '12px'};
+
+			&:hover {
+				cursor: pointer;
+			}
+		`}
+		onClick={onToggle}
+	>
+		<div
+			css={css`
+				display: ${open ? 'block' : 'none'};
+			`}
+		>
+			<ToggleChevron name="chevron_left" />
+			<ToggleChevron
+				name="chevron_left"
+				css={css`
+					position: relative;
+					left: -3px;
+				`}
+			/>
+		</div>
+		<div
+			css={css`
+				display: ${!open ? 'block' : 'none'};
+			`}
+		>
+			<ToggleChevron name="chevron_right" />
+			<ToggleChevron
+				name="chevron_right"
+				css={css`
+					position: relative;
+					left: -3px;
+				`}
+			/>
+		</div>
+	</div>
+);
+
+type SideMenuProps = { content: any; onToggle: () => void; isActive: boolean };
 const SideMenu = ({ content, onToggle, isActive }: SideMenuProps) => {
 	const theme = useTheme();
 
@@ -38,7 +104,7 @@ const SideMenu = ({ content, onToggle, isActive }: SideMenuProps) => {
 		>
 			<div
 				css={css`
-					height: calc(100vh - ${TOGGLE_HEIGHT_PX}px);
+					height: calc(100vh - 52px);
 					overflow-y: auto;
 					visibility: ${isActive ? 'visible' : 'hidden'};
 				`}

src/app/(post-login)/submission/layout.tsx

@@ -18,16 +18,15 @@
  */
 'use client';
 
-import { HEADER_HEIGHT_PX } from '@/app/components/Header';
 import { css, useTheme } from '@/lib/emotion';
-import mockData from '@/mockData.json';
 import { ReactNode, useState } from 'react';
-import SideMenu from './components/SideMenu/Menu';
+import SideMenu from './components/SideMenu';
 import TitleBar from './components/TitleBar';
+import TEMP_DATA from './data.temp';
 
 export default function AppLayout({ children }: { children: ReactNode }) {
 	const theme = useTheme();
-	const programData = mockData.programs;
+	const programData = TEMP_DATA;
 	const [isSidebarActive, setSidebarActive] = useState<boolean>(true);
 
 	return (
@@ -41,13 +40,13 @@ export default function AppLayout({ children }: { children: ReactNode }) {
 		>
 			<div
 				css={css`
-					height: calc(100vh - ${HEADER_HEIGHT_PX}px);
+					height: calc(100vh - 58px);
 					z-index: 1;
 					box-shadow: ${theme.shadows.pageElement};
 				`}
 			>
 				<SideMenu
-					content={programData}
+					content={programData.programs}
 					isActive={isSidebarActive}
 					onToggle={() => setSidebarActive((active) => !active)}
 				/>

src/app/(post-login)/submission/page.tsx

@@ -19,9 +19,9 @@
 
 'use client';
 
-import mockData from '@/mockData.json';
 import ProgramList from './components/ProgramList';
+import programs from './data.temp';
 
 export default function Submission() {
-	return <ProgramList programs={mockData.programs} />;
+	return <ProgramList programs={programs} />;
 }

src/app/(post-login)/submission/program-table/DonorStatus.tsx

@@ -48,7 +48,7 @@ const DonorStatus = ({ submittedDonors, commitmentDonors }: DonorStatusProps) =>
 						color: ${theme.colors.grey_2};
 					`}
 				>
-					{` / `}
+					{` `}/{` `}
 				</span>
 				{denominator.toLocaleString()}
 			</Typography>

src/app/(post-login)/submission/program-table/Header.tsx

@@ -24,7 +24,7 @@ import { ReactNode } from 'react';
 const TableHeader = ({ children }: { children: ReactNode }) => (
 	<div
 		css={css`
-			font-size: 1.1rem;
+			font-size: 11px;
 			font-weight: 600;
 			padding: 0;
 			&:not(:last-of-type) {

src/app/(post-login)/submission/program-table/config.tsx

@@ -33,7 +33,7 @@ const MembershipDisplayName: { [key in ArgoMembershipKey]: string } = {
 	ASSOCIATE: 'ASSOCIATE',
 };
 
-export const columns: ColumnDef<ProgramData>[] = [
+export const columns: ColumnDef<ProgramsData>[] = [
 	{
 		header: () => <TableHeader>Short Name</TableHeader>,
 		accessorKey: 'shortName',

src/app/(pre-login)/landing-page/page.tsx

@@ -18,11 +18,10 @@
  */
 'use client';
 
-import { useAppConfigContext } from '@/app/components/ConfigProvider';
+import { useAppConfigContext } from '../../components/ConfigProvider';
 
 export default function LandingPage() {
-	const { EGO_CLIENT_ID } = useAppConfigContext();
-
+	const { EGO_CLIENT_ID } = getAppConfig();
 	return (
 		<main>
 			<div>
@@ -32,6 +31,11 @@ export default function LandingPage() {
 				</p>
 			</div>
 			<h1>Welcome! {EGO_CLIENT_ID}</h1>
+			<div>
+				<a href={`/`}>
+					<button onClick={logOut}>Logout</button>
+				</a>
+			</div>
 		</main>
 	);
 }

src/app/(pre-login)/logging-in/page.tsx

@@ -23,16 +23,18 @@ import { useAuthContext } from '@/global/utils/auth';
 import { DnaLoader, css, useTheme } from '@icgc-argo/uikit';
 import { useRouter } from 'next/navigation';
 import { useQuery } from 'react-query';
+import { useAppConfigContext } from '../../components/ConfigProvider';
 
 export default async function LoggingIn() {
 	const { EGO_LOGIN_URL } = useAppConfigContext();
 	const router = useRouter();
 	const theme = useTheme();
-	const { egoJwt, authLoading, setAuthLoading, logIn } = useAuthContext();
+	const { egoJwt, setEgoJwt, loggingIn, setLoggingIn } = useAuthContext();
+	const egoLoginUrl = urlJoin(EGO_API_ROOT, `/api/oauth/ego-token?client_id=${EGO_CLIENT_ID}`);
 
 	if (egoJwt) router.push('/landing-page');
 
-	if (!authLoading && !egoJwt) setAuthLoading(true);
+	if (!loggingIn && !egoJwt) setLoggingIn(true);
 
 	useQuery('egoJwt', () => {
 		fetch(EGO_LOGIN_URL, {
@@ -44,7 +46,9 @@ export default async function LoggingIn() {
 		})
 			.then(async (res) => {
 				const newToken = await res.text();
-				logIn(newToken);
+				storeToken(newToken);
+				setEgoJwt(newToken);
+				setLoggingIn(false);
 			})
 			.catch(console.error);
 	});