Skip to content

Commit 09b134a

Browse files
SamGu-NRXSamGu-NRX
committed
Sync with directus
1 parent 0307a55 commit 09b134a

File tree

4 files changed

+54
-104
lines changed

4 files changed

+54
-104
lines changed

‎frontend/.env

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
VITE_API_URL='https://manage.redevs.com'
2-
VITE_DISCORD_REDIRECT_URI=https://samgu-nrx.github.io/LuminAI/auth/discord/callback
1+
VITE_DISCORD_REDIRECT_URI=https://samgu-nrx.github.io/LuminAI/auth/discord/callback
2+
3+
VITE_DIRECTUS_URL=https://manage.redevs.org/

‎frontend/src/lib/directus.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createDirectus, rest } from '@directus/sdk';
2+
3+
export const directus = createDirectus(import.meta.env.VITE_DIRECTUS_URL).with(rest({
4+
onRequest: (options) => ({ ...options, cache: 'no-store' }),
5+
}));

‎frontend/src/routes/Staff.tsx

+45-102
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { useState, useEffect } from "react";
22
import { createFileRoute } from "@tanstack/react-router";
33
import { Helmet } from "react-helmet-async";
4-
import { getItems } from "@/services/directus";
5-
6-
import { createDirectus, rest, readItems } from "@directus/sdk";
4+
import { directus } from '@/lib/directus';
5+
import { readItems } from '@directus/sdk';
76

87
import AOS from "aos";
98
import "aos/dist/aos.css";
@@ -18,92 +17,36 @@ export const Route = createFileRoute("/Staff")({
1817
});
1918

2019
function Staff() {
21-
// TODO: Change to items & setItems to "teamMembers" to use as CMS database
22-
const [items, setItems] = useState([]);
20+
const [members, setMembers] = useState([] as Record<string, any>[]);
21+
const [loading, setLoading] = useState(true);
2322

2423
useEffect(() => {
25-
const fetchStaffMembers = async () => {
26-
const data = await getItems("luminai_team_members");
27-
setItems(data.data);
28-
29-
console.log(data.data);
24+
const fetchMembers = async () => {
25+
try {
26+
const res = await directus.request(
27+
readItems('luminai_team_members', {
28+
fields: ['Name', 'Role', 'Achievement', 'Introduction', 'Photo', 'id'],
29+
})
30+
);
31+
const sortedMembers = res.sort((p1: any, p2: any) =>
32+
p1.id < p2.id ? -1 : p1.id > p2.id ? 1 : 0
33+
);
34+
setMembers(sortedMembers);
35+
setLoading(false);
36+
} catch (err) {
37+
console.error('Error fetching team members:', err);
38+
setLoading(false);
39+
}
3040
};
3141

32-
fetchStaffMembers();
33-
}, []);
42+
fetchMembers();
3443

35-
// temporary placeholder data
36-
const teamMembers: Array<{
37-
name: string;
38-
role: string;
39-
achievement: string;
40-
description: string;
41-
photo?: string;
42-
}> = [
43-
{
44-
name: "John Doe",
45-
role: "President",
46-
achievement: "Developed a state-of-the-art NLP model.",
47-
description:
48-
"John is a visionary leader with a deep understanding of natural language processing. His innovative work has set new standards in the field, making significant advancements in AI technology.",
49-
},
50-
{
51-
name: "Jane Smith",
52-
role: "Director of Coursework",
53-
achievement: "Specialized in machine learning algorithms.",
54-
description:
55-
"Jane is an expert in machine learning with a passion for teaching. Her specialized coursework has empowered countless students to excel in AI, breaking down complex algorithms into easily understandable concepts.",
56-
},
57-
{
58-
name: "Emily Chen",
59-
role: "Director of Logistics",
60-
achievement:
61-
"Organized a statewide coding competition that attracted over 500 participants.",
62-
description:
63-
"Emily is known for her exceptional organizational skills and ability to handle complex logistics with ease. She ensures everything runs smoothly, from event planning to daily operations.",
64-
},
65-
{
66-
name: "Michael Thompson",
67-
role: "Director of Management",
68-
achievement:
69-
"Managed a team of 20 volunteers for a community tech education program.",
70-
description:
71-
"Michael's leadership and management skills have been instrumental in the success of several community projects. His strategic vision and ability to inspire his team have made a significant impact.",
72-
},
73-
{
74-
name: "Sophia Martinez",
75-
role: "Director of Mentorship",
76-
achievement:
77-
"Created a peer mentoring program that improved academic performance and morale among students.",
78-
description:
79-
"Sophia is passionate about helping others succeed. Her mentorship program has been a game-changer for many students, providing guidance and support that has led to improved academic performance and increased morale.",
80-
},
81-
{
82-
name: "Alex Johnson",
83-
role: "Lead Developer",
84-
achievement:
85-
"Designed and developed full-stack applications for the AI BootCamp.",
86-
description:
87-
"Alex is a talented full-stack developer responsible for designing and implementing the programs used in the courses, as well as developing and maintaining the bootcamp's website. His work ensures a seamless user experience and robust technical infrastructure.",
88-
},
89-
{
90-
name: "Laura Nguyen",
91-
role: "Instructor",
92-
achievement:
93-
"Designed an interactive AI curriculum for high school students.",
94-
description:
95-
"Laura is a dedicated educator with a creative approach to teaching AI. Her interactive curriculum engages students and makes learning complex topics enjoyable and accessible.",
96-
},
97-
{
98-
name: "Daniel Kim",
99-
role: "Instructor",
100-
achievement:
101-
"Published research on neural networks and their applications.",
102-
description:
103-
"Daniel is a respected researcher and instructor with a deep knowledge of neural networks. His publications have contributed valuable insights to the AI community, and he brings this expertise to his teaching.",
104-
},
105-
];
44+
}, []);
10645

46+
if (loading) {
47+
return <div>Loading...</div>;
48+
}
49+
10750
return (
10851
<div
10952
data-scroll-section
@@ -118,44 +61,44 @@ function Staff() {
11861
<p>Information about our experienced instructors and staff members.</p>
11962

12063
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
121-
{teamMembers.map((member, index) => (
122-
<div style={{ animation: "textPopIn 0.7s ease-in-out" }}>
123-
<div
124-
key={index}
125-
className="bg-white dark:bg-zinc-900 bg-opacity-80 p-6 rounded-lg text-center relative group"
126-
data-aos="fade-up"
64+
{members.map((member: any) => (
65+
<div key={member.id} style={{ animation: "textPopIn 0.7s ease-in-out" }}>
66+
<BackgroundGradient
67+
className="bg-white dark:bg-zinc-900 bg-opacity-100 p-6 rounded-[22px] text-center relative group"
68+
// data-aos="fade-up"
12769
>
128-
<div className="w-24 h-24 mx-auto mb-4 relative">
129-
{member.photo ? (
130-
<BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900">
70+
<div className="w-24 h-30 mx-auto mb-4 flex items-center justify-center relative">
71+
{member.Photo ? (
72+
<div className="text-center rounded-[22px] bg-transparent dark:bg-zinc-900 flex items-center justify-center">
13173
<img
132-
src={member.photo}
133-
alt={member.name}
134-
className="w-full h-full rounded-full object-cover"
74+
src={`https://manage.redevs.org/assets/${member.Photo}.png`}
75+
alt={member.Name}
76+
className="rounded-full object-cover"
13577
/>
136-
</BackgroundGradient>
78+
</div>
13779
) : (
13880
<MovingGradient />
13981
)}
14082
</div>
14183

142-
<h2 className="text-2xl font-bold ">{member.name}</h2>
143-
<div className="transform absolute inset-0 duration-300 transition hover:scale-105 rounded-md bg-white dark:bg-zinc-900 bg-opacity-90 p-6 flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 ">
84+
85+
<h2 className="text-2xl font-bold ">{member.Name}</h2>
86+
<div className="transform absolute inset-0 duration-300 transition hover:scale-105 rounded-[22px] bg-white dark:bg-zinc-900 bg-opacity-90 p-6 flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 ">
14487
<p
14588
className="text-xl font-sans"
14689
style={{ fontWeight: "500" }}
14790
>
148-
{member.role}
91+
{member.Role}
14992
</p>
150-
<p className="text-sm italic mt-1">{member.achievement}</p>
93+
<p className="text-sm italic mt-1">{member.Achievement}</p>
15194
<p
15295
className="text-gray-600 text-sm"
15396
style={{ marginTop: "3px" }}
15497
>
155-
{member.description}
98+
{member.Introduction}
15699
</p>
157100
</div>
158-
</div>
101+
</BackgroundGradient>
159102
</div>
160103
))}
161104
</div>

‎project.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"projectId":"prj_kz1cnmgFtYVBdOVHr3XH6ebneQXq","orgId":"team_YhZlnVu7CecZRme3kxlR3H8B"}

0 commit comments

Comments
 (0)