From c0c9d22864f73952e7a9562aecc84d9270ebafc3 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Tue, 13 Feb 2024 11:39:19 +0000 Subject: [PATCH] Added the ability for a user to select their preferred topics --- src/components/Medium/TopicModal.tsx | 70 ++++++++++++++++++++++++++++ src/interfaces/user.ts | 2 + src/pages/profile.tsx | 57 ++++++++++++++++------ src/resources/topics.ts | 55 ++++++++++++++++++++++ 4 files changed, 171 insertions(+), 13 deletions(-) create mode 100644 src/components/Medium/TopicModal.tsx create mode 100644 src/resources/topics.ts diff --git a/src/components/Medium/TopicModal.tsx b/src/components/Medium/TopicModal.tsx new file mode 100644 index 00000000..3c31c2a2 --- /dev/null +++ b/src/components/Medium/TopicModal.tsx @@ -0,0 +1,70 @@ +import topics from "@/resources/topics"; +import {useState} from "react"; +import {BsArrowLeft, BsArrowRight} from "react-icons/bs"; +import Button from "../Low/Button"; +import Modal from "../Modal"; + +interface Props { + isOpen: boolean; + initialTopics: string[]; + onClose: VoidFunction; + selectTopics: (topics: string[]) => void; +} + +export default function TopicModal({isOpen, initialTopics, onClose, selectTopics}: Props) { + const [selectedTopics, setSelectedTopics] = useState([...initialTopics]); + + return ( + +
+
+
+ Available Topics +
+ {topics + .filter((x) => !selectedTopics.includes(x)) + .map((x) => ( +
+ {x} + +
+ ))} +
+
+
+ Preferred Topics ({selectedTopics.length || "All"}) +
+ {selectedTopics.map((x) => ( +
+ + {x} +
+ ))} +
+
+
+
+ + +
+
+ + ); +} diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts index c5dc5ad3..bb1ae8ae 100644 --- a/src/interfaces/user.ts +++ b/src/interfaces/user.ts @@ -24,6 +24,7 @@ export interface StudentUser extends BasicUser { type: "student"; preferredGender?: InstructorGender; demographicInformation?: DemographicInformation; + preferredTopics?: string[]; } export interface TeacherUser extends BasicUser { @@ -52,6 +53,7 @@ export interface DeveloperUser extends BasicUser { type: "developer"; preferredGender?: InstructorGender; demographicInformation?: DemographicInformation; + preferredTopics?: string[]; } export interface CorporateInformation { diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index dac35526..e94d4026 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -16,7 +16,7 @@ import {CorporateUser, EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from " import CountrySelect from "@/components/Low/CountrySelect"; import {shouldRedirectHome} from "@/utils/navigation.disabled"; import moment from "moment"; -import {BsCamera} from "react-icons/bs"; +import {BsCamera, BsQuestionCircleFill} from "react-icons/bs"; import {USER_TYPE_LABELS} from "@/resources/user"; import useGroups from "@/hooks/useGroups"; import useUsers from "@/hooks/useUsers"; @@ -31,6 +31,8 @@ import ModuleLevelSelector from "@/components/Medium/ModuleLevelSelector"; import Select from "@/components/Low/Select"; import {InstructorGender} from "@/interfaces/exam"; import {capitalize} from "lodash"; +import TopicModal from "@/components/Medium/TopicModal"; +import {v4} from "uuid"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -90,6 +92,9 @@ function UserProfile({user, mutateUser}: Props) { const [preferredGender, setPreferredGender] = useState( user.type === "student" || user.type === "developer" ? user.preferredGender || "varied" : undefined, ); + const [preferredTopics, setPreferredTopics] = useState( + user.type === "student" || user.type === "developer" ? user.preferredTopics : undefined, + ); const [position, setPosition] = useState(user.type === "corporate" ? user.demographicInformation?.position : undefined); const [corporateInformation, setCorporateInformation] = useState(user.type === "corporate" ? user.corporateInformation : undefined); @@ -99,6 +104,8 @@ function UserProfile({user, mutateUser}: Props) { ); const [timezone, setTimezone] = useState(user.demographicInformation?.timezone || moment.tz.guess()); + const [isPreferredTopicsOpen, setIsPreferredTopicsOpen] = useState(false); + const {groups} = useGroups(); const {users} = useUsers(); @@ -156,6 +163,7 @@ function UserProfile({user, mutateUser}: Props) { profilePicture, desiredLevels, preferredGender, + preferredTopics, demographicInformation: { phone, country, @@ -350,18 +358,41 @@ function UserProfile({user, mutateUser}: Props) { {preferredGender && ["developer", "student"].includes(user.type) && ( <> -
- - (value ? setPreferredGender(value.value as InstructorGender) : null)} + options={[ + {value: "male", label: "Male"}, + {value: "female", label: "Female"}, + {value: "varied", label: "Varied"}, + ]} + /> +
+
+ + +
+ + + setIsPreferredTopicsOpen(false)} + selectTopics={setPreferredTopics} + initialTopics={preferredTopics || []} + /> )} diff --git a/src/resources/topics.ts b/src/resources/topics.ts new file mode 100644 index 00000000..424dbbbf --- /dev/null +++ b/src/resources/topics.ts @@ -0,0 +1,55 @@ +const topics = [ + "Education", + "Technology", + "Environment", + "Health and Fitness", + "Globalization", + "Engineering", + "Work and Careers", + "Travel and Tourism", + "Culture and Traditions", + "Social Issues", + "Arts and Entertainment", + "Climate Change", + "Social Media", + "Sustainable Development", + "Health Care", + "Immigration", + "Artificial Intelligence", + "Consumerism", + "Online Shopping", + "Energy", + "Oil and Gas", + "Poverty and Inequality", + "Cultural Diversity", + "Democracy and Governance", + "Mental Health", + "Ethics and Morality", + "Population Growth", + "Science and Innovation", + "Poverty Alleviation", + "Cybersecurity and Privacy", + "Human Rights", + "Social Justice", + "Food and Agriculture", + "Cyberbullying and Online Safety", + "Linguistic Diversity", + "Urbanization", + "Artificial Intelligence in Education", + "Youth Empowerment", + "Disaster Management", + "Mental Health Stigma", + "Internet Censorship", + "Sustainable Fashion", + "Indigenous Rights", + "Water Scarcity", + "Social Entrepreneurship", + "Privacy in the Digital Age", + "Sustainable Transportation", + "Gender Equality", + "Automation and Job Displacement", + "Digital Divide", + "Education Inequality", +]; + +export default topics;