Skip to content

Commit

Permalink
abstract new feature page data
Browse files Browse the repository at this point in the history
  • Loading branch information
@KobeZ123
KobeZ123 committed Nov 10, 2024
1 parent 8faae11 commit f8c67bf
Showing 1 changed file with 109 additions and 95 deletions.
204 changes: 109 additions & 95 deletions packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,98 @@ import { ModalBodyPagination } from "./ModalBodyPagination";
import InProgressIndicatorImage from "../../public/in-progress-indicator.png";
import SearchNEUIntegrationImage from "../../public/searchneu-integration.png";
import { InfoOutlineIcon } from "@chakra-ui/icons";
import React, { useEffect } from "react";

interface ModalContentProps {
onClose: () => void;
}

const InProgressIcon: React.FC = () => {
return (
<Box
bg="orange"
borderColor="orange"
color="white"
borderWidth="1px"
width="18px"
height="18px"
display="inline-flex"
alignItems="center"
justifyContent="center"
transition="background 0.25s ease, color 0.25s ease, border 0.25s ease"
transitionDelay="0.1s"
borderRadius="2xl"
p="xs"
position="relative"
verticalAlign="middle"
>
<Text fontSize="s" boxSize="34px" color="white">
...
</Text>
</Box>
);
};

interface FeaturePageData {
key: string;
title: string;
descriptionSection: React.ReactNode;
image: string;
}

const featurePagesData: FeaturePageData[] = [
{
key: "in-progress-indicator",
title: "In-progress Indicator",
descriptionSection: (
<Stack>
<Text>
Want to know which major requirements are still in progress?
</Text>
<Text>
Look for the new{""}
<chakra.span px="1">
<InProgressIcon />
</chakra.span>{" "}
icon to know which requirements are currently in-progress.
</Text>
</Stack>
),
image: InProgressIndicatorImage.src,
},
{
key: "searchneu-integration",
title: "SearchNEU Integration",
descriptionSection: (
<Stack>
<Text>
Want to know more about a class before adding it to the plan?
</Text>
<Text>
Click on the new{" "}
<chakra.span px="1">
<InfoOutlineIcon />
</chakra.span>{" "}
button to read more about a class on SearchNEU.
</Text>
</Stack>
),
image: SearchNEUIntegrationImage.src,
},
];

export const Fall2024ReleaseModalContent: React.FC<ModalContentProps> = ({
onClose,
}) => {
const featurePages: React.ReactNode[] = [
<InProgressIndicatorFeaturePage key="in-progress-indicator" />,
<SearchNEUIntegrationFeaturePage key="searchneu-integration" />,
];
const [featurePages, setFeaturePages] = React.useState<React.ReactNode[]>([]);

useEffect(() => {
const pages = [];
for (const featurePageData of featurePagesData) {
pages.push(<NewFeaturePage {...featurePageData} />);
}
setFeaturePages(pages);
}, [featurePagesData]);

Check warning on line 108 in packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx

View workflow job for this annotation

GitHub Actions / Run linting for all packages 

React Hook useEffect has an unnecessary dependency: 'featurePagesData'. Either exclude it or remove the dependency array. Outer scope values like 'featurePagesData' aren't valid dependencies because mutating them doesn't re-render the component

return (
<ModalContent>
Expand All @@ -36,7 +116,7 @@ export const Fall2024ReleaseModalContent: React.FC<ModalContentProps> = ({
>
<Text>Latest Release v26.09.24</Text>
</ModalHeader>
<ModalBodyPagination pages={featurePages} />
{featurePages.length > 0 && <ModalBodyPagination pages={featurePages} />}
<ModalFooter alignContent="center" justifyContent="center">
<Button
variant="solid"
Expand All @@ -52,80 +132,40 @@ export const Fall2024ReleaseModalContent: React.FC<ModalContentProps> = ({
);
};

const InProgressIndicatorFeaturePage: React.FC = () => {
return (
<NewFeaturePage
title="In-progress Indicator"
descriptionSection={
<Stack>
<Text>
Want to know which major requirements are still in progress?
</Text>
<Text>
Look for the new{""}
<chakra.span px="1">
<InProgressIcon />
</chakra.span>{" "}
icon to know which requirements are currently in-progress.
</Text>
</Stack>
}
image={InProgressIndicatorImage.src}
/>
);
};

const SearchNEUIntegrationFeaturePage: React.FC = () => {
return (
<NewFeaturePage
title="SearchNEU Integration"
descriptionSection={
<Stack>
<Text>
Want to know more about a class before adding it to the plan?
</Text>
<Text>
Click on the new{" "}
<chakra.span px="1">
<InfoOutlineIcon />
</chakra.span>{" "}
button to read more about a class on SearchNEU.
</Text>
</Stack>
}
image={SearchNEUIntegrationImage.src}
/>
);
};

interface NewFeaturePageProps {
title: string;
descriptionSection: React.ReactNode;
image: string;
}

const NewFeaturePage: React.FC<NewFeaturePageProps> = ({
const NewFeaturePage: React.FC<FeaturePageData> = ({
key,
title,
descriptionSection,
image,
}) => {
return (
<HStack pt="8" alignItems="start" gap="8">
<HStack pt="8" alignItems="start" gap="8" key={key} minHeight={"350px"}>
<NewFeatureText title={title} descriptionSection={descriptionSection} />
<Stack flex="3">
<Image
src={image}
alt={title + " image"}
fit={"contain"}
maxWidth={400}
maxHeight={300}
borderRadius="2xl"
/>
</Stack>
<NewFeatureImage src={image} alt={title + " image"} />
</HStack>
);
};

interface NewFeatureImageProps {
src: string;
alt?: string;
}

const NewFeatureImage: React.FC<NewFeatureImageProps> = ({ src, alt }) => {
return (
<Stack flex="3">
<Image
src={src}
alt={alt}
fit={"contain"}
maxWidth={400}
maxHeight={300}
borderRadius="2xl"
/>
</Stack>
);
};

interface NewFeatureTextProps {
title: string;
descriptionSection: React.ReactNode;
Expand All @@ -147,29 +187,3 @@ const NewFeatureText: React.FC<NewFeatureTextProps> = ({
</Stack>
);
};

const InProgressIcon: React.FC = () => {
return (
<Box
bg="orange"
borderColor="orange"
color="white"
borderWidth="1px"
width="18px"
height="18px"
display="inline-flex"
alignItems="center"
justifyContent="center"
transition="background 0.25s ease, color 0.25s ease, border 0.25s ease"
transitionDelay="0.1s"
borderRadius="2xl"
p="xs"
position="relative"
verticalAlign="middle"
>
<Text fontSize="s" boxSize="34px" color="white">
...
</Text>
</Box>
);
};

0 comments on commit f8c67bf

Please sign in to comment.