diff --git a/components/PersonalisationModal.tsx b/components/PersonalisationModal.tsx new file mode 100644 index 00000000..28d5efd3 --- /dev/null +++ b/components/PersonalisationModal.tsx @@ -0,0 +1,87 @@ +import { Box, Button, Chip, Modal } from "@mui/material"; +import React from "react"; +import { useState, useEffect } from "react"; + +const modalStyle = { + position: "absolute" as "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 800, + bgcolor: "background.paper", + boxShadow: 24, + borderRadius: 2, + p: 2, +}; + +const modalHeaderStyle = { + fontSize: "1.5rem", + fontWeight: "bold", + margin: 0, +}; + +const modalTextStyle = {}; + +const PersonalisationModal = ({ industries, clearFilters, addFilter }) => { + const [open, setOpen] = useState(true); + + // handles toggling of the selected industries + const [selectedIndustries, setSelectedIndustries] = useState([]); + const handleIndustryChipToggle = (industry: string) => { + if (selectedIndustries.includes(industry)) { + setSelectedIndustries(selectedIndustries.filter((i) => i !== industry)); + } else { + setSelectedIndustries([...selectedIndustries, industry]); + } + }; + + const IsChipSelected = (industry: string) => { + return selectedIndustries.includes(industry); + }; + + const handleContinueButtonClick = () => { + clearFilters(); + selectedIndustries.forEach((industry) => { + addFilter("industries", industry, "any"); + }); + setOpen(false); + }; + + return ( + setOpen(false)}> + +

Hello there!

+

+ Select some industries you're interested in to help us personalise + your experience. +

+ + {industries === undefined &&

Loading...

} + {industries !== undefined && + industries[0].data.map( + (industry: { count: number; value: string }) => ( + handleIndustryChipToggle(industry.value)} + color="primary" + variant={ + IsChipSelected(industry.value) ? "filled" : "outlined" + } + /> + ) + )} +
+ +
+
+ ); +}; + +export default PersonalisationModal; diff --git a/pages/mentors/[id].tsx b/pages/mentors/[id].tsx index 8348542e..ebbe6d0c 100644 --- a/pages/mentors/[id].tsx +++ b/pages/mentors/[id].tsx @@ -11,6 +11,7 @@ import { Results, SearchBox, Sorting, + WithSearch, } from "@elastic/react-search-ui"; import { FilterType, SortDirection } from "@elastic/search-ui"; import useMediaQuery from "@mui/material/useMediaQuery"; @@ -31,6 +32,7 @@ import type { GetStaticProps, GetStaticPaths } from "next"; import { useRouter } from "next/router"; import ClearFacets from "../../components/ResetButton"; +import PersonalisationModal from "../../components/PersonalisationModal"; // This also gets called at build time export const getStaticProps: GetStaticProps = async (context) => { @@ -103,7 +105,7 @@ const App = () => { values: [WAVES[currentTabId].waveId], }, ], - disjunctiveFacets: ["organisation", "course_of_study"], + disjunctiveFacets: ["organisation", "course_of_study", "industries"], facets: { industries: { type: "value", size: 100 }, organisation: { type: "value", size: 100 }, @@ -170,9 +172,11 @@ const App = () => { } bodyContent={ - } - /> + + } + /> + } sideContent={
@@ -183,7 +187,7 @@ const App = () => { { name: "Name", value: "name", direction: "asc" }, ]} /> - + { bodyFooter={} />
+ ({ + facets, + clearFilters, + addFilter, + })} + > + {({ facets, clearFilters, addFilter }) => ( + + )} +