begin building the recruiter flow

Author: devksingh4

clientv2/src/components/ProfileViewer/LinkProfileAttribute.tsx

@@ -21,7 +21,12 @@ export const LinkProfileAttribute: React.FC<LinkProfileAttributeProps> = ({
   return (
     <Group>
       {editable ? (
-        <TextInput label={name} value={url} onChange={(e) => handleInputChange(e.target.value)} style={{width: '100%'}}/>
+        <TextInput
+          label={name}
+          value={url}
+          onChange={(e) => handleInputChange(e.target.value)}
+          style={{ width: '100%' }}
+        />
       ) : (
         <>
           <ThemeIcon color="blue" size={20} radius="xl">

clientv2/src/components/ProfileViewer/options.ts

@@ -57,7 +57,7 @@ export const institutionOptions = [
   ...otherInstitutionOptions.sort(),
 ];
 
-const csPlusXMajors = [
+export const csPlusXMajors = [
   'Computer Science + Animal Sciences',
   'Computer Science + Crop Sciences',
   'Computer Science + Education',
@@ -76,14 +76,9 @@ const csPlusXMajors = [
   'Statistics & Computer Science',
 ];
 
-const commonMajors = [
-  'Computer Science',
-  'Computer Engineering',
-  'Electrical Engineering',
-  'Mathematics',
-];
+export const commonMajors = ['Computer Engineering', 'Electrical Engineering', 'Mathematics'];
 
-const otherMajors = [
+export const otherMajors = [
   'Accountancy',
   'Advertising',
   'Aerospace Engineering',
@@ -183,19 +178,19 @@ export type DegreeLevel = (typeof degreeOptions)[number];
 
 export const majorOptions: Record<DegreeLevel, any> = {
   "Associate's": [
-    { group: 'Common Majors', items: commonMajors },
+    { group: 'Common Majors', items: ['Computer Science', ...commonMajors] },
     { group: 'Other Majors', items: otherMajors },
   ],
   "Bachelor's": [
-    { group: 'Common Majors', items: [...commonMajors, ...csPlusXMajors] },
+    { group: 'Common Majors', items: ['Computer Science', ...commonMajors, ...csPlusXMajors] },
     { group: 'Other Majors', items: otherMajors },
   ],
   "Master's (Thesis)": [
-    { group: 'Common Majors', items: commonMajors },
+    { group: 'Common Majors', items: ['Computer Science', ...commonMajors] },
     { group: 'Other Majors', items: otherMajors },
   ],
   "Master's (Non-Thesis)": [
-    { group: 'Common Majors', items: commonMajors },
+    { group: 'Common Majors', items: ['Computer Science', ...commonMajors] },
     { group: 'Other Majors', items: otherMajors },
   ],
   PhD: [

clientv2/src/components/SearchProfiles/index.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Button, Grid, Group, MultiSelect, NumberInput, Stack, Tooltip } from '@mantine/core';
+import { csPlusXMajors, degreeOptions, majorOptions } from '../ProfileViewer/options';
+import { IconSearch } from '@tabler/icons-react';
+
+interface DegreeFilterProps {
+  onFilter: CallableFunction;
+}
+
+export interface Filters {
+  degreeTypes: string[];
+  gpa?: number;
+  graduationYears: string[];
+  majors: string[];
+  skills?: string[];
+}
+
+const DegreeFilter: React.FC<DegreeFilterProps> = ({ onFilter }) => {
+  const [degreeTypes, setDegreeType] = useState<string[]>([]);
+  const [graduationYears, setGraduationYears] = useState<string[]>([]);
+  const [majors, setMajors] = useState<string[]>([]);
+  const [gpa, setGpa] = useState<number>(3.0);
+
+  const currentYear = new Date().getFullYear();
+  const validGradYears: string[] = [
+    currentYear - 1,
+    currentYear,
+    currentYear + 1,
+    currentYear + 2,
+    currentYear + 3,
+    currentYear + 4,
+    currentYear + 5,
+  ].map((x) => x.toString());
+
+  const handleFilter = () => {
+    const filters: Filters = {
+      degreeTypes,
+      gpa,
+      graduationYears,
+      majors,
+    };
+    onFilter(filters);
+  };
+
+  const selectAlCsMajors = () => {
+    setMajors(['Computer Science', ...csPlusXMajors]);
+  };
+
+  const SelectAllCSButton = () => (
+    <Tooltip label="Selects Computer Science and CS + X majors.">
+      <Button onClick={selectAlCsMajors} fullWidth mt="xs">
+        Select All CS Majors
+      </Button>
+    </Tooltip>
+  );
+
+  return (
+    <Stack>
+      <MultiSelect
+        label="Degree Level"
+        placeholder="Select degree level"
+        data={degreeOptions}
+        value={degreeTypes}
+        onChange={setDegreeType}
+        clearable
+      />
+      <NumberInput
+        label="GPA (Minimum, Inclusive)"
+        min={0.0}
+        max={4.0}
+        clampBehavior="strict"
+        allowNegative={false}
+        decimalScale={2}
+        value={gpa}
+        hideControls
+        onChange={(e) => setGpa(parseFloat(e as string))}
+      />
+      <MultiSelect
+        label="Graduation Year"
+        placeholder="Select graduation years"
+        data={validGradYears}
+        value={graduationYears}
+        onChange={setGraduationYears}
+      />
+      <Grid align="flex-end">
+        <Grid.Col span={9}>
+          <MultiSelect
+            label="Major"
+            placeholder="Select majors"
+            data={majorOptions["Bachelor's"]}
+            value={majors}
+            onChange={setMajors}
+            clearable
+          />
+        </Grid.Col>
+        <Grid.Col span={3}>
+          <SelectAllCSButton />
+        </Grid.Col>
+      </Grid>
+      <Group>
+        <Button color="green" leftSection={<IconSearch size={14} />} onClick={handleFilter}>
+          Search
+        </Button>
+      </Group>
+    </Stack>
+  );
+};
+
+export default DegreeFilter;

clientv2/src/pages/recruiter/RecruiterHome.page.tsx

@@ -1,25 +1,61 @@
-import { Button, Title } from '@mantine/core';
+import { useState } from 'react';
+import { Title, Container } from '@mantine/core';
 import { useAuth } from '@/components/AuthContext';
 import { HeaderNavbar } from '@/components/Navbar';
+import DegreeFilter, { Filters } from '@/components/SearchProfiles';
+import { useApi } from '@/util/api';
+import { notifications } from '@mantine/notifications';
+import FullScreenLoader from '@/components/AuthContext/LoadingScreen';
 
+
+function showErrorNotification(title?: string) {
+  notifications.show({
+    title: title || "Failed to Fetch Profiles",
+    message: "Please try again or contact the ACM@UIUC Corporate Team.",
+    color: 'red'
+  })
+}
 export function RecruiterHomePage() {
-  const { userData, getToken } = useAuth();
-  const [lastName, firstName] = userData?.name?.split(',') as string[];
-  const doAuthStuff = async () => {
-    if (!userData) {
-      return;
+  const { userData } = useAuth();
+  const [loading, setLoading] = useState<boolean>(false);
+  const api = useApi();
+
+  const handleFilter = async (filters: Filters) => {
+    let response;
+    try {
+      setLoading(true);
+      response = await api.post("/recruiter/search", filters)
+    } catch {
+      setLoading(false);
+      return showErrorNotification()
+    }
+    if (response.status != 200) {
+      setLoading(false);
+      return showErrorNotification();
     }
-    console.log(await getToken());
+    console.log(response);
+    setLoading(false);
   };
+  if (loading) {
+    return <FullScreenLoader />
+  }
   return (
     <>
       <HeaderNavbar userData={userData} />
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <Title>
-          Hello {firstName} {lastName}!
-        </Title>
-        <Button onClick={doAuthStuff}>Do Auth Stuff</Button>
-      </div>
+      <Container>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '20px',
+          }}
+        >
+          <Title order={1}>Search Resume Book</Title>
+        </div>
+        <DegreeFilter onFilter={handleFilter} />
+        {/* Render filtered data here based on the filters state */}
+      </Container>
     </>
   );
 }