Merge pull request #13 from oss2019/main

Major Merge

app/achievements/data.ts

@@ -1,9 +1,16 @@
-// import blocksData from '@/types/Block/blockCard.types
+import blocksData from '@/types/Block/blockCard.types'
+import basic_img from '@/public/Projects/Images/GRAND.png'
 
-// const data: blocksData = [
-//   {
-//     heading: 'Inter IIT TechMeet 11',
-//   },
-// ]
+const data: blocksData = [
+  {
+    heading: 'Inter IIT TechMeet 11',
+    time: 'May',
+    content:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+    knowMoreLink: 'https://www.granddecoder.mit.edu/',
+    image: basic_img.src,
+  },
+  // other achievements
+]
 
-// export default data
+export default data

app/achievements/page.module.css

@@ -0,0 +1,4 @@
+.achievementsWrapper {
+  background-color: var(--primary-light-pastel-gray);
+  background-image: url(/Events/micro_carbon.png);
+}

app/achievements/page.tsx

@@ -1,7 +1,26 @@
-// Make this page like projects
+'use client'
 
-const page = () => {
-  return <></>
-}
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import Block from '@/components/Block/Block'
+import styles from './page.module.css'
+
+export default function Events() {
+  const [eventsData, setEventsData] = useState([])
+
+  const getEvents = () => {
+    axios.get('/api/admin/achievements').then(response => {
+      setEventsData(response.data)
+    })
+  }
 
-export default page
+  useEffect(() => {
+    getEvents()
+  }, [])
+
+  return (
+    <div className={styles.achievementsWrapper}>
+      <Block title='Achievements' blocksData={eventsData} />
+    </div>
+  )
+}

app/events/page.tsx

@@ -1,14 +1,26 @@
-import data from './data'
-import Block from '@/components/Block/Block'
+'use client'
 
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import Block from '@/components/Block/Block'
 import styles from './page.module.css'
 
 export default function Events() {
+  const [eventsData, setEventsData] = useState([])
+
+  const getEvents = () => {
+    axios.get('/api/admin/events').then(response => {
+      setEventsData(response.data)
+    })
+  }
+
+  useEffect(() => {
+    getEvents()
+  }, [])
+
   return (
-    <>
-      <div className={styles.eventsWrapper}>
-        <Block title='Events' blocksData={data} />
-      </div>
-    </>
+    <div className={styles.eventsWrapper}>
+      <Block title='Events' blocksData={eventsData} />
+    </div>
   )
 }

app/layout.tsx

@@ -9,7 +9,7 @@ const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
   title: 'Coding Club Website',
-  description: 'Coded by Shubh Agarwal (https://github.com/ShubhAgarwal-dev)',
+  description: 'The official website of the Coding Club of IIT Dharwad',
 }
 
 interface RootLayoutProps {

app/members/page.module.css

@@ -4,9 +4,137 @@
 }
 
 .membersWrapper {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   padding-top: 6rem;
   background-color: var(--primary-light-pastel-gray);
   background-image: url(/Events/micro_carbon.png);
   padding-bottom: 3rem;
   min-height: 100vh;
+  font-weight: normal;
+}
+
+/* Styles for admin/members page here */
+.addButton {
+  color: white;
+  background-color: #212830;
+  border-radius: 4px;
+  margin: 3px;
+  padding: 4px;
+  margin: 2px auto;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: large;
+  width: 125px;
+  box-shadow: 2px 2px 0 0 black;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+.addButton:hover {
+  color: white;
+  background: black;
+  box-shadow: 2px 2px 0 0 white;
+}
+
+.membersModal {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  margin: auto;
+  width: 65%;
+  height: fit-content;
+  justify-content: center;
+  align-items: center;
+  background: #e1e1e1;
+  background-color: rgb(46, 46, 46);
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  padding: 1% 2%;
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 4);
+  text-align: center;
+  color: white;
+  border-radius: 10px;
+}
+
+.membersModal > h1 {
+  font-size: larger;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 2%;
+  margin-bottom: 4%;
+}
+
+.membersModal * input,
+.membersModal * select {
+  width: 80%;
+  resize: vertical;
+  padding: 1vh;
+  border-radius: 5px;
+  border: 0;
+  background-color: rgb(0, 0, 0);
+}
+
+.membersModal * button {
+  color: white;
+  background-color: black;
+  border-radius: 5px;
+  padding: 4px;
+  cursor: pointer;
+  transition: 0.3s;
+  font-size: large;
+  width: 10%;
+  min-width: fit-content;
+  margin: 2%;
+  justify-content: center;
+}
+.membersModal * button:hover {
+  color: black;
+  background: white;
+  box-shadow: 3px 3px 0 0 black;
+}
+
+.membersModal * label {
+  text-align: right;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-end;
+  width: 80%;
+  align-items: center;
+  margin: 1vh auto;
+  justify-content: space-between;
+}
+
+.errorBox {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 101;
+  font-size: larger;
+}
+
+@media (max-width: 768px) {
+  .membersModal,
+  .errorBox {
+    width: 95%;
+    font-size: smaller;
+    padding: 1px 0px;
+  }
+  .membersModal * label {
+    flex-direction: row;
+    margin-top: 3px 0px;
+  }
+  .membersModal * input,
+  .membersModal * select {
+    width: 60%;
+  }
 }

app/members/page.tsx

@@ -1,27 +1,23 @@
 'use client'
 
+import React, { useState, useRef, useEffect } from 'react'
 import { Tabs, type TabsRef } from 'flowbite-react'
 import Loading from '@/components/Loading/Loading'
 import InfoTable from '@/components/Table/InfoTable'
-import React, { useState, useRef, useEffect } from 'react'
-
 import styles from './page.module.css'
-
 import { FOSS } from '@/types/Members/foss.types'
 import { CP } from '@/types/Members/cp.types'
 import { GD } from '@/types/Members/gd.types'
 import { members } from '@/types/Members/members.types'
-
 import { SiBmcsoftware, SiCodeforces } from 'react-icons/si'
 import { IoGameController } from 'react-icons/io5'
 import { IoIosPeople } from 'react-icons/io'
 
 import Header from '@/components/Members/Header'
 
 const MEMBERS_REVALIDATION_TIME = 60 * 60 * 12
-// Keep this very high in the deployed version
 
-const Page = async () => {
+const Page = () => {
   const [memArr, setMemArr] = useState<string[][]>([[]])
   const [cpArr, setCpArr] = useState<string[][]>([[]])
   const [gdArr, setGdArr] = useState<string[][]>([[]])
@@ -192,12 +188,12 @@ const Page = async () => {
               <Loading />
             )}
           </Tabs.Item>
-          <Tabs.Item title='Competetive Programming' icon={SiCodeforces}>
+          <Tabs.Item title='Competitive Programming' icon={SiCodeforces}>
             {cpArr ? (
               <InfoTable
                 headings={headings_cp}
                 row_data={cpArr}
-                table_heading='Competetive Programming'
+                table_heading='Competitive Programming'
               />
             ) : (
               <Loading />

app/projects/page.tsx

@@ -1,19 +1,26 @@
-import Block from '@/components/Block/Block'
-import data from './data'
+'use client'
 
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import Block from '@/components/Block/Block'
 import styles from './page.module.css'
 
-export const metadata = {
-  title: 'Projects for Coding Club',
-  description: 'Coded by Shubh Agarwal (https://github.com/ShubhAgarwal-dev)',
-}
+export default function Events() {
+  const [eventsData, setEventsData] = useState([])
+
+  const getEvents = () => {
+    axios.get('/api/admin/projects').then(response => {
+      setEventsData(response.data)
+    })
+  }
+
+  useEffect(() => {
+    getEvents()
+  }, [])
 
-export default function Project() {
   return (
-    <>
-      <div className={styles.projectWrapper}>
-        <Block title='Projects' blocksData={data} />
-      </div>
-    </>
+    <div className={styles.projectWrapper}>
+      <Block title='Projects' blocksData={eventsData} />
+    </div>
   )
 }

app/protectedLayouts.tsx

@@ -1,34 +1,30 @@
-// components/layouts/protectedLayouts.tsx
-
 import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-
-type Props = {
-  children: React.ReactElement
+import AppBarAdmin from './../components/AppBar/AppBarAdmin'
+import Footer from '@/components/Footer/Footer'
+import './globals.css'
+import AppBar from '@/components/AppBar/AppBar'
+import './globals.css'
+import { Inter } from 'next/font/google'
+import { ReactNode } from 'react'
+import { NextAuthProvider } from './../pages/provider'
+
+interface RootLayoutProps {
+  // Use interface for prop types
+  children: ReactNode
 }
 
-/*
-  add the requireAuth property to the page component
-  to protect the page from unauthenticated users
-  e.g.:
-  OrderDetail.requireAuth = true;
-  export default OrderDetail;
- */
-
-const ProtectedLayout = ({ children }: Props): JSX.Element => {
+function ProtectedLayout({ children }: RootLayoutProps) {
   const router = useRouter()
   const { status: sessionStatus } = useSession()
   const authorized = sessionStatus === 'authenticated'
   const unAuthorized = sessionStatus === 'unauthenticated'
   const loading = sessionStatus === 'loading'
 
   useEffect(() => {
-    // check if the session is loading or the router is not ready
     if (loading || !router.isReady) return
 
-    // if the user is not authorized, redirect to the login page
-    // with a return url to the current page
     if (unAuthorized) {
       console.log('not authorized')
       router.push({
@@ -37,14 +33,19 @@ const ProtectedLayout = ({ children }: Props): JSX.Element => {
     }
   }, [loading, unAuthorized, sessionStatus, router])
 
-  // if the user refreshed the page or somehow navigated to the protected page
   if (loading) {
-    return <>Loading app...</>
+    return <>Loading app...</> //need to change to loading screen
   }
 
-  // if the user is authorized, render the page
-  // otherwise, render nothing while the router redirects him to the login page
-  return authorized ? <div>{children}</div> : <></>
+  return authorized ? (
+    <>
+      <AppBarAdmin />
+      <div>{children}</div>
+      <Footer />
+    </>
+  ) : (
+    <></>
+  )
 }
 
 export default ProtectedLayout