feat: ✨ add url navigation for projects

PES-Innovation-Lab · Nov 18, 2024 · 43ffe0a · 43ffe0a
1 parent 1810e32
commit 43ffe0a
Show file tree

Hide file tree

Showing 14 changed files with 749 additions and 280 deletions.
diff --git a/app/events/page.tsx b/app/events/page.tsx
@@ -34,7 +34,11 @@ const useStyles = makeStyles((theme) => ({
 
 function Events() {
     const data = [
-        { month: 'February', event_name: 'Incito Ideathon', key: 'incito' },
+        {
+            month: 'Jan-Feb',
+            event_name: 'Hashcode',
+            key: 'hashcode',
+        },
         {
             month: 'March-April',
             event_name: 'Summer Internship Recruitment',
@@ -45,11 +49,10 @@ function Events() {
             event_name: 'Summer Internship',
             key: 'internship',
         },
-        { month: 'August', event_name: 'RoadShow', key: 'roadshow' },
-        {
-            month: 'October/November',
-            event_name: '#Code Hackathon',
-            key: 'hashcode',
+        { 
+            month: 'Sept-Oct', 
+            event_name: 'RoadShow', 
+            key: 'roadshow' 
         },
     ]
 
@@ -59,45 +62,13 @@ function Events() {
     })
 
     const timelineContent = {
-        incito: {
-            text: (
-                <div className="eventSection">
-                    <div className="eventSectionText">
-                        <Link className="eventPageLink" href={`/incito`}>
-                            <Typography className="eventHeading">
-                                Incito
-                            </Typography>
-                        </Link>
-                        <Typography className="eventText">
-                            Incito is the ideathon organized by PES Lab. It is a
-                            conglomerate of brilliant minds, all incubating
-                            innovative ideas. The shortlisted 10 best ideas
-                            battle it out in the final round to win cash prizes
-                            up to Rs. 40,000 in all. The participants test the
-                            design and feasibility of their ideas without the
-                            constraints of implementing the same, hence
-                            encouraging innovative thinking. The best ideas are
-                            also provided the platform and resources to
-                            implement their ideas and make these a reality.
-                        </Typography>
-                    </div>
-                </div>
-            ),
-            image: (
-                <div className="eventSectionImage">
-                    <img src={`/images/mlab/ideathon.png`} />
-                </div>
-            ),
-        },
         recruitment: {
             text: (
                 <div className="eventSection">
                     <div className="eventSectionText">
-                        <Link className="eventPageLink" href={`/join_us`}>
                             <Typography className="eventHeading">
                                 Summer Internship Recruitment
                             </Typography>
-                        </Link>
                         <Typography className="eventText">
                             Every year, we look for enthusiastic and
                             passion-driven people to become a part of our
@@ -120,11 +91,9 @@ function Events() {
             text: (
                 <div className="eventSection">
                     <div className="eventSectionText">
-                        <Link className="eventPageLink" href={`/summer`}>
                             <Typography className="eventHeading">
                                 Summer Internship Program
                             </Typography>
-                        </Link>
                         <Typography className="eventText">
                             We, at PES Innovation Lab, organise an annual summer
                             internship for new recruits to work on cutting-edge
@@ -151,11 +120,9 @@ function Events() {
             text: (
                 <div className="eventSection">
                     <div className="eventSectionText">
-                        <Link className="eventPageLink" href={`/roadshow`}>
                             <Typography className="eventHeading">
                                 Roadshow
                             </Typography>
-                        </Link>
                         <Typography className="eventText">
                             Roadshow is an Innovation Expo organized by the Lab
                             each year after the Summer Internship Program. PES
@@ -182,11 +149,9 @@ function Events() {
             text: (
                 <div className="eventSection">
                     <div className="eventSectionText">
-                        <Link className="eventPageLink" href={`/hashcode`}>
                             <Typography className="eventHeading">
                                 HashCode
                             </Typography>
-                        </Link>
                         <Typography className="eventText">
                             HashCode is the annual 24-hour hackathon organised
                             by the Lab, with students proposing interesting
@@ -196,9 +161,8 @@ function Events() {
                             academia assisting them. Esteemed personalities from
                             different industrial backgrounds come to judge the
                             show, evaluating projects from all possible angles.
-                            HashCode 2020 is the 9th edition of the annual
-                            hackathon. The winners bag cash prizes worth up to
-                            one lakh indian rupees.
+                            The 13th edition of the annual hackathon will happen in 2025. 
+                            The winners bag cash prizes worth up to one lakh indian rupees.
                         </Typography>
                     </div>
                 </div>

diff --git a/app/members/page.jsx b/app/members/page.jsx
@@ -2,14 +2,23 @@
 
 import { useEffect, useState } from 'react'
 import membersData from '../../public/data/members.json'
+import headsData from '../../public/data/heads.json'
 import MemberCard from '../../components/MemberCard'
 import LayoutAlt from '../../components/LayoutAlt'
 
+const shuffleArray = (array) => {
+  return array.map(value => ({ value, sort: Math.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ value }) => value)
+}
+
 function Members() {
 
   const [showYears, setShowYears] = useState(false)
   const years = [2024, 2023, 2022, 2020, 2019, 2018, 2017, 2016, 2015]
   const [currentYear, setCurrentYear] = useState(years.sort((a, b) => { b - a })[0])
+
+  const [mOrH, setMorH] = useState('Members')
   const yearElementsMd = years.map((year, ind) => {
     return (
       <button
@@ -21,12 +30,26 @@ function Members() {
       </button>
     )
   })
-  const [data, setData] = useState({ members: [] })
+
+  const membersOrHeadsMd = ['Members', 'Heads'].map((morh, ind) => {
+    return (
+      <button
+        key={ind}
+        onClick={() => setMorH(morh)}
+        className={`${morh == mOrH ? 'font-bold text-lab-green border-lab-green rounded-md border-2 p-2' : ''}`}
+      >
+        {morh}
+      </button>
+    )
+  })
+
+  const [data, setData] = useState({ members: [], heads: [] })
   const [isDataLoaded, setDataLoaded] = useState(false)
   useEffect(() => {
     const fetch = () => {
-      const output = membersData[currentYear.toString()].members
-      setData({ members: output })
+      const membersOutput = membersData[currentYear.toString()].members
+      const headsOutput = headsData[currentYear.toString()] ? headsData[currentYear.toString()].heads : []
+      setData({ members: membersOutput, heads: headsOutput })
       setDataLoaded(true)
     }
     fetch()
@@ -36,8 +59,8 @@ function Members() {
     <>
       <div className="mt-10 flex flex-col gap-10 px-12 pb-20 pt-20">
         <div className="flex md:flex-row flex-col items-center gap-8 justify-between">
-          <div className="font-martian-mono md:text-4xl text-3xl text-lab-green">
-            MEMBERS
+          <div className="md:gap-4 gap-2 font-martian-mono md:text-4xl text-3xl text-white flex flex-wrap md:flex-row justify-center">
+            {membersOrHeadsMd}
           </div>
           <div className="md:gap-4 gap-2 rounded-md border-2 border-lab-green p-2 text-lg text-gray-400 flex flex-wrap md:flex-row justify-center ">
             {yearElementsMd}
@@ -47,7 +70,7 @@ function Members() {
       <div className="bg-neutral-1000 flex min-h-screen items-center justify-center">
         <div className="flex flex-wrap justify-center">
           <div className="grid grid-cols-1 gap-9 md:grid-cols-3 lg:grid-cols-4 justify-center">
-            {isDataLoaded ? data.members.map((member, index) => (
+            {isDataLoaded ? shuffleArray(mOrH === 'Members' ? data.members : data.heads).map((member, index) => (
               <MemberCard
                 key={index}
                 name={member.name}

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,11 +1,13 @@
 'use client'
 import React, { useState, useRef } from 'react'
 import { motion } from 'framer-motion'
+import { Suspense } from 'react'
 
 import projectsData from '../../public/data/projects.json'
 import Cards from '../../components/Cards'
 import LayoutAlt from '../../components/LayoutAlt'
 import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
 
 type projectsType = {
     year: string
@@ -18,14 +20,18 @@ type projectsType = {
     poster_url: string
 }[]
 
-export default function NewProjects() {
-    const cards = [1, 2, 3, 4, 5, 6, 7, 8]
-    const [selectedId, setSelectedId] = useState(-1)
+function Projectos() {
+    const searchParams: string | null = useSearchParams().get('project-id')
+    const projectId: string = searchParams ? searchParams : ''
+
+    const [selectedId, setSelectedId] = useState(projectId.split('-')[2] ? Number(projectId.split('-')[2]) - 1 : -1)
     const containerRefs = useRef(new Array())
 
     const years = [2024, 2023, 2022, 2020, 2019, 2018, 2017, 2016]
+    const defaultYearStr = projectId.split('-')[1]
+    const defaultYear = defaultYearStr && years.includes(Number(defaultYearStr)) ? Number(defaultYearStr) : years.sort((a, b) => { return b - a })[0]
 
-    const [currentYear, setCurrentYear] = useState(years.sort((a, b) => { return b - a })[0])
+    const [currentYear, setCurrentYear] = useState(defaultYear)
 
     const yearElements = years.map((year, ind) => {
         return (
@@ -73,25 +79,13 @@ export default function NewProjects() {
                     >
                         {selectedId === i ? (
                             <div className="flex h-full w-full gap-8 overflow-hidden rounded-lg border-2 border-gray-700 bg-black p-4 pr-0 text-black">
-                                {selectedId === 8 ? (
-                                    <Link
-                                        href={
-                                            'https://drive.google.com/file/d/17zKMNSoI_-jI5c7Mlli-GaQXi7pWYaVx/view?usp=drive_link'
-                                        }
-                                    >
-                                        <img
-                                            className="hidden aspect-auto h-full self-center rounded-md sm:block"
-                                            src={card.poster_url}
-                                            alt={card.title}
-                                        />
-                                    </Link>
-                                ) : (
+                                {
                                     <img
                                         className="hidden aspect-auto h-full self-center rounded-md sm:block"
                                         src={card.poster_url}
                                         alt={card.title}
                                     />
-                                )}
+                                }
 
                                 <div className="flex flex-col justify-between gap-4 overflow-auto pr-4">
                                     <div className="flex flex-col gap-4">
@@ -278,3 +272,11 @@ export default function NewProjects() {
         </div>
     )
 }
+
+export default function NewProjects () {
+    return (
+        <Suspense fallback={<div>SHAKABOOM!</div>}>
+            <Projectos />
+        </Suspense>
+    )
+}
diff --git a/app/publications/page.tsx b/app/publications/page.tsx
@@ -23,7 +23,7 @@ import { publicationData } from '../../public/data/publications.js'
 const designStyles = makeStyles({
     spinnerTextStyle: {
         textAlign: 'center',
-        color: '#7cb342',
+        color: '#068F13',
     },
 })
 
@@ -167,7 +167,7 @@ export default function Publications() {
                             Loading Data
                         </Typography>{' '}
                         <CircularProgress
-                            style={{ color: '#7cb342', marginTop: '1em' }}
+                            style={{ color: '#068F13', marginTop: '1em' }}
                         />
                     </div>
                 ) : (

diff --git a/components/Footer.js b/components/Footer.js
@@ -60,6 +60,7 @@ const Footer = () => (
                 <Typography style={contentTitleStyle}>Connect</Typography>
                 <Typography style={contentBodyStyle}>
                     [email protected]
+                    [email protected]
                 </Typography>
                 <Grid container justifyContent="center">
                     <Grid item xs={2} style={{ textAlign: 'center' }}>

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -12,8 +12,9 @@ const routes = [
     { title: 'Members', route: `/members` },
     { title: 'Projects', route: `/projects` },
     { title: 'Publications', route: `/publications` },
-    { title: 'Our History', route: `/history` },
     { title: 'Events', route: '/events' },
+    { title: 'Join Us', route: `/` },
+    { title: 'Our History', route: `/history` },
     // {
     //     title: 'Events',
     //     route: `/events`,

diff --git a/css/events.css b/css/events.css
@@ -14,7 +14,7 @@
 }
 
 .eventHeading {
-  color: #7cb342 !important;
+  color: #068f13 !important;
   font-size: 2rem !important;
   font-family: Changa, sans-serif;
   cursor: pointer;

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.