Skip to content

Commit 0592bef

Browse files
burtonjongburtonjong
authored
Merge branch 'main' into HMT-100-user-profile-ssr-optimizations
2 parents 3d9ab61 + 79d2246 commit 0592bef

File tree

12 files changed

+121
-105
lines changed

12 files changed

+121
-105
lines changed

‎.github/workflows/eslint.yml

+39-21
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,66 @@
1-
# This workflow uses actions that are not certified by GitHub.
2-
# They are provided by a third-party and are governed by
3-
# separate terms of service, privacy policy, and support
4-
# documentation.
5-
# ESLint is a tool for identifying and reporting on patterns
6-
# found in ECMAScript/JavaScript code.
7-
# More details at https://github.com/eslint/eslint
8-
# and https://eslint.org
9-
101
name: ESLint
112

123
on:
134
push:
145
branches: ["main"]
156
pull_request:
16-
# The branches below must be a subset of the branches above
177
branches: ["main"]
188
schedule:
199
- cron: "25 21 * * 4"
2010

2111
jobs:
2212
eslint:
23-
name: Run eslint scanning
13+
name: Run ESLint Scanning
2414
runs-on: ubuntu-latest
2515
permissions:
2616
contents: read
2717
security-events: write
28-
actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
18+
actions: read
2919
steps:
3020
- name: Checkout code
3121
uses: actions/checkout@v3
3222

33-
- name: Install ESLint
23+
- name: Detect package manager
24+
id: detect-package-manager
25+
run: |
26+
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
27+
echo "manager=yarn" >> $GITHUB_OUTPUT
28+
echo "install-command=install" >> $GITHUB_OUTPUT
29+
echo "runner=yarn" >> $GITHUB_OUTPUT
30+
exit 0
31+
elif [ -f "${{ github.workspace }}/package-lock.json" ]; then
32+
echo "manager=npm" >> $GITHUB_OUTPUT
33+
echo "install-command=ci" >> $GITHUB_OUTPUT
34+
echo "runner=npx" >> $GITHUB_OUTPUT
35+
exit 0
36+
else
37+
echo "Unable to determine package manager"
38+
exit 1
39+
fi
40+
41+
- name: Setup Node.js
42+
uses: actions/setup-node@v4
43+
with:
44+
node-version: "20"
45+
cache: ${{ steps.detect-package-manager.outputs.manager }}
46+
47+
- name: Install dependencies
48+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.install-command }}
49+
50+
- name: Install ESLint dependencies
3451
run: |
35-
npm install [email protected]
36-
npm install @microsoft/[email protected]
52+
${{ steps.detect-package-manager.outputs.manager }} add [email protected]
53+
${{ steps.detect-package-manager.outputs.manager }} add @microsoft/[email protected]
3754
3855
- name: Run ESLint
39-
run: npx eslint .
40-
--config .eslintrc.cjs
41-
--ext .js,.jsx,.ts,.tsx
42-
# --format @microsoft/eslint-formatter-sarif
43-
# --output-file eslint-results.sarif
44-
# continue-on-error: false
56+
run: |
57+
${{ steps.detect-package-manager.outputs.runner }} eslint . \
58+
--config .eslintrc.cjs \
59+
--ext .js,.jsx,.ts,.tsx
60+
# --format @microsoft/eslint-formatter-sarif
61+
# --output-file eslint-results.sarif
4562

63+
# Uncomment the following step to upload SARIF results
4664
# - name: Upload analysis results to GitHub
4765
# uses: github/codeql-action/upload-sarif@v2
4866
# with:

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
- The prod branch has a CI/CD deployment available at: [https://hackthechangeyyc.ca/](https://hackthechangeyyc.ca/)
22
- The main branch has a CI/CD deployment available at: [https://staging.hackthechangeyyc.ca/](https://staging.hackthechangeyyc.ca/)
33

4+
This project uses Yarn as its package manager. If you have been using NPM and not Yarn, you can install the CLI [here](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable) .
5+
46
## Getting Started
57

68
Ensure you run `npm i` in the root of the repo before continuing. Please respond 'y' to and prompts such as installing Husky, etc
@@ -51,6 +53,15 @@ https://docs.aws.amazon.com/prescriptive-guidance/latest/best-practices-cdk-type
5153
**Understanding AWS Amplify:**
5254
https://docs.amplify.aws/react/start/
5355

56+
**NextJS Documentation:**
57+
https://nextjs.org/
58+
59+
**Moving From JavaScript to TypeScript:**
60+
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
61+
62+
**Tailwind Documentation:**
63+
https://tailwindcss.com/docs/utility-first
64+
5465
> Note that we are using AWS Amplify gen 2 v1.0
5566
5667
**Common Troubleshooting**

‎src/app/admin/layout.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
22

33
import SideNavBar from "@/components/Dashboard/SideNavBar";
44
import TopNavBar from "@/components/Dashboard/TopNavBar";
5+
import { UserType } from "@/components/contexts/UserContext";
6+
import withAuthGuard from "@/components/hoc/withAuthGuard";
57

68
export const metadata: Metadata = {
79
title: "Hack the Change - Admin",
@@ -19,7 +21,9 @@ export const metadata: Metadata = {
1921
function AdminLayout({ children }: { children: React.ReactNode }) {
2022
return (
2123
<div className="flex w-full flex-1 ">
22-
<SideNavBar />
24+
<div className="w-20">
25+
<SideNavBar />
26+
</div>
2327
<div className="flex w-full flex-1 flex-col ">
2428
<TopNavBar />
2529
{children}
@@ -28,4 +32,4 @@ function AdminLayout({ children }: { children: React.ReactNode }) {
2832
);
2933
}
3034

31-
export default AdminLayout;
35+
export default withAuthGuard(AdminLayout, [UserType.Admin]);

‎src/app/contentfulExample/page.tsx renamed to ‎src/app/contentfulExample/sample.tsx

File renamed without changes.

‎src/app/judging/layout.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { UserType } from "@/components/contexts/UserContext";
2+
import withAuthGuard from "@/components/hoc/withAuthGuard";
3+
4+
function layout({ children }: { children: React.ReactNode }) {
5+
return children;
6+
}
7+
8+
export default withAuthGuard(layout, [UserType.Admin, UserType.Judge]);

‎src/app/participant/layout.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { UserType } from "@/components/contexts/UserContext";
2+
import withAuthGuard from "@/components/hoc/withAuthGuard";
3+
4+
function layout({ children }: { children: React.ReactNode }) {
5+
return children;
6+
}
7+
export default withAuthGuard(layout, [
8+
UserType.Participant,
9+
UserType.Admin,
10+
UserType.Judge,
11+
]);

‎src/app/participant/profile/food-ticket/page.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import UserFoodTicket from "@/components/UserProfile/FoodTicket";
22

33
export default function FoodTicket() {
4-
return (
5-
<>
6-
<UserFoodTicket />
7-
</>
8-
);
4+
return <UserFoodTicket />;
95
}

‎src/app/participant/profile/page.tsx

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import dynamic from "next/dynamic";
22

33
import { UserType } from "@/components/contexts/UserContext";
4-
import withAuthGuard from "@/components/hoc/withAuthGuard";
54

65
// Dynamically import UserProfile with preloading
76
const UserProfile = dynamic(
@@ -14,10 +13,4 @@ const UserProfile = dynamic(
1413

1514
function Profile() {
1615
return <UserProfile />;
17-
}
18-
19-
export default withAuthGuard(Profile, [
20-
UserType.Participant,
21-
UserType.Admin,
22-
UserType.Judge,
23-
]);
16+
}

‎src/app/participant/profile/team-details/page.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import TeamProfile from "@/components/UserProfile/TeamProfile";
2-
import { UserType } from "@/components/contexts/UserContext";
3-
import withAuthGuard from "@/components/hoc/withAuthGuard";
42

5-
function TeamDetails() {
3+
export default function TeamDetails() {
64
return <TeamProfile />;
75
}
8-
9-
export default withAuthGuard(TeamDetails, [
10-
UserType.Participant,
11-
UserType.Admin,
12-
UserType.Judge,
13-
]);

‎src/components/Dashboard/SideNavBar.tsx

+38-58
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
"use client";
2-
31
import Image from "next/image";
42
import Link from "next/link";
5-
import { useState } from "react";
3+
4+
import CTC_Icon from "@/CTCLogo.svg";
65

76
const arrow_icon = "/svgs/admin/simple_arrow.svg";
87
const dashboard_icon = "/svgs/admin/dashboard_icon.svg";
@@ -12,14 +11,6 @@ const ticket_icon = "/svgs/admin/ticket_icon.svg";
1211
const add_icon = "/svgs/admin/add_square.svg";
1312
const reset_icon = "/svgs/admin/reset_icon.svg";
1413

15-
const NAV_BAR_SECTION_STYLES =
16-
"flex flex-col items-center bg-awesomer-purple h-full text-white transition-width duration-300 md:w-80";
17-
const LOGO_BUTTON_STYLES =
18-
"mt-6 flex size-10 items-center justify-center md:size-14";
19-
const NAV_BAR_HEADER_STYLES = "my-2 text-center text-xl font-bold md:text-2xl";
20-
const NAV_LINK_CONTAINER_STYLES =
21-
"flex justify-between hover:bg-[#5E48D1] p-2 rounded-md mb-2";
22-
const NAV_LINK_ICON_STYLES = "mr-2 flex p-2 justify-center rounded-md bg-white";
2314
export interface DashboardLink {
2415
name: string;
2516
icon: string;
@@ -35,28 +26,26 @@ const NavLinkContainer = ({
3526
dashboardLink: DashboardLink;
3627
}) => {
3728
return (
38-
<Link href={dashboardLink.route} className={NAV_LINK_CONTAINER_STYLES}>
39-
<div className="flex">
40-
<div className={NAV_LINK_ICON_STYLES}>
29+
<Link
30+
href={dashboardLink.route}
31+
className={"mb-2 flex justify-between rounded-md p-2 hover:bg-[#5E48D1]"}
32+
>
33+
<div className="flex gap-2">
34+
<div className={"flex justify-center rounded-md bg-white p-2"}>
4135
<Image
4236
height={20}
4337
width={20}
4438
src={dashboardLink.icon}
4539
alt={`${dashboardLink.name} icon`}
4640
/>
4741
</div>
48-
<p>{dashboardLink.name}</p>
42+
<p className="flex items-center">{dashboardLink.name}</p>
4943
</div>
5044
<Image height={10} width={10} src={arrow_icon} alt="Arrow icon" />
5145
</Link>
5246
);
5347
};
54-
const SideNavBar = () => {
55-
const [isCollapsed, setIsCollapsed] = useState(true);
56-
57-
const toggleSidebar = () => {
58-
setIsCollapsed(!isCollapsed);
59-
};
48+
export default function SideNavBar() {
6049
const dashboardRoutes: DashboardRoutes[] = [
6150
{
6251
group: "ADMIN",
@@ -115,41 +104,32 @@ const SideNavBar = () => {
115104
];
116105

117106
return (
118-
<div className="relative text-sm md:text-lg">
119-
<div
120-
className={`${NAV_BAR_SECTION_STYLES} ${
121-
isCollapsed
122-
? "w-16 md:w-[80px]"
123-
: "fixed left-0 top-0 z-[1000] w-60 md:w-80"
124-
}`}
125-
>
126-
<button className={LOGO_BUTTON_STYLES} onClick={toggleSidebar}>
127-
<Image
128-
src="/CTCLogo.svg"
129-
alt="Code The Change Logo"
130-
width={50}
131-
height={50}
132-
/>
133-
</button>
134-
{!isCollapsed && (
135-
<nav className="w-full p-6">
136-
<h1 className={NAV_BAR_HEADER_STYLES}>HACK THE CHANGE</h1>
137-
<div className="mt-2">
138-
{dashboardRoutes.map((route) => (
139-
<div key={route.group}>
140-
<h2>{route.group}</h2>
141-
<hr className="my-2" />
142-
{route.routes.map((r, index) => (
143-
<NavLinkContainer key={index} dashboardLink={r} />
144-
))}
145-
</div>
146-
))}
147-
</div>
148-
</nav>
149-
)}
150-
</div>
151-
</div>
107+
<details
108+
className={`transition-width md:open:w-80" relative flex h-full w-20 cursor-pointer flex-col items-center gap-2 bg-awesomer-purple text-white duration-500 open:fixed open:top-0 open:w-60 md:w-[80px]`}
109+
>
110+
<summary className="sticky top-0 list-none pt-4">
111+
<Image
112+
src={CTC_Icon}
113+
alt="Code The Change Logo"
114+
className="transition-transform hover:scale-125"
115+
width={50}
116+
height={50}
117+
/>
118+
</summary>
119+
<h1 className="line-clamp-1 text-center text-xl font-bold md:text-2xl">
120+
HACK THE CHANGE
121+
</h1>
122+
<ul className="absolute inset-0 mt-28 w-full overflow-y-auto px-2">
123+
{dashboardRoutes.map((route) => (
124+
<li key={route.group}>
125+
<h2>{route.group}</h2>
126+
<hr />
127+
{route.routes.map((r, index) => (
128+
<NavLinkContainer key={index} dashboardLink={r} />
129+
))}
130+
</li>
131+
))}
132+
</ul>
133+
</details>
152134
);
153-
};
154-
155-
export default SideNavBar;
135+
}

‎src/components/Header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function Header() {
6666
)}
6767
</>
6868
) : user.type === UserType.Admin ? (
69-
<Link href="/admin/teams">Admin Dashboard</Link>
69+
<Link href="/admin">Admin Dashboard</Link>
7070
) : user.type === UserType.Judge ? (
7171
<Link href="/judging">Judge Dashboard</Link>
7272
) : null}
@@ -83,7 +83,7 @@ export default function Header() {
8383
alt="Awesome Logo"
8484
width={70}
8585
height={70}
86-
className="shadow-lg"
86+
className="shadow-lg transition-transform hover:scale-125"
8787
/>
8888
</Link>
8989
</div>

‎tailwind.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ const config: Config = {
5252
"::-webkit-scrollbar-track": {
5353
backgroundColor: "#D2D2D2",
5454
},
55+
"::-webkit-details-marker": {
56+
display: "none",
57+
},
5558
};
5659

5760
addUtilities(newUtilities, ["responsive", "hover"]);

0 commit comments

Comments
 (0)