Skip to content

Commit

Permalink
Some changes.
Browse files Browse the repository at this point in the history
  • Loading branch information
Highfire1 committed Nov 15, 2024
1 parent 7878ef1 commit 4e5e91b
Show file tree
Hide file tree
Showing 39 changed files with 246 additions and 1,575 deletions.
38 changes: 19 additions & 19 deletions frontend/src/Global.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@

"use client";
export class Vector2D
{
public X: number;
public Y: number;
// "use client";
// export class Vector2D
// {
// public X: number;
// public Y: number;

public constructor(x: number, y: number)
{
this.X = x;
this.Y = y;
}
}
// public constructor(x: number, y: number)
// {
// this.X = x;
// this.Y = y;
// }
// }

export class Global
{
public static WindowDimensions: Vector2D = new Vector2D(0, 0);
public static ThresholdDimensions: Vector2D = new Vector2D(850, 800);
// export class Global
// {
// public static WindowDimensions: Vector2D = new Vector2D(0, 0);
// public static ThresholdDimensions: Vector2D = new Vector2D(850, 800);

public static IsShrunkX: boolean = false;
public static IsShrunkY: boolean = false;
// public static IsShrunkX: boolean = false;
// public static IsShrunkY: boolean = false;


public static CurrentPageIndex: number = 0;
}
// public static CurrentPageIndex: number = 0;
// }
32 changes: 16 additions & 16 deletions frontend/src/app/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

import { UnknownAction } from "@reduxjs/toolkit";
import { useEffect } from "react";
import Decision from "./events/EventsOnHomePage/Decision";
import ClubSummary from "./shared_components/ClubSummary";
// import Decision from "./events/EventsOnHomePage/Decision";
// import ClubSummary from "./shared_components/ClubSummary";
import { useAppDispatch, useAppSelector } from "../redux/hooks/hooks";
import { AddExecProfile, ExecProfileObject, selectProfile } from "../redux/slices/execProfileSlice";
import { SetCurrentPage } from "../redux/slices/pageSlice";
import { AppDispatch } from "../redux/stores/store";
import { loadProfilesAsync } from "../redux/thunks/ProfileThunks";
// import { loadProfilesAsync } from "../redux/thunks/ProfileThunks";


let InstanceCount: number = 0;
Expand All @@ -17,22 +17,22 @@ interface HomePageProps {
}

export default function HomePage({ }: HomePageProps) {
const execProfiles = useAppSelector(selectProfile);
// const execProfiles = useAppSelector(selectProfile);
const mainDispatch = useAppDispatch();

mainDispatch(SetCurrentPage("/"));

useEffect(() => {
(async () => {
if (execProfiles.length < 1) {
const promise: UnknownAction = (mainDispatch(loadProfilesAsync() as AppDispatch));
// useEffect(() => {
// (async () => {
// if (execProfiles.length < 1) {
// const promise: UnknownAction = (mainDispatch(loadProfilesAsync() as AppDispatch));

((await promise) as unknown as ExecProfileObject[]).forEach((element: ExecProfileObject) => {
mainDispatch(AddExecProfile(element));
});
}
})();
});
// ((await promise) as unknown as ExecProfileObject[]).forEach((element: ExecProfileObject) => {
// mainDispatch(AddExecProfile(element));
// });
// }
// })();
// });

let css: string = "", flexContainer: string = "flex flex-row max-[600px]:justify-center max-[600px]:mx-0 ml-[10%]";
let size: number = 5;
Expand Down Expand Up @@ -72,9 +72,9 @@ export default function HomePage({ }: HomePageProps) {


</div>
<Decision />
{/* <Decision /> */}

<ClubSummary/>
{/* <ClubSummary/> */}
</>
);
}
Expand Down
70 changes: 38 additions & 32 deletions frontend/src/app/about/AboutPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { UnknownAction } from "@reduxjs/toolkit";
import { useEffect, useState } from "react";
import Conditional from "../shared_components/Conditional";
// import Conditional from "../shared_components/Conditional";
import ExecProfiles from "./ExecProfiles";
import { useAppDispatch, useAppSelector } from "../../redux/hooks/hooks";
import { AddExecProfile, ExecProfileObject, selectProfile } from "../../redux/slices/execProfileSlice";
import { SetCurrentPage } from "../../redux/slices/pageSlice";
// import { SetCurrentPage } from "../../redux/slices/pageSlice";
import { AppDispatch } from "../../redux/stores/store";
import { loadProfilesAsync } from "../../redux/thunks/ProfileThunks";

Expand All @@ -15,53 +15,59 @@ interface AboutPageProps

export default function AboutPage({} : AboutPageProps)
{
const execProfiles = useAppSelector(selectProfile);
// const execProfiles = useAppSelector(selectProfile);

const mainDispatch = useAppDispatch();
// const mainDispatch = useAppDispatch();

const [loading, setLoading] = useState(true);
// const [loading, setLoading] = useState(true);

mainDispatch(SetCurrentPage("/about"));
// mainDispatch(SetCurrentPage("/about"));

// fetch the profiles if not done already
useEffect(() => {
(async () => {
if (execProfiles.length < 1)
{
const promise: UnknownAction = mainDispatch(loadProfilesAsync() as AppDispatch);
// useEffect(() => {
// (async () => {
// if (execProfiles.length < 1)
// {
// const promise: UnknownAction = mainDispatch(loadProfilesAsync() as AppDispatch);

((await promise) as unknown as any[]).forEach((element) => {
mainDispatch(AddExecProfile({ ...element} as ExecProfileObject));
});
}
// ((await promise) as unknown as any[]).forEach((element) => {
// mainDispatch(AddExecProfile({ ...element} as ExecProfileObject));
// });
// }

setLoading(false);
})();
});
// setLoading(false);
// })();
// }, [execProfiles.length]);

return (
<div className={"flex flex-col gap-5 bg-body-gray grow"}>
<div className={"flex flex-col gap-3 ml-5 mr-5 mt-10"}>
<div className={"flex flex-col gap-5 bg-body-gray grow pl-5"}>

<div className={"flex flex-col gap-3 mt-10"}>
<div className={"text-[36px] font-semibold text-start"}>
About us
About us:
</div>
<div className={"text-lg max-[600px]:text-s font-light items-center"}>
{"The Langara Computer Science Club is a student-led club dedicated to providing a space for students interested in computer science. We provide a space to learn, create, network, and to have fun! We hold workshops, programming competitions, and other meetups."}
</div>
</div>
<div className={"flex flex-col m-5 items-center"}>
<div className={"text-[36px] font-semibold flex max-[500px]:items-end max-[600px]: mt-10"}>
Our Executives
<p>{"The Langara Computer Science Club is a student-led club dedicated to providing a space for students interested in computer science. We provide a space to learn, create, network, and to have fun! We hold workshops, programming competitions, and other meetups."}</p>
<br></br>
<p>
{"The Langara Computer Science club is run by a team of dedicated Langara students. We strive to create awesome opportunities and events and to represent the interests of the diverse student body."}
</p>
</div>
<div className={"text-lg max-[600px]:text-s font-light items-center text-center"}>
{"The Langara Computer Science club is run by a team of dedicated Langara students. We strive to create awesome opportunities and events and to represent the interests of the diverse student body."}
</div>

</div>
<div className={"profileContainer mb-3"}>

<br></br>


<div className={"flex flex-col profileContainer mb-3 items-center gap-5"}>
<h3 className="text-3xl font-semibold">Our Executives:</h3>

<div className={"flex flex-col max-[600px]:mx-0 gap-3 items-center"}>
<Conditional Condition={loading}>Loading</Conditional>
{/* TODO: don't assume API always works. */}
{/* <Conditional Condition={loading}>Loading</Conditional> */}
<ExecProfiles/>
</div>

</div>
</div>
);
Expand Down
132 changes: 50 additions & 82 deletions frontend/src/app/about/ExecProfiles.tsx
Original file line number Diff line number Diff line change
@@ -1,88 +1,56 @@
import { useEffect, useState } from "react";
import ExecProfile from "./ExecProfile";
import { useAppSelector } from '../../redux/hooks/hooks';
import { ExecProfileObject, selectProfile } from '../../redux/slices/execProfileSlice';
import { useEffect, useState } from 'react';
import ExecProfile from './ExecProfile';
import { useAppSelector, useAppDispatch } from '../../redux/hooks/hooks';
import { selectProfile } from '../../redux/slices/execProfileSlice';
import { loadProfilesAsync } from '../../redux/thunks/ProfileThunks';

export default function ExecProfiles() {
const profiles = useAppSelector(selectProfile);

const profilesSorted = profiles;

const [profileSections, setProfileSections] = useState<ExecProfileObject[][]>([]);

let initialValue: number = 3;

useEffect(() => {
if (window !== undefined) {
if (window.innerWidth <= 800)
initialValue = 2;
const dispatch = useAppDispatch();
const profiles = useAppSelector(selectProfile);
const [loading, setLoading] = useState(true);
const [hasFetched, setHasFetched] = useState(false); // Prevents multiple fetches

useEffect(() => {
const fetchProfiles = async () => {
if (!hasFetched) {
setHasFetched(true); // Set flag to true to prevent re-fetching
// console.log("Fetching profiles...");
const resultAction = await dispatch(loadProfilesAsync());

if (loadProfilesAsync.fulfilled.match(resultAction)) {
// console.log("Profiles fetched:", resultAction.payload);
} else {
// console.error("Failed to fetch profiles");
}
});

const [cols, setCols] = useState<number>(initialValue);

const updateSections = () => {
const sections = [];

for (let x = 0; x < profilesSorted.length / cols; x++)
sections.push(profilesSorted.slice(x * cols, x * cols + cols));

setProfileSections(sections);
setLoading(false);
}
};

useEffect(() => {
if (profileSections.length < 1)
updateSections();
});

useEffect(() => {
const handleResize = () => {
if (window !== undefined)
{
if (window.innerWidth <= 800)
{
setCols(2);
updateSections();
}
else
{
setCols(3);
updateSections();
}
}
};

if (window !== undefined)
{
window.addEventListener('load', handleResize);
window.addEventListener('resize', handleResize);
}

return () => {
if (window !== undefined)
window.removeEventListener('resize', handleResize);
};
}, []);
// max-[800px]:grid max-[800px]:content-center max-[800px]:grid-flow-col max-[800px]:auto-cols-min max-[800px]:justify-items-center
return (
<div className="flex flex-col gap-5">
{
profileSections.map(profiles => (
<div className={"flex flex-row gap-32 max-[800px]:gap-10 justify-around"} key={profileSections.indexOf(profiles)}>
{
profiles.map(profile => (
<ExecProfile
key={profile.ID}
Position={profile.Position}
ID={profile.ID}
Name={profile.Name}
ImageBuffer= {(profile.ImageBuffer != null) ? `https://api3.langaracs.ca/executives/image/${profile.ImageBuffer}` : "https://via.placeholder.com/200x200"}
Description={profile.Description} />
))
}
</div>
))
}
</div>
);
fetchProfiles();
}, [dispatch, hasFetched]);

if (loading) {
return <div>Loading...</div>;
}

// console.log("Profiles to display:", profiles);

return (
<div className="flex flex-wrap gap-20 justify-center">
{profiles.map((profile: { ID: string; Position: string[]; Name: string; ImageBuffer?: string; Description: string; }) => (
<ExecProfile
key={profile.ID}
Position={profile.Position}
ID={profile.ID}
Name={profile.Name}
ImageBuffer={
profile.ImageBuffer
? `https://api3.langaracs.ca/executives/image/${profile.ImageBuffer}`
: 'https://via.placeholder.com/200x200'
}
Description={profile.Description}
/>
))}
</div>
);
}
9 changes: 8 additions & 1 deletion frontend/src/app/about/ProfileModal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import * as Dialog from "@radix-ui/react-dialog";
import Image from "next/image";
import { useEffect, useState } from 'react';
import { DialogTitle } from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";

interface ProfileModalProps {
ID: String;
Expand Down Expand Up @@ -32,7 +34,11 @@ export default function ProfileModal ({Name, Position, ImageBuffer, Description,
}, []);

return (
<div className="content flex" style={{ flexDirection: isSmallScreen ? "column" : "row", padding: '20px', overflowY: 'auto', boxSizing: 'border-box', maxWidth: "60vw", maxHeight: "60vh"}}>
<Dialog.Content>
<VisuallyHidden>
<DialogTitle>{Name}</DialogTitle>
</VisuallyHidden>
<div className="content flex" style={{ flexDirection: isSmallScreen ? "column" : "row", padding: '20px', overflowY: 'auto', boxSizing: 'border-box', maxWidth: "60vw", maxHeight: "60vh"}}>
<div className="flex flex-col items-center gap-3">
<Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", minHeight: "20vb", minWidth: "20vb"}} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl object-cover`}/>
<div className='profile-info flex text-center' style={{flexDirection: "column"}}>
Expand All @@ -48,5 +54,6 @@ export default function ProfileModal ({Name, Position, ImageBuffer, Description,
</div>
<Dialog.Close className='close-modal' style={{ position: 'absolute', top: 10, right: 10, padding: '5px 7px', borderRadius: '4px' }}>Close</Dialog.Close>
</div>
</Dialog.Content>
);
};
6 changes: 1 addition & 5 deletions frontend/src/app/about/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,7 @@ export default function Page()
return (
<Provider store={store}>
<main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[20vh_1fr] overflow-hidden">
<NavBar Pages={new Map<string, string>([
["Home", "/"],
["About", "/about"],
["Events", "/events"],
])} />
<NavBar/>
<AboutPage></AboutPage>
<Footer />
</main>
Expand Down
3 changes: 0 additions & 3 deletions frontend/src/app/api/hello/route.ts

This file was deleted.

Loading

0 comments on commit 4e5e91b

Please sign in to comment.