Skip to content

Commit

Permalink
MCSS-90: Transition to new cms endpoints (#93)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eruditeme
eruditeme authored Oct 28, 2023
1 parent 2f656c5 commit 5003743
Show file tree
Hide file tree
Showing 23 changed files with 228 additions and 818 deletions.
76 changes: 37 additions & 39 deletions components/Blogs/BlogHighlightSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ const BlogHighlightSection: FC = () => {
const blogCardInfos = Object.entries(blogs)
.filter(([, { featured }]) => featured)
.slice(0, 3)
.map(([id, { title, creator, updatedDatetime, coverImageUrl, categories, description }]) => ({
.map(([id, { title, author, updatedDatetime, coverImageUrl, tags, description }]) => ({
id,
title,
creator,
author,
updatedDatetime: formatDate(updatedDatetime, {
month: 'short',
day: 'numeric',
Expand All @@ -30,26 +30,26 @@ const BlogHighlightSection: FC = () => {
minute: 'numeric',
}),
coverImageUrl,
categories,
tags: tags.map((t) => t.Tag),
description,
}));

return (
<div>
<MediaQueryContainer showOnMobile>
<Slider dots infinite speed={500} slidesToShow={1} slidesToScroll={1} arrows={false}>
{blogCardInfos.map(({ id, coverImageUrl, creator, title, description, categories }) => (
{blogCardInfos.map(({ id, coverImageUrl, author, title, description, tags }) => (
<div className="w-full pb-4 px-14" key={id}>
<MaterialCard
className="mobile-blog-card h-96 w-full relative"
onClick={() => router.push(`Blogs/${id}`)}
>
<Tag categories={categories} />
<Tag categories={tags} />
<div className="h-1/2 w-full image-container">
<Image src={coverImageUrl} layout="fill" priority />
</div>
<div className="h-1/2 p-5">
<h3 className="mb-2">{`By: ${creator}`}</h3>
<h3 className="mb-2">{`By: ${author}`}</h3>
<h2 className="text-lg font-bold">{title}</h2>
<p className="description">{description}</p>
</div>
Expand All @@ -60,44 +60,42 @@ const BlogHighlightSection: FC = () => {
</MediaQueryContainer>
<MediaQueryContainer hideOnMobile>
<div className="blog-highlight-section">
{blogCardInfos.map(
({ id, title, updatedDatetime, coverImageUrl, categories, creator }) => (
<MaterialCard
key={id}
className="blog-card h-96 w-10/12 lg:w-1/2 relative mb-10"
onClick={() => router.push(`Blogs/${id}`)}
>
<Tag categories={categories} />
<div className="flex h-full">
<div className="w-1/2 h-full image-container">
<Image src={coverImageUrl} layout="fill" priority />
{blogCardInfos.map(({ id, title, updatedDatetime, coverImageUrl, tags, author }) => (
<MaterialCard
key={id}
className="blog-card h-96 w-10/12 lg:w-1/2 relative mb-10"
onClick={() => router.push(`Blogs/${id}`)}
>
<Tag categories={tags} />
<div className="flex h-full">
<div className="w-1/2 h-full image-container">
<Image src={coverImageUrl} layout="fill" priority />
</div>
<div className="w-1/2 h-full px-5 pt-3 pb-5">
<div className="h-1/2">
<h2 className="text-lg font-bold">Last Updated</h2>
<p>{updatedDatetime}</p>
{author && <h2 className="text-lg mt-5 font-bold">Creator</h2>}
<p>{author}</p>
</div>
<div className="w-1/2 h-full px-5 pt-3 pb-5">
<div className="h-1/2">
<h2 className="text-lg font-bold">Last Updated</h2>
<p>{updatedDatetime}</p>
<h2 className="text-lg mt-5 font-bold">Creator</h2>
<p>{creator}</p>
<div className="h-1/2 flex flex-col justify-end">
<div className="h-3/4">
<p className="text-2xl font-bold text-justify title w-full">{title}</p>
</div>
<div className="h-1/2 flex flex-col justify-end">
<div className="h-3/4">
<p className="text-2xl font-bold text-justify title w-full">{title}</p>
</div>
<div className="h-1/4">
<Button
variant="contained"
className="w-full h-full"
onClick={() => router.push(`Blogs/${id}`)}
>
Read
</Button>
</div>
<div className="h-1/4">
<Button
variant="contained"
className="w-full h-full"
onClick={() => router.push(`Blogs/${id}`)}
>
Read
</Button>
</div>
</div>
</div>
</MaterialCard>
)
)}
</div>
</MaterialCard>
))}
</div>
</MediaQueryContainer>
</div>
Expand Down
18 changes: 9 additions & 9 deletions components/Blogs/BlogListSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ const BlogListSection: FC<IProps> = ({ selectedCategories }) => {
const router = useRouter();
const blogCardInfos = Object.entries(blogs)
.filter(
([, { categories }]) =>
([, { tags }]) =>
selectedCategories.includes('All') ||
!_.isEmpty(categories.filter((category) => selectedCategories.includes(category)))
!_.isEmpty(tags.filter((category) => selectedCategories.includes(category.Tag)))
)
.map(([id, { title, creator, updatedDatetime, coverImageUrl, categories, description }]) => ({
.map(([id, { title, author, updatedDatetime, coverImageUrl, tags, description }]) => ({
id,
title,
creator,
author,
updatedDatetime: formatDate(updatedDatetime, {
month: 'short',
day: 'numeric',
Expand All @@ -34,32 +34,32 @@ const BlogListSection: FC<IProps> = ({ selectedCategories }) => {
minute: 'numeric',
}),
coverImageUrl,
categories,
tags: tags.map((t) => t.Tag),
description,
}));

return (
<div className="blog-list-page mx-9">
<div className="flex flex-wrap mt-5">
{blogCardInfos.map(({ id, title, creator, description, coverImageUrl, categories }) => (
{blogCardInfos.map(({ id, title, author, description, coverImageUrl, tags }) => (
<div
className={classNames('w-full sm:w-1/2 md:w-1/3 lg:w-1/4 px-6 py-4', {
hidden:
!selectedCategories.includes('All') &&
_.isEmpty(categories.filter((category) => selectedCategories.includes(category))),
_.isEmpty(tags.filter((category) => selectedCategories.includes(category))),
})}
key={id}
>
<MaterialCard
className="w-full rounded-lg relative h-96"
onClick={() => router.push(`Blogs/${id}`)}
>
<Tag categories={categories} />
<Tag categories={tags} />
<div className="h-1/2 w-full image-container">
<Image src={coverImageUrl} layout="fill" priority />
</div>
<div className="h-1/2 p-5">
<h3 className="mb-2">{`By: ${creator}`}</h3>
{author && <h3 className="mb-2">{`By: ${author}`}</h3>}
<h2 className="text-lg font-bold">{title}</h2>
<p className="description">{description}</p>
</div>
Expand Down
8 changes: 4 additions & 4 deletions components/Common/HeadingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import Image from 'next/image';

type Details = {
subHeading: string;
info: string;
info?: string;
}[];

type Props = {
title: string;
details: Details;
categories: string[];
categories?: string[];
coverImageUrl: string;
buttonProps?: {
text: string;
Expand All @@ -25,7 +25,7 @@ type Props = {
};

const HeadingCard = (props: Props) => {
const { title, details, categories, coverImageUrl, buttonProps } = props;
const { title, categories, details, coverImageUrl, buttonProps } = props;
return (
<Card
sx={{
Expand All @@ -35,7 +35,7 @@ const HeadingCard = (props: Props) => {
}}
>
<CardMedia>
<Tag categories={categories} />
{categories && <Tag categories={categories} />}
<Image
src={coverImageUrl}
layout="fill"
Expand Down
27 changes: 1 addition & 26 deletions components/Common/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,9 @@ import Tabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';

import Logo from '@public/MCSSText.svg';
import { getAllAcademics } from '@store/academicsSlice';
import { getAllBlogs } from '@store/blogSlice';
import { getAllEvents } from '@store/eventSlice';
import { useAppDispatch, useAppSelector } from '@store/hooks';
import { getAllPartners } from '@store/partnerSlice';
import { useIsMobile } from '@utils/hooks';
import classNames from 'classnames';
import Image from 'next/image';
Expand Down Expand Up @@ -42,26 +40,15 @@ const NavBar: FC = () => {
const router = useRouter();
const { events } = useAppSelector((state) => state.events);
const { blogs } = useAppSelector((state) => state.blogs);
const { partners } = useAppSelector((state) => state.partners);
const { academics } = useAppSelector((state) => state.academics);
const links = [
{ label: 'Events', href: '/Events' },
{ label: 'Blogs', href: '/Blogs' },
{ label: 'Partners', href: '/Partners' },
];
const searchBarWhiteList = ['/Events', '/Blogs', '/Partners', '/Academics'];
const searchBarWhiteList = ['/Events', '/Blogs'];
const partialRouteMatch = searchBarWhiteList.some((route) => router.pathname.includes(route));
const options = [
...Object.entries(events).map(([id, { title }]) => ({ label: `Event: ${title}`, value: id })),
...Object.entries(blogs).map(([id, { title }]) => ({ label: `Blog: ${title}`, value: id })),
...Object.entries(partners).map(([id, { title }]) => ({
label: `Partners: ${title}`,
value: id,
})),
...Object.entries(blogs).map(([id, { title }]) => ({
label: `Academics: ${title}`,
value: id,
})),
];

useEffect(() => {
Expand All @@ -72,14 +59,6 @@ const NavBar: FC = () => {
if (_.isEmpty(blogs)) {
dispatch(getAllBlogs());
}

if (_.isEmpty(partners)) {
dispatch(getAllPartners());
}

if (_.isEmpty(academics)) {
dispatch(getAllAcademics());
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Expand Down Expand Up @@ -128,10 +107,6 @@ const NavBar: FC = () => {
router.push(`/Events/${selectedOption.value}`);
} else if (selectedOption?.label.includes('Blog:')) {
router.push(`/Blogs/${selectedOption.value}`);
} else if (selectedOption?.label.includes('Partners:')) {
router.push(`/Partners/${selectedOption.value}`);
} else if (selectedOption?.label.includes('Academic:')) {
router.push(`/Academics/${selectedOption.value}`);
}
}}
options={options}
Expand Down
12 changes: 9 additions & 3 deletions components/Common/ScrollingAvatars/ScrollingAvatars.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const ScrollingAvatars: FC<IProps> = ({
<div
className={`scrolling-avatars-inner-container--${size}--${avatarInfos.length}--scroll-${scrollDirection}`}
>
{appendedAvatarsInfos.map(({ name, role, avatarUrl, websiteUrl }) => (
{appendedAvatarsInfos.map(({ name, role, avatarUrl, links }) => (
<Avatar
onMouseEnter={() => {
setName(name);
Expand All @@ -83,8 +83,14 @@ const ScrollingAvatars: FC<IProps> = ({
setPosition('');
}}
onClick={() => {
if (websiteUrl) {
window.location.href = websiteUrl;
if (links.Website) {
window.location.href = links.Website;
} else if (links.Linkedin) {
window.location.href = links.Linkedin;
} else if (links.Github) {
window.location.href = links.Github;
} else if (links.Instagram) {
window.location.href = links.Instagram;
}
}}
className="avatar"
Expand Down
Loading

0 comments on commit 5003743

Please sign in to comment.