Agenda and Path changes

src/pages/developerdays/agenda.js

@@ -0,0 +1,191 @@
+import React, {useEffect, useState} from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import {getAgenda, getSpeaker} from '../../services/StreamService';
+import {flushSync} from 'react-dom';
+
+export default function Stream() {
+  const {siteConfig} = useDocusaurusContext();
+  const [agenda, setAgenda] = useState({
+    day1: [],
+    day2: [],
+    day3: [],
+  });
+  const [speakers, setSpeakers] = useState([]);
+  const [filterSelection, setFilterSelection] = React.useState('IDN');
+  const [loading, setLoading] = useState(true);
+
+  const dates = {
+    day1: new Date('2023-03-07').toLocaleDateString([], {dateStyle: 'full'}),
+    day2: new Date('2023-03-08').toLocaleDateString([], {dateStyle: 'full'}),
+    day3: new Date('2023-03-09').toLocaleDateString([], {dateStyle: 'full'}),
+  };
+
+  function formatSpeaker(id) {
+    return speakers?.filter((spkr) => spkr.id === id)[0];
+  }
+
+  function diff_minutes(dt2, dt1) {
+    var diff = (dt2.getTime() - dt1.getTime()) / 1000;
+    diff /= 60;
+    return Math.abs(Math.round(diff));
+  }
+
+  const sessionFilter = (obj) => {
+    if (obj.hidden === true) return false;
+    return obj.stage === filterSelection;
+  };
+
+  useEffect(async () => {
+    const tempAgenda = await getAgenda();
+    const tempSpeakers = await getSpeaker();
+    setAgenda(tempAgenda);
+    setSpeakers(tempSpeakers);
+    console.log(tempAgenda);
+    console.log(tempSpeakers);
+    setLoading(false);
+    console.log('Done Loading');
+  }, []);
+
+  return (
+    <Layout>
+      <main>
+        <div className="p-2 lg:px-28">
+          <p className="text-3xl text-center">Agenda</p>
+          <div className="flex flex-row gap-2 justify-center">
+            <button
+              className={`rounded  p-2  hover:scale-[.90] w-[50px] border-2 ${
+                filterSelection === 'IDN'
+                  ? 'border-[#cc27b0] bg-[#cc27b0] text-white'
+                  : 'border-slate-600'
+              }`}
+              onClick={() => setFilterSelection('IDN')}>
+              IDN
+            </button>
+            <button
+              className={`rounded  p-2  hover:scale-[.90] w-[50px] border-2 ${
+                filterSelection === 'IIQ'
+                  ? 'border-[#cc27b0] bg-[#cc27b0] text-white'
+                  : 'border-slate-600'
+              }`}
+              onClick={() => setFilterSelection('IIQ')}>
+              IIQ
+            </button>
+          </div>
+          {loading && (
+            <>
+              <div className="flex flex-row justify-center">
+                <p className="text-center">Loading...</p>
+              </div>
+            </>
+          )}
+          {!loading && (
+            <>
+              {['Day 1', 'Day 2', 'Day 3'].map((label) => {
+                const day = label.replace(' ', '').toLowerCase();
+                const sessions = agenda[day]?.filter(sessionFilter);
+
+                if (sessions.length > 0)
+                  return (
+                    <div key={day} className="p-2 flex flex-col ">
+                      <p className="text-center">
+                        {label} - {dates[day]}
+                      </p>
+                      <div className="flex flex-col gap-2">
+                        {sessions.map((session) => {
+                          return (
+                            <>
+                              <div className="flex flex-row gap-4">
+                                <div className="hidden lg:flex flex-col justify-center">
+                                  <p className="whitespace-nowrap">
+                                    {new Date(
+                                      session?.startTime,
+                                    ).toLocaleTimeString([], {
+                                      hour: '2-digit',
+                                      minute: '2-digit',
+                                      timeZoneName: 'short',
+                                    })}
+                                  </p>
+                                </div>
+                                <div
+                                  key={session.title}
+                                  className="flex flex-col bg-[#0033a1] border-l-8 text-white border-[#54c0e8] rounded-lg p-4 grow hover:scale-[1.04] transform-gpu transition-all">
+                                  <div className="flex flex-col">
+                                    <div className="lg:hidden">
+                                      <p className="whitespace-nowrap">
+                                        {new Date(
+                                          session?.startTime,
+                                        ).toLocaleTimeString([], {
+                                          hour: '2-digit',
+                                          minute: '2-digit',
+                                          timeZoneName: 'short',
+                                        })}
+                                      </p>
+                                    </div>
+                                    <div className="flex flex-row">
+                                      <div className="flex flex-col grow">
+                                        <div className="flex flex-row gap-2">
+                                          <p className="!m-0 text-2xl">
+                                            {session?.topic}
+                                          </p>
+                                          {/* <p className="!m-0 text-gray-200/50 my-auto">
+                                  - {session?.stage}
+                                </p> */}
+                                        </div>
+                                        <div className="flex flex-col">
+                                          {session?.speakers?.map((spkr) => {
+                                            const speaker = formatSpeaker(spkr);
+                                            return (
+                                              <div
+                                                key={spkr}
+                                                className="flex flex-row gap-2 text-slate-300/50">
+                                                {/* <img
+                                        className="w-16 h-16 rounded-full"
+                                        src={speaker?.image}
+                                      /> */}
+
+                                                <p className="my-auto text-xl">
+                                                  {speaker?.name} -{' '}
+                                                  {speaker?.title}
+                                                </p>
+                                              </div>
+                                            );
+                                          })}
+                                        </div>
+                                      </div>
+                                      <div className="hidden lg:flex flex-col justify-center font-medium pr-8">
+                                        <p className="!m-0 text-center">
+                                          {diff_minutes(
+                                            new Date(session?.endTime),
+                                            new Date(session?.startTime),
+                                          )}
+                                        </p>
+                                        <p className="!m-0">min</p>
+                                      </div>
+                                    </div>
+                                    <div className="lg:hidden">
+                                      <p className="!m-0">
+                                        {diff_minutes(
+                                          new Date(session?.endTime),
+                                          new Date(session?.startTime),
+                                        )}{' '}
+                                        min
+                                      </p>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  );
+              })}
+            </>
+          )}
+        </div>
+      </main>
+    </Layout>
+  );
+}

src/pages/index.js

@@ -26,7 +26,7 @@ export default function Home() {
           image={'/homepage/person-head.png'}
           buttonText={'Explore our platform'}
         />
-        <HomepageTrainingGuides></HomepageTrainingGuides>
+        <HomepageTrainingGuides />
         <HomepageBasics
           description={
             'The SailPoint Developer Forums are a great place to find solutions to common development problems.'
@@ -36,7 +36,7 @@ export default function Home() {
           image={'/homepage/discuss.png'}
           buttonText={'Join the Discussion'}
         />
-        <HomepageDiscuss></HomepageDiscuss>
+        <HomepageDiscuss />
         <HomepageBasics
           description={
             "The Developer Relations team is responsible for creating a better developer experience on our platform. Click on someone to reach out to them, or <a href='https://developer.sailpoint.com/discuss/new-message?groupname=developer_relations/'>contact our team directly</a>."
@@ -45,7 +45,7 @@ export default function Home() {
           image={'/homepage/team.png'}
           buttonText={''}
         />
-        <HomepageTeam></HomepageTeam>
+        <HomepageTeam />
       </main>
     </Layout>
   );

tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
   corePlugins: {
     preflight: true,
   },
-  content: ['./src/pages/*.js', './src/components/stream/**/*.js'],
+  content: ['./src/pages/**/*.js', './src/components/stream/**/*.js'],
   theme: {
     extend: {},
   },