mirror of
https://github.com/LukeHagar/developer.sailpoint.com.git
synced 2025-12-06 04:19:31 +00:00
Agenda and Path changes
This commit is contained in:
luke-hagar-sp
191
src/pages/developerdays/agenda.js
Normal file
191
src/pages/developerdays/agenda.js
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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: {},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user