From dfa14e3ba106c325e3b62a7372238e9a7d26f205 Mon Sep 17 00:00:00 2001 From: kynhix Date: Thu, 28 Mar 2024 15:22:42 -0400 Subject: [PATCH 01/79] Updated navbar Removed nonfunctional parts of navbar - Streak and challenge counters removed - Updated font and added color transition instead of font changing --- src/components/StandardNav.jsx | 357 ++++++++++++++++----------------- src/pages/dashboard.jsx | 71 +++---- 2 files changed, 210 insertions(+), 218 deletions(-) diff --git a/src/components/StandardNav.jsx b/src/components/StandardNav.jsx index f1ed8312..544eca7b 100644 --- a/src/components/StandardNav.jsx +++ b/src/components/StandardNav.jsx @@ -57,17 +57,13 @@ export function StandardNav(props) { } // if user signed out redirect - // if env is NEXT_PUBLIC_APP_AUTH_DOMAIN=ctfguide-dev.firebaseapp.com the logo should say CTFGuide Developer not CTFGuide Beta - - useEffect(() => { if (!localStorage.getItem('dismissStatus')) { setShowBanner(true); } - if ( process.env.NEXT_PUBLIC_APP_AUTH_DOMAIN === 'ctfguide-dev.firebaseapp.com' ) { @@ -89,32 +85,28 @@ export function StandardNav(props) { return; } - - if (localStorage.getItem("pfp")) { - setPfp(localStorage.getItem("pfp")); - } + if (localStorage.getItem("pfp")) { + setPfp(localStorage.getItem("pfp")); + } - - - - const fetchData = async () => { - try { - const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp'; - const result = await request(endPoint, "GET", null); - if (result) { - setPfp(result) - } else { - setPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`) - } - - } catch (err) { - console.log('failed to get profile picture') - } - }; - fetchData(); + const fetchData = async () => { + try { + const endPoint = process.env.NEXT_PUBLIC_API_URL + '/users/' + username + '/pfp'; + const result = await request(endPoint, "GET", null); + if (result) { + setPfp(result) + } else { + setPfp(`https://robohash.org/${username}.png?set=set1&size=150x150`) + } + + } catch (err) { + console.log('failed to get profile picture') + } + }; + fetchData(); }, [username]); - useEffect(() => { + useEffect(() => { const fetchNotification = async () => { const endPoint = process.env.NEXT_PUBLIC_API_URL + '/account/notifications'; const result = await request(endPoint, 'GET', null); @@ -149,7 +141,7 @@ export function StandardNav(props) { receivedTime: noti + ' ago', detailPage: '/events', image: - 'https://cutshort-data.s3.amazonaws.com/cloudfront/public/companies/5809d1d8af3059ed5b346ed1/logo-1615367026425-logo-v6.png', + 'https://cutshort-data.s3.amazonaws.com/cloudfront/public/companies/5809d1d8af3059ed5b346ed1/logo-1615367026425-logo-v6.png', }; }) ); @@ -158,7 +150,6 @@ export function StandardNav(props) { fetchNotification(); }, []); - function dismissStatus() { localStorage.setItem('dismissStatus', true); setShowBanner(false); @@ -169,14 +160,14 @@ export function StandardNav(props) { const url = `${process.env.NEXT_PUBLIC_API_URL}/notification`; const data = await request(url, 'GET', null); console.log(data); - if(data.success) { + if (data.success) { setNotifications(data.body); console.log(data); } else { setNotifications(["Unable to get notification, try again"]); } - } catch(err) { + } catch (err) { console.log(err); } } @@ -212,201 +203,201 @@ export function StandardNav(props) {
- {/* Current: "border-blue-500 text-white", Default: "border-transparent text-gray-300 hover:font-bold" */} + {/* Current: "border-blue-500 text-white", Default: "border-transparent text-gray-300 hover:text-white" */} Dashboard Learn Classes Practice Create - - Live - - - - EDU - + {/* */} + {/* Live */} + {/* */} + {/**/} + {/* */} + {/* EDU */} + {/* */} {isAdmin && (

CTFGUIDE INTERNAL

)}
- { !guestAllowed && + {!guestAllowed &&
-
-

- {points} -

-
-
-

- 0 -

-
-
- {/* Profile dropdown */} - -
- - Open user menu - - -
- - - - {({ active }) => ( - - Your Profile{' '} - - )} - - - {({ active }) => ( - - Settings{' '} - - )} - - - {({ active }) => ( - - Feedback{' '} - - )} - - - {({ active }) => ( - - Report{' '} - - )} - - - {({ active }) => ( - - Sign out{' '} - - )} - - - - + {/*
*/} + {/*

*/} + {/* {points} */} + {/*

*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* 0 */} + {/*

*/} + {/*
*/} +
+ {/* Profile dropdown */} + +
+ + Open user menu + + +
+ + + + {({ active }) => ( + + Your Profile{' '} + + )} + + + {({ active }) => ( + + Settings{' '} + + )} + + + {({ active }) => ( + + Feedback{' '} + + )} + + + {({ active }) => ( + + Report{' '} + + )} + + + {({ active }) => ( + + Sign out{' '} + + )} + + + + +
-
} - +
- {/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300 hover:font-bold" */} + {/* Current: "bg-blue-50 border-blue-500 text-blue-700", Default: "border-transparent text-gray-300 hover:text-white" */} console.log(like.challenge.id)); - } catch (error) {} + } catch (error) { } }; fetchData(); setLikes([]); @@ -81,46 +82,46 @@ export default function Dashboard() { - -
- - - - - - - - )} - - {/* BANNER POP-UP */} - {ownUser && ( - - handleBannerPopupClose()} - > - +
{ + handleBannerPopupClose(); + localStorage.setItem('22-18-update', false); + }} + className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" + /> + +
+ +
+
+

+ Change Banner +

+
+ {/* CURRENT BANNER */} +
+
+

+ Current Banner +

+
+ {/* INPUT BOX */} +
+ +
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + )} + + {/* BANNER */}
{ - handleBannerPopupClose(); - localStorage.setItem('22-18-update', false); - }} - className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" - /> - -
- -
-
-

- Change Banner -

-
- {/* CURRENT BANNER */} -
-
-

- Current Banner -

-
- {/* INPUT BOX */} -
-
-
- -
- - - )} - - {/* BANNER */} -
-
-
-
- {ownUser && ( - - )} -
-
-
- {/* NAME CARD */} -
-
-
- {/* Profile Picture */} -
- {(username && ( - handlePopupOpen()} - className="sm:h-30 sm:w-30 h-40 w-40 rounded-full hover:bg-[#212121]" - src={pfp} - alt="" - /> - )) || ( - - )} -
- -
-
-
- {/* TOP LINE */} -
-

- {username || ( - - )} -

- {/*

+

+ {/* NAME CARD */} +
+
+
+ {/* Profile Picture */} +
+ {(username && ( + handlePopupOpen()} + className="sm:h-30 sm:w-30 h-40 w-40 rounded-full hover:bg-[#212121]" + src={pfp} + alt="" + /> + )) || ( + + )} +
+ +
+
+
+ {/* TOP LINE */} +
+ {proUser ? ( +

+ {username + || + ( + + )} +

+ ) : ( +

+ {username + || + ( + + )} +

+ )} + + {proUser && + + } + {/*

#{rank}

*/} - {!ownUser && - (!followedUser ? ( - - ) : ( - - ))} -
- - {/* BOTTOM LINE */} -
- {location && ( -
-

- {' '} - {location} -

-
- )} - {/*
+ {!ownUser && (!followedUser ? ( + + ) : ( + + ))} + +
+ + {/* BOTTOM LINE */} +
+ {location && ( +
+

+ {' '} + {location} +

+
+ )} + {/*

{' '} 1.2k

*/} -
-

- {/* {' '} +

+

+ {/* {' '} ADMIN */} -

-
+

+
+
+
+
+
+
+
+ {/* Social Stats */} +
+
+

Followers:

+

+ {followerCount} +

+
+ +
+

Following:

+

+ {followingCount} +

+
+
+
+
+
-
-
-
-
- {/* Social Stats */} -
-
-

Followers:

-

- {followerCount} -

+ + {/* ACTUAL CONTENT AREA */} +
+
+ {/* LEFT SIDE CONTENT */} +
+
+
+

+ Streak Chart +

+
+ + {/* STREAK CHART */} +
+
+ {['', '', '', '', ''].map((e, idx) => { + idx = idx * 7; + return ( +
+ {['', '', '', '', '', '', ''].map((e, j) => ( +
+ ))} +
+ ); + })} +
+
+
+
+ + {/* MIDDLE */} +
+
+
+
+

+ Bio +

+
+ {ownUser ? ( + (!openBio && ownUser && ( +
+ +
+ )) || ( +
+ +
+ ) + ) : ( +
+ )} +
+
+
+ {(openBio && ownUser && ( +
+ +
+ )) || ( +
+ + {bio === null || bio === "" ? "No Bio Set..." : bio} + +
+ + )} +
+
+
+
+ + {/* RIGHT SIDE CONTENT */} +
+
+
+

+ Challenge Completion +

+
+ {completedChallenges && ( + + )} +
+
+
+
+
+ {/* BADGE */} +
+
+ {/* Badge Content */} +
+

+ Badges +

+
+ {badges && badges.length > 0 ? ( + badges.map((badge) => ( + + )) + ) : ( +
+ {ownUser && } + +

+ No Badges Yet... +

+
+ )} +
+
+
+
+ {/* Created Challenges */} +
+ {/* CHALLENGE */} +
+
+

+ Created Challenges +

+
+ {(createdChallenges && + createdChallenges.map((challenge) => ( + + ))) || ( +
+ {ownUser && } + + +

+ No Challenges Created Yet... +

+
+ )} +
+
+
-
-

Following:

-

- {followingCount} -

+ {/* Pinned Challenges */} +
+ {/* CHALLENGE */} +
+
+

+ Liked Challenges +

+
+ {(pinnedChallenges && + Array.isArray(pinnedChallenges) && + pinnedChallenges.map((challenge) => ( + + ))) || ( +
+ {ownUser && } + + +

+ No Challenges Liked Yet... +

+
+ )} +
+
+
-
-
-
-
-
-
- - {/* ACTUAL CONTENT AREA */} -
-
- {/* LEFT SIDE CONTENT */} -
-
-
-

- Streak Chart -

-
- {/* STREAK CHART */} -
-
- {['', '', '', '', ''].map((e, idx) => { - idx = idx * 7; - return ( -
- {['', '', '', '', '', '', ''].map((e, j) => ( -
- ))} +
+ {/* Join Date */} +
+ {/* Badge Content */} +
+ {createDate && ( +

+ CTFGuide Member since {createDate.slice(0, 10)} +

+ )} +
- ); - })} -
+
-
-
- - {/* MIDDLE */} -
-
-
-
-

- Bio -

-
- {ownUser ? ( - (!openBio && ownUser && ( -
+ +
+ {bioBanner && ( + -
-
- {(openBio && ownUser && ( -
- -
- )) || ( -
- - {bio === null || bio === '' ? 'No Bio Set...' : bio} - -
- )} -
-
-
-
- - {/* RIGHT SIDE CONTENT */} -
-
-
-

- Challenge Completion -

-
- {completedChallenges && ( - - )} -
-
-
-
-
- {/* BADGE */} -
-
- {/* Badge Content */} -
-

- Badges -

-
- {badges && badges.length > 0 ? ( - badges.map((badge) => ( - - )) - ) : ( -
- {ownUser && } - -

- No Badges Yet... -

- )}
-
-
-
- {/* Created Challenges */} -
- {/* CHALLENGE */} -
-
-

- Created Challenges -

-
- {(createdChallenges && - createdChallenges.map((challenge) => ( - - ))) || ( -
- {ownUser && } - - -

- No Challenges Created Yet... -

-
- )} -
-
-
-
- - {/* Pinned Challenges */} -
- {/* CHALLENGE */} -
-
-

- Liked Challenges -

-
- {(pinnedChallenges && - Array.isArray(pinnedChallenges) && - pinnedChallenges.map((challenge) => ( - - ))) || ( -
- {ownUser && } - - -

- No Challenges Liked Yet... -

-
- )} -
-
-
-
- -
- {/* Join Date */} -
- {/* Badge Content */} -
- {createDate && ( -

- CTFGuide Member since {createDate.slice(0, 10)} -

- )} -
-
-
-
- -