Add profile edit page (#1029)

Author: rhysyngsun

frontends/mit-open/src/page-components/Profile/CertificateChoice.tsx

@@ -0,0 +1,123 @@
+import React from "react"
+
+import {
+  styled,
+  Grid,
+  Container,
+  ChoiceBox,
+  RadioChoiceField,
+} from "ol-components"
+import {
+  CertificateDesiredEnum,
+  CertificateDesiredEnumDescriptions,
+} from "api/v0"
+
+import type { ProfileFieldUpdateProps, ProfileFieldStateHook } from "./types"
+
+const CHOICES = [
+  CertificateDesiredEnum.Yes,
+  CertificateDesiredEnum.No,
+  CertificateDesiredEnum.NotSureYet,
+].map((value) => ({
+  value,
+  label: CertificateDesiredEnumDescriptions[value],
+}))
+
+type State = CertificateDesiredEnum | ""
+type Props = ProfileFieldUpdateProps<"certificate_desired">
+
+const useCertificateChoiceState: ProfileFieldStateHook<
+  "certificate_desired"
+> = (value, onUpdate) => {
+  const [certificateDesired, setCertificateDesired] = React.useState<State>(
+    value || "",
+  )
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCertificateDesired(() => {
+      return event.target.value as CertificateDesiredEnum
+    })
+  }
+
+  React.useEffect(() => {
+    onUpdate("certificate_desired", certificateDesired)
+  }, [certificateDesired, onUpdate])
+
+  return [certificateDesired, handleChange]
+}
+
+const CertificateChoiceBoxField: React.FC<Props> = ({
+  value,
+  label,
+  onUpdate,
+}) => {
+  const [certificateDesired, handleChange] = useCertificateChoiceState(
+    value,
+    onUpdate,
+  )
+
+  return (
+    <>
+      {label}
+      <Container maxWidth="md">
+        <Grid
+          container
+          spacing={2}
+          justifyContent="center"
+          columns={{
+            md: 12,
+            xs: 4,
+          }}
+        >
+          {Object.values(CertificateDesiredEnum).map((value, index) => {
+            const checked = value === certificateDesired
+            return (
+              <Grid item xs={4} key={index}>
+                <ChoiceBox
+                  type="radio"
+                  label={CertificateDesiredEnumDescriptions[value]}
+                  value={value}
+                  onChange={handleChange}
+                  checked={checked}
+                />
+              </Grid>
+            )
+          })}
+        </Grid>
+      </Container>
+    </>
+  )
+}
+
+const RadioContainer = styled.div(({ theme }) => ({
+  [theme.breakpoints.up("md")]: {
+    "& .MuiFormGroup-root": {
+      flexDirection: "row",
+    },
+  },
+}))
+
+const CertificateRadioChoiceField: React.FC<Props> = ({
+  value,
+  label,
+  onUpdate,
+}) => {
+  const [certificateDesired, handleChange] = useCertificateChoiceState(
+    value,
+    onUpdate,
+  )
+
+  return (
+    <RadioContainer>
+      <RadioChoiceField
+        name="certificate_desired"
+        choices={CHOICES}
+        label={label}
+        value={certificateDesired}
+        onChange={handleChange}
+      />
+    </RadioContainer>
+  )
+}
+
+export { CertificateChoiceBoxField, CertificateRadioChoiceField }

frontends/mit-open/src/page-components/Profile/EducationLevelChoice.tsx

@@ -0,0 +1,48 @@
+import React from "react"
+
+import {
+  Select,
+  MenuItem,
+  FormControl,
+  FormLabel,
+  SelectChangeEvent,
+} from "ol-components"
+import { CurrentEducationEnum, CurrentEducationEnumDescriptions } from "api/v0"
+
+import { ProfileFieldUpdateProps } from "./types"
+
+const EducationLevelSelect: React.FC<
+  ProfileFieldUpdateProps<"current_education">
+> = ({ label, value, onUpdate }) => {
+  const [educationLevel, setEducationLevel] = React.useState<
+    CurrentEducationEnum | ""
+  >(value || "")
+
+  const handleChange = (event: SelectChangeEvent<typeof educationLevel>) => {
+    setEducationLevel(event.target.value as CurrentEducationEnum)
+  }
+
+  React.useEffect(() => {
+    onUpdate("current_education", educationLevel)
+  }, [educationLevel, onUpdate])
+
+  return (
+    <FormControl component="fieldset" fullWidth>
+      <FormLabel component="label">{label}</FormLabel>
+      <Select displayEmpty onChange={handleChange} value={educationLevel}>
+        <MenuItem disabled value="">
+          <em>Please select</em>
+        </MenuItem>
+        {Object.values(CurrentEducationEnum).map((value, index) => {
+          return (
+            <MenuItem value={value} key={index}>
+              {CurrentEducationEnumDescriptions[value]}
+            </MenuItem>
+          )
+        })}
+      </Select>
+    </FormControl>
+  )
+}
+
+export { EducationLevelSelect }

frontends/mit-open/src/page-components/Profile/GoalsChoice.tsx

@@ -0,0 +1,137 @@
+import React from "react"
+import {
+  styled,
+  Checkbox,
+  CheckboxChoiceBoxField,
+  ChoiceBoxGridProps,
+  FormLabel,
+  FormControl,
+} from "ol-components"
+import { GoalsEnum, GoalsEnumDescriptions, PatchedProfileRequest } from "api/v0"
+
+import type { ProfileFieldUpdateProps, ProfileFieldUpdateFunc } from "./types"
+
+const CHOICES = [
+  {
+    value: GoalsEnum.CareerGrowth,
+    label: GoalsEnumDescriptions[GoalsEnum.CareerGrowth],
+    description: "Looking for career growth through new skills & certification",
+  },
+  {
+    value: GoalsEnum.SupplementalLearning,
+    label: GoalsEnumDescriptions[GoalsEnum.SupplementalLearning],
+    description: "Additional learning to integrate with degree work",
+  },
+  {
+    value: GoalsEnum.JustToLearn,
+    label: GoalsEnumDescriptions[GoalsEnum.JustToLearn],
+    description: "I just want more knowledge",
+  },
+]
+
+type State = GoalsEnum[]
+
+const useGoalsChoice = (
+  value: PatchedProfileRequest["goals"],
+  onUpdate: ProfileFieldUpdateFunc<"goals">,
+): [State, React.ChangeEventHandler] => {
+  const [goals, setGoals] = React.useState<State>(value || [])
+
+  const handleToggle = (event: React.SyntheticEvent) => {
+    setGoals((prevGoals) => {
+      const target = event.target as HTMLInputElement
+      if (target.checked) {
+        return [...prevGoals, target.value as GoalsEnum]
+      } else {
+        return prevGoals.filter((goal) => goal !== target.value)
+      }
+    })
+  }
+
+  React.useEffect(() => {
+    onUpdate("goals", goals)
+  }, [goals, onUpdate])
+
+  return [goals, handleToggle]
+}
+
+function GoalsChoiceBoxField({
+  value,
+  label,
+  gridProps,
+  gridItemProps,
+  onUpdate,
+}: ProfileFieldUpdateProps<"goals"> & ChoiceBoxGridProps) {
+  const [goals, handleToggle] = useGoalsChoice(value, onUpdate)
+
+  return (
+    <CheckboxChoiceBoxField
+      label={label}
+      choices={CHOICES}
+      values={goals}
+      onChange={handleToggle}
+      gridProps={Object.assign(
+        {
+          justifyContent: "center",
+          columns: {
+            lg: 12,
+            xs: 4,
+          },
+          maxWidth: "md",
+          margin: "0 auto",
+        },
+        gridProps,
+      )}
+      gridItemProps={Object.assign({ xs: 4 }, gridItemProps)}
+    />
+  )
+}
+
+const CheckboxContainer = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  flexWrap: "wrap",
+  "& label": {
+    flexShrink: 0,
+  },
+  [theme.breakpoints.up("md")]: {
+    display: "flex",
+    flexDirection: "row",
+    "& label": {
+      marginRight: theme.spacing(3),
+    },
+  },
+}))
+
+function GoalsCheckboxChoiceField({
+  label,
+  value,
+  onUpdate,
+}: ProfileFieldUpdateProps<"goals">) {
+  const [goals, handleToggle] = useGoalsChoice(value, onUpdate)
+
+  return (
+    <FormControl component="fieldset" sx={{ width: "100%" }}>
+      <FormLabel component="legend" sx={{ width: "100%" }}>
+        {label}
+      </FormLabel>
+      <CheckboxContainer>
+        {CHOICES.map((choice) => {
+          return (
+            <label key={choice.value}>
+              <Checkbox
+                edge="start"
+                checked={goals.indexOf(choice.value) !== -1}
+                onChange={handleToggle}
+                value={choice.value}
+                disableRipple
+              />
+              {choice.label}
+            </label>
+          )
+        })}
+      </CheckboxContainer>
+    </FormControl>
+  )
+}
+export { GoalsChoiceBoxField, GoalsCheckboxChoiceField }