rqa5hb Recruitment Form

src/@types/recruitment-form.d.ts

@@ -0,0 +1,16 @@
+declare module 'recruitment-form' {
+  export interface RecruitmentForm {
+    postingId: number;
+    firstName: string;
+    lastName: string;
+    emailAddress: string;
+    term: string;
+    termType: string;
+    program: string;
+    inPerson: boolean;
+    whyJoin: string;
+    technicalQ: string;
+    additionalInfo: string;
+    resumeLink: string;
+  }
+}

src/api/application.ts

@@ -0,0 +1,21 @@
+import { Server } from "./server"
+import { AxiosResponse } from 'axios';
+
+const upload = (server:Server)  => 
+(formData:FormData):Promise<AxiosResponse<string>> => 
+server.post('/api/upload/resume',
+    formData, {
+        headers: {
+            'Content-Type':'multipart/form-data'
+        }
+    }
+)
+
+const apply = (server: Server) =>
+(body: Object):Promise<AxiosResponse<string>> => 
+    server.post('/api/applications', body)
+
+export default (server:Server) => ({
+    upload: upload(server),
+    apply: apply(server)
+})

src/api/index.ts

@@ -1,12 +1,14 @@
 import newsletter from './newsletter';
 import postings from './postings';
-import server from './server';
+import server, { serverDashboard } from './server';
 import sponsors from './sponsors';
 import teams from './teams';
+import application from './application'
 
 export default {
   postings: postings(server),
   teams: teams(server),
   sponsors: sponsors(server),
-  newsletter: newsletter(server)
+  newsletter: newsletter(server),
+  application: application(serverDashboard)
 };

src/api/recruitment-form.ts

@@ -0,0 +1,10 @@
+import { Server } from 'server';
+import { AxiosResponse } from 'axios';
+import { RecruitmentForm } from 'recruitment-form';
+
+const getRecruitmentForm = (server: Server) => (): Promise<AxiosResponse<RecruitmentForm>> => server.get(`/api/recruitment`);
+
+
+export default (server: Server) => ({
+    getRecruitmentForm: getRecruitmentForm(server),
+});

src/api/server.ts

@@ -6,6 +6,8 @@ const devHostName = window.location.hostname; // Retrieves the current device's
 
 const baseUrl = process.env.NODE_ENV === 'development' ? `http://${devHostName}:9000` : process.env.REACT_APP_BASE_URL
 
+const baseUrlDashboard = process.env.NODE_ENV === 'production' ? '' : 'http://localhost:9001' 
+
 export const server = axios.create({
   baseURL: baseUrl,
   timeout: 10000,
@@ -15,5 +17,11 @@ export const server = axios.create({
   },
 });
 
-export default server;
+export const serverDashboard = axios.create({
+  baseURL: baseUrlDashboard,
+  timeout:10000,
+  withCredentials:false,
+})
+
+export default server 
 export type Server = typeof server;

src/components/DropDownList/DropDownList.tsx

@@ -0,0 +1,137 @@
+import React, { useMemo, useState, useCallback, FC } from 'react';
+import styled, { css } from 'styled-components';
+
+import ListOpenSvg from './assets/list-open.svg';
+import ListClosedSvg from './assets/list-closed.svg';
+import UnstyledListItem from './ListItem';
+
+interface DropDownListProps {
+  className?: string;
+  items: string[];
+  title: string;
+  handleClickItem: (value: string) => void;
+  value: string;
+  valid: boolean | null;
+  required: boolean;
+}
+
+const ListItem = styled(UnstyledListItem)``;
+
+const ListOpenIcon = styled.img.attrs({
+  src: ListOpenSvg,
+})``;
+
+const ListClosedIcon = styled.img.attrs({
+  src: ListClosedSvg,
+})``;
+
+const Container = styled(({ valid, required, ...props }) => <div {...props} />)`
+  overflow: visible;
+  z-index: 10;
+  ${'' /** Hides the top of the list under the List name container */}
+  background-color: #fff;
+  width: 100%;
+  border: 1px solid #c4c4c4;
+  border-radius: 5px;
+  border: 1px solid
+    ${({ valid, required }): string =>
+      valid === false && required === true ? 'red' : '#c4c4c4'};
+`;
+
+const ListNameContainer = styled.div`
+  border-radius: 10px;
+  background-color: #fff;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+
+  cursor: pointer;
+`;
+
+const TitleText = styled.div`
+  font: 14px IBM Plex Sans;
+  color: #00000080;
+`;
+
+// Good practice to not pass props like "open" to a root element
+const List = styled(({ open, ...props }) => <ul {...props} />)`
+  border-radius: 5px;
+
+  margin-top: -20px;
+  padding-top: 8px;
+  position: relative;
+  width: calc(100% - 10px);
+  margin-left: 6px;
+  padding-inline-start: 0;
+
+  ${
+    '' /* Cannot Use Transitions with "height: auto", so this calculates the height of the list based on the number of children */
+  }
+  ${'' /* ${({ open, children }) => (open ? css` */}
+    ${({ open }) =>
+    open
+      ? css`
+          ${
+            '' /* height: calc(37px * ${Children.toArray(children).length} ); */
+          }
+          ${
+            '' /* This does not transition, but the above does not work well with text wrapping */
+          }
+      ${'' /*  TODO: This needs to get relooked at when I have more time */}
+      height: max-content;
+        `
+      : css`
+          height: 0px;
+        `}
+    overflow-y: hidden;
+
+  transition: height 0.15s;
+`;
+
+const DropDownList: FC<DropDownListProps> = ({
+  className /* Allows for external styles to be applied to the component using
+                  the styled components library
+                  className prop needs to be passed to the parent JSX element */,
+  items /* an Array of items to be displayed in the selector dropdown */,
+  title /* Name of the drop down list */,
+  handleClickItem,
+  value,
+  valid,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState('')
+
+  const handleOpenToggle = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+
+  const handleClickItem2 = useCallback(
+    (value: string) => {
+      setSelected(value)
+      handleClickItem(value);
+      setOpen(!open);
+    },
+    [handleClickItem, open, setOpen],
+  );
+
+  const ListStateIcon = useMemo(() => (open ? ListOpenIcon : ListClosedIcon), [
+    open,
+  ]);
+  const listItems = items.map((item) => (
+    <ListItem text={item} key={item} onClick={handleClickItem2} />
+  ));
+
+  return (
+    <Container>
+      <ListNameContainer onClick={handleOpenToggle} className={className}>
+        <TitleText>{selected!== '' ? selected : title}</TitleText>
+        <ListStateIcon />
+      </ListNameContainer>
+      <List open={open}>{listItems}</List>
+    </Container>
+  );
+};
+
+export default DropDownList;

src/components/DropDownList/ListItem.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+interface ListItemProps {
+  className?: string;
+  text: string;
+  onClick: (value: string) => void;
+}
+
+const Container = styled.li`
+  list-style: none;
+  border-top: 0.75px solid rgba(214, 220, 227, 0.5);
+  padding-left: 16px;
+  padding-right: 16px;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  cursor: pointer;
+`;
+
+const Text = styled.div`
+  font: 14px IBM Plex Sans;
+  color: #000;
+`;
+
+const ListItem: FC<ListItemProps> = ({ className, text, onClick }) => (
+  <Container className={className} onClick={() => onClick(text)}>
+    <Text>{text}</Text>
+  </Container>
+);
+
+export default ListItem;

src/components/DropDownList/index.ts

@@ -0,0 +1,3 @@
+import DropDownList from './DropDownList'
+
+export default DropDownList

src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+/*
+interface FileUploadProps{
+  handleFileUpload: (value: string) => void;
+}
+*/
+
+const FileUpload = ({
+  name,
+  multiple,
+  handleFileUpload,
+}: {
+  name: string;
+  multiple: boolean;
+  handleFileUpload: (value:File) => void;
+}) => {
+  const FileInput = styled.input`
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+  `;
+
+  const Label = styled.label`
+    display: grid;
+    padding: 20px 10px;
+    cursor: pointer;
+    font-family: IBM Plex Sans;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 140%;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    border: 1.2px dashed #c4c4c4;
+    box-sizing: border-box;
+    border-radius: 6px;
+    background: #ffffff;
+  `;
+  let [fileName, setFileName] = useState("")
+
+  return (
+    <div>
+      <Label htmlFor="file">
+        <span>
+          <svg
+            width="24"
+            height="33"
+            viewBox="0 0 24 33"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.08325 32.75H14.9166V15.25H23.6666L11.9999 0.666687L0.333252 15.25H9.08325V32.75Z"
+              fill="black"
+              fillOpacity="0.4"
+            />
+          </svg>
+        </span>
+        <span>
+          <svg
+            width="60"
+            height="27"
+            viewBox="0 0 60 27"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M53.3333 20.5H6.66659V0.083313H0.833252V20.5C0.833252 23.7171 3.4495 26.3333 6.66659 26.3333H53.3333C56.5503 26.3333 59.1666 23.7171 59.1666 20.5V0.083313H53.3333V20.5Z"
+              fill="black"
+              fillOpacity="0.4"
+            />
+          </svg>
+        </span>
+        <p style={{ margin: 0 }}>
+          <strong>Choose a file</strong> or drag it here.
+        </p>
+      </Label>
+      <FileInput
+        id="file"
+        type="file"
+        name={name}
+        accept={'application/pdf'}
+        onChange={(e) => {
+            if(e.target.files != null){
+              // update file in state
+              handleFileUpload(e.target.files[0])
+              setFileName(e.target.files[0].name)
+            }
+          }
+        }
+
+        multiple={multiple}
+      />
+      {fileName && <p>{fileName}</p>}
+    </div>
+  );
+};
+
+export default FileUpload;

src/components/FileUpload/index.tsx

@@ -0,0 +1,3 @@
+import FileUpload from "./FileUpload";
+
+export default FileUpload;