Hello World!
-Foo to the barz
-
+
+
+ (
+
+
+ );
+};
diff --git a/src/components/CandidatePage/CandidatePage.tsx b/src/components/CandidatePage/CandidatePage.tsx
new file mode 100644
index 0000000..ae07b07
--- /dev/null
+++ b/src/components/CandidatePage/CandidatePage.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router";
+import { Spinner, SpinnerSize } from "@fluentui/react";
+import { mergeStyleSets, DocumentCardActions } from "@fluentui/react";
+
+import { useLoader } from "../../hooks/hooks";
+import { useApplicants } from "../../hooks/useApplicants";
+import { Registration } from "../Registration/Registration";
+import { StatusForm } from "./StatusForm";
+import { InfoForm } from "./InfoForm";
+import { InterviewForm } from "./InterviewForm";
+import { RouteParams } from "../Event";
+
+export const CandidatePage: React.FC = () => {
+ const [edit, setEdit] = useState
+ {defaultRender({
+ ...props,
+ styles: { root: { fontSize: 16 } },
+ })}
+
+ )}
+ />
+
+ setEdit(!edit),
+ },
+ ]}
+ />
+
+ {selectedApplicant.fullName}
+{selectedApplicant.eventName}
+
+
+
+ );
+};
+
+const contentStyles = mergeStyleSets({
+ container: {
+ width: "auto",
+ margin: "1em 2em",
+ },
+});
diff --git a/src/components/CandidatePage/InfoForm.tsx b/src/components/CandidatePage/InfoForm.tsx
new file mode 100644
index 0000000..3080c46
--- /dev/null
+++ b/src/components/CandidatePage/InfoForm.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { Stack, mergeStyleSets, DefaultButton } from "@fluentui/react";
+import { useBoolean } from "@fluentui/react-hooks";
+
+import { IApplicantDetailsFromBackEnd } from "../../models/IApplicant";
+import { preferredTimeReformer } from "../../utils/stringReformers";
+import { useApplicants } from "../../hooks/useApplicants";
+import ModalWindow from "../ModalWindow";
+
+const modalText = `There is no candidate’s CV`;
+export const InfoForm: React.FC<{ candidat: IApplicantDetailsFromBackEnd }> = ({
+ candidat,
+}) => {
+ const { cvDownload } = useApplicants();
+ const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(
+ false
+ );
+ const download = () =>
+ cvDownload(candidat.id, candidat.fullName, candidat.primaryTech).then(
+ (res) => {
+ res && showModal();
+ }
+ );
+ return (
+ <>
+
+ {edit ? (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const contentStyles = mergeStyleSets({
+ formWrapper: {
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "stretch",
+ marginTop: "2rem",
+ },
+
+ container: {
+ margin: "3rem auto",
+ },
+
+ input: {
+ backgroundColor: "white",
+ fontSize: "14px",
+ padding: "7px 8px",
+ maxHeight: "32px",
+ color: "rgb(50, 49, 48)",
+ border: "1px solid rgb(96, 94, 92)",
+ borderRadius: "2px",
+ },
+});
diff --git a/src/components/CandidatePage/InterviewForm.tsx b/src/components/CandidatePage/InterviewForm.tsx
new file mode 100644
index 0000000..a9ac777
--- /dev/null
+++ b/src/components/CandidatePage/InterviewForm.tsx
@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from "react";
+import {
+ Stack,
+ PrimaryButton,
+ mergeStyleSets,
+ Spinner,
+ SpinnerSize,
+} from "@fluentui/react";
+import { useForm } from "react-hook-form";
+import {
+ ControlledDropdown,
+ ControlledDatePicker,
+} from "../../hook-form/Controlled";
+import { useInterviews } from "../../hooks/useInterviews";
+import { useApplicants } from "../../hooks/useApplicants";
+import { dateReformer } from "../../utils/stringReformers";
+import { IApplicantDetailsFromBackEnd } from "../../models/IApplicant";
+import ModalWindow from "../ModalWindow";
+import { useBoolean } from "@fluentui/react-hooks";
+import { useLoader } from "../../hooks/hooks";
+
+const time = [
+ {
+ key: "09:00-10:00",
+ text: "09:00-10:00",
+ },
+ {
+ key: "10:00-11:00",
+ text: "10:00-11:00",
+ },
+ {
+ key: "11:00-12:00",
+ text: "11:00-12:00",
+ },
+ {
+ key: "12:00-13:00",
+ text: "12:00-13:00",
+ },
+ {
+ key: "13:00-14:00",
+ text: "13:00-14:00",
+ },
+ {
+ key: "14:00-15:00",
+ text: "14:00-15:00",
+ },
+ {
+ key: "15:00-16:00",
+ text: "15:00-16:00",
+ },
+ {
+ key: "16:00-17:00",
+ text: "16:00-17:00",
+ },
+ {
+ key: "17:00-18:00",
+ text: "17:00-18:00",
+ },
+];
+export const InterviewForm: React.FC<{
+ candidat: IApplicantDetailsFromBackEnd;
+}> = ({ candidat }) => {
+ const {
+ getRoles,
+ getInterviewers,
+ interviewers,
+ createInterviews,
+ checkTimeSlot,
+ } = useInterviews();
+ const { interviewsStatus, selectApplicant } = useApplicants();
+ const [roles, setRoles] = useState();
+ const [interviewer, setInterviewer] = useState([]);
+ const [disabledInterviewer, setDisabledInterviewer] = useState{candidat.fullName}
+{candidat.email}
++ {candidat.phone || "Phone Number"} +
+{candidat.skype}
+{candidat.primaryTech}
+{candidat.country}
+{candidat.city}
++ {preferredTimeReformer(candidat.preferredTime)} +
++ {candidat.summary || "Summary"} +
+ +
+
+
+ {
+ setDisabledInterviewer(false);
+ selectInterviewers(data.key);
+ }}
+ required
+ rules={{ required: "This field is required" }}
+ />
+
+
+ freeTimeSlot(data.key)}
+ required
+ rules={{ required: "This field is required" }}
+ />
+
+
+ filterTime(e)}
+ />
+
+
+
+
+ onSend(candidat.id)}
+ />
+
+
+ );
+};
+
+const contentStyles = mergeStyleSets({
+ formWrapper: {
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "stretch",
+ },
+ title: {
+ margin: "0 2em",
+ },
+ container: {
+ width: "auto",
+ margin: "1em 2em",
+ },
+});
diff --git a/src/components/CandidatePage/StatusForm.tsx b/src/components/CandidatePage/StatusForm.tsx
new file mode 100644
index 0000000..391e16c
--- /dev/null
+++ b/src/components/CandidatePage/StatusForm.tsx
@@ -0,0 +1,165 @@
+import React, { useMemo, useState } from "react";
+import {
+ Stack,
+ ProgressIndicator,
+ mergeStyleSets,
+ IDropdownOption,
+ DefaultButton,
+} from "@fluentui/react";
+import { useForm } from "react-hook-form";
+
+import { ControlledDropdown } from "../../hook-form/Controlled";
+import {
+ AcceptStatus,
+ IApplicantDetailsFromBackEnd,
+ InterviewStatus,
+} from "../../models/IApplicant";
+import { useApplicants } from "../../hooks/useApplicants";
+import { useAuth } from "../../hooks/useAuth";
+import { useIsMountedRef } from "../../hooks/useIsMounted";
+
+const desicion: IDropdownOption[] = [
+ { key: AcceptStatus.Accepted, text: "Accept" },
+ { key: AcceptStatus.Rejected, text: "Reject" },
+];
+
+export const StatusForm: React.FC<{
+ candidat: IApplicantDetailsFromBackEnd;
+}> = ({ candidat }) => {
+ const isMountedRef = useIsMountedRef();
+ const {
+ handleSubmit,
+ formState: { errors },
+ control,
+ } = useForm({
+ reValidateMode: "onSubmit",
+ mode: "all",
+ });
+ const { setStatus } = useApplicants();
+ const { currentUser } = useAuth();
+ const [statusAplicant, setStatusAplicant] = useState(candidat.status);
+ const interviewProcess = useMemo(() => {
+ switch (candidat.interviewProcess) {
+ case InterviewStatus.Registered:
+ return [0, "Registered"];
+ case InterviewStatus.AwaitingHRInterview:
+ return [0.33, "HR Interview"];
+ case InterviewStatus.AwaitingTSInterview:
+ return [0.66, "TS Interview"];
+ case InterviewStatus.WaitingDecision:
+ return [1, "Waiting Desicion"];
+ default:
+ return [0, "Registered"];
+ }
+ }, [candidat.interviewProcess]);
+ const textAlign = useMemo(() => {
+ return interviewProcess[0] <= 0.2
+ ? { textAlign: "left" }
+ : { textAlign: "right" };
+ }, [interviewProcess[0]]);
+
+ const onSave = () => {
+ handleSubmit((data) => {
+ switch (data.status.join()) {
+ case "GREEN":
+ setStatus(`${candidat.id}/accept`).then((response) => {
+ if (isMountedRef.current) {
+ setStatusAplicant(response);
+ }
+ });
+ return;
+ case "RED":
+ setStatus(`${candidat.id}/reject`).then((response) => {
+ if (isMountedRef.current) {
+ setStatusAplicant(response);
+ }
+ });
+ return;
+ default:
+ setStatus(`${candidat.id}/accept`).then((response) => {
+ if (isMountedRef.current) {
+ setStatusAplicant(response);
+ }
+ });
+ return;
+ }
+ })();
+ };
+ return (
+ To set up iterview
++ {(statusAplicant === AcceptStatus.Accepted && "Accepted") || + (statusAplicant === AcceptStatus.Pending && "Pending") || + (statusAplicant === AcceptStatus.Rejected && "Rejected")} +
+
+ {
+ hideModal();
+ }}
+ isBlocking={false}
+ >
+
+
+ );
+};
+
+const dashboardStyles = {
+ root: {
+ boxSizing: "border-box",
+ overflowY: "auto",
+ paddingTop: "5vh",
+ },
+};
+const headStyle = {
+ padding: "10px 0",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-around",
+};
+
+const theme = getTheme();
+const contentStyles = mergeStyleSets({
+ wrapper: {
+ height: "176px",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "space-between",
+ },
+ header: [
+ theme.fonts.xLargePlus,
+ {
+ flex: "1 1 auto",
+ borderTop: `4px solid ${theme.palette.themePrimary}`,
+ color: theme.palette.neutralPrimary,
+ display: "flex",
+ fontWeight: FontWeights.semibold,
+ padding: "1.5rem 12px 14px 24px",
+ },
+ ],
+ header__inner: {
+ display: "flex",
+ justifyContent: "space-between",
+ width: "100%",
+ alignItems: "center",
+ height: "3rem",
+ },
+ body: {
+ overflowY: "hidden",
+ textAlign: "center",
+ paddingBottom: "2rem",
+ },
+ item: {
+ marginBottom: "10px",
+ },
+});
+
+const iconButtonStyles = {
+ root: {
+ color: theme.palette.neutralPrimary,
+ marginLeft: "auto",
+ marginTop: "4px",
+ marginRight: "2px",
+ },
+ rootHovered: {
+ color: theme.palette.neutralDark,
+ },
+};
diff --git a/src/components/DescrioptionEventPage/DescriptionEvenPage.tsx b/src/components/DescrioptionEventPage/DescriptionEvenPage.tsx
new file mode 100644
index 0000000..734b716
--- /dev/null
+++ b/src/components/DescrioptionEventPage/DescriptionEvenPage.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { getTheme, mergeStyleSets } from "@fluentui/react";
+import { IEvent } from "../../models/IEvent";
+import { dateReformer } from "./../../utils/stringReformers";
+const theme = getTheme();
+
+export interface ICardItemProps {
+ cardItem: IEvent;
+}
+const eventImg = require("./../../assets/img/event_img.jpg");
+
+export const DescriptionEventPage: React.FC
+
+
+
+
+ Are you sure?
+ {
+ hideModal();
+ }}
+ />
+
+
+ {
+ signOut();
+ clickHandler();
+ }}
+ text="YES!"
+ className="button"
+ />
+
+
+
+ {name}
+
+
+ );
+};
+
+const contentStyles = mergeStyleSets({
+ eventImg: {
+ paddingTop: 5,
+ width: 520,
+ maxWidth: "100%",
+ height: "auto",
+ display: "block",
+ paddingBottom: 5,
+ float: "left",
+ marginRight: "1rem",
+ "@media(max-width: 875px)": {
+ margin: "0 auto",
+ },
+ },
+ descriptionWrapper: {
+ boxShadow: theme.effects.elevation64,
+ margin: "0 auto",
+ padding: "2rem",
+ "@media(max-width: 875px)": {
+ display: "flex",
+ flexDirection: "column",
+ margin: "0 auto",
+ padding: "0",
+ },
+ },
+ descHeader: {
+ color: "#0276B4",
+ margin: "1rem 0 1rem 0",
+ textAlign: "center"
+ },
+ flexWrapper: {
+ marginTop: "1rem",
+ display: "flex",
+ justifyContent: "space-around"
+ },
+ boxWrapper: {
+ width: "40%",
+ border: "2px solid lightblue",
+ padding: "0 1rem 1rem",
+ textAlign: "center"
+ },
+ "techSpan": {
+ marginRight: "1rem"
+ }
+});
diff --git a/src/components/Event.tsx b/src/components/Event.tsx
new file mode 100644
index 0000000..9089725
--- /dev/null
+++ b/src/components/Event.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router";
+import { Spinner, SpinnerSize } from "@fluentui/react";
+
+import { useLoader } from "../hooks/hooks";
+import { useEvents } from "../hooks/useEvents";
+
+import { DescriptionEventPage } from "./DescrioptionEventPage/DescriptionEvenPage";
+import { Registration } from "./Registration/Registration";
+
+export interface RouteParams {
+ id: string;
+}
+
+const Event: React.FC = () => {
+ const params = useParams+ {props.cardItem.name} +
+
+
+
+
+ Technologies used
+ {props.cardItem?.techs.map((el) => {return {el.name + " "}})} +
+
+ Start date
+ {dateReformer(props.cardItem?.startDate)} +
+
+
+ About event
+ {props.cardItem?.description} +
+
+ )}
+
+ !!el)}
+ />
+ {isPublished && (
+
+
+ loadMore(statePage)}
+ />
+
+
+ );
+};
+
+export default EventList;
diff --git a/src/components/EventList/PublishDialog.tsx b/src/components/EventList/PublishDialog.tsx
new file mode 100644
index 0000000..020203b
--- /dev/null
+++ b/src/components/EventList/PublishDialog.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import {
+ Dialog,
+ DialogType,
+ DialogFooter,
+ PrimaryButton,
+ DefaultButton,
+} from "@fluentui/react";
+import { useId } from "@fluentui/react-hooks";
+
+const dialogStyles = { main: { maxWidth: 500 } };
+const dialogContentProps = {
+ type: DialogType.normal,
+ title: "Attention",
+ closeButtonAriaLabel: "Close",
+ subText: "Are you sure you want to publish this event?",
+};
+interface IDialogProps {
+ hideDialog: boolean;
+ toggleHideDialog: any;
+ apdateData?: Function;
+ dialogContentProps: object;
+ actionType: string;
+}
+export const PublishDialog: React.FunctionComponent
+
+
+
+ Our Corporate Headquarters: 1340 Treat Blvd. Suite 375 Walnut Creek, CA
+ 94597 USA +1 (866) 304-7961
+
+
+ );
+};
+
+const styles = {
+ text: {
+ width: "20%",
+ },
+ socialImg: {
+ width: "20px",
+ },
+ social: {
+ marginBottom: "5px",
+ },
+};
+export default FooterList;
diff --git a/src/components/InterviewPage/DialogFedback.tsx b/src/components/InterviewPage/DialogFedback.tsx
new file mode 100644
index 0000000..15a0ff5
--- /dev/null
+++ b/src/components/InterviewPage/DialogFedback.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import {
+ DefaultButton,
+ Dialog,
+ DialogFooter,
+ DialogType,
+ PrimaryButton,
+ TextField,
+ FontWeights,
+ getTheme,
+ mergeStyleSets,
+} from "@fluentui/react/lib";
+
+export interface IDialogFeedbackProps {
+ content: string;
+ isModalOpen: boolean;
+ hideModal(): void;
+ onSave(feedback: string): void;
+ candidate: string;
+}
+
+const DialogFeedback: React.FC-
+ {Links.map((item, index) => {
+ return (
+
- + + {item.name} + + + ); + })} +
-
+ {social.map((item, index) => {
+ return (
+
-
+
+
+ +
+ );
+ })}
+
+
+ {selectedInterview.candidate.fullName}
+{selectedInterview.event.name}
+
+
+
+
+
+
+
+
+ Interviews
+
+
+ {selectedFeedback && (
+
+ {
+ props.columns[props.columns.length - 1].onRender = (
+ item: IInterviewInCandite
+ ) => (
+
+ );
+ if (props.item.interviewerName === currentUserName) {
+ return defaultRender({
+ ...props,
+ styles: {
+ root: {
+ backgroundColor: "rgb( 190, 230, 190)",
+ ":hover": { backgroundColor: "rgb( 150, 200, 150)" },
+ },
+ },
+ });
+ }
+ return defaultRender(props);
+ }}
+ columns={columns}
+ selectionMode={0}
+ setKey="set"
+ />
+
+
+
+ No scheduled interviews yet
; + } else { + return ( + <> ++ Your interviews, {currentUser.fullName} +
+
+ {
+ showLoader();
+ history.push(`/admin/interviews/${item.id}`);
+ }}
+ onRenderDetailsHeader={(detailsHeaderProps, defaultRender) => (
+ {defaultRender(detailsHeaderProps)}
+ )}
+ onRenderRow={(props, defaultRender) =>
+ defaultRender({
+ ...props,
+ styles: { root: { fontSize: 16 } },
+ })
+ }
+ />
+
+
+ );
+ }
+};
+
+export default InterviewList;
diff --git a/src/components/MainComponent.tsx b/src/components/MainComponent.tsx
new file mode 100644
index 0000000..9582496
--- /dev/null
+++ b/src/components/MainComponent.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import EventList from "./EventList/EventList";
+
+const MainComponent: React.FC = () => {
+ return (
+ <>
+
+ You can start your career
+ with Exadel
+
+
+
+
+
+
+ {props.text}
+
+ New event
+ {
+ hideModal();
+ setCountry([]);
+ }}
+ />
+
+
+
+
+
+ el.name)
+ }
+ rules={{ required: "This field is required" }}
+ options={options.techsNewEvent}
+ styles={textFieldStyles}
+ />
+
+ el.country)),
+ ]) ||
+ []
+ }
+ rules={{ required: "This field is required" }}
+ options={countries}
+ onChange={(_, data) => {
+ setCountry((prev) =>
+ data.selected
+ ? [...prev, data.key]
+ : prev.filter((key) => key !== data.key)
+ );
+ }}
+ styles={textFieldStyles}
+ />
+ el.city)) ||
+ []
+ }
+ rules={{ required: "This field is required" }}
+ errors={errors}
+ options={cities}
+ disabled={!props.cardItem && !country}
+ styles={textFieldStyles}
+ />
+
+
+
+
+
+
+ {!isUploaded ? (
+ <>
+ uploadFile(e)}
+ accept=".jpeg, .png, .gif, .bmp "
+ />
+
+
+ ) : (
+
+ );
+};
+
+const contentStyles = mergeStyleSets({
+ imageContainer: {
+ width: "100%",
+ height: 270,
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ border: "1px dashed rgb(2,118,180)",
+ borderRadius: "5px",
+ boxShadow: "0px 0px 36px -6px rgba(2,118,180, 0.1) inset",
+ "@media(max-width: 725px)": {
+ display: "none",
+ },
+ },
+ inputLabel: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ },
+ imagePreview: {
+ position: "relative",
+ width: "100%",
+ height: "100%",
+ },
+});
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..6376257
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,28 @@
+import { mergeStyles } from "@fluentui/merge-styles";
+import { getTheme } from "@fluentui/react";
+import React from "react";
+
+const titleStyle = {
+ fontSize: "68px",
+ color: getTheme().palette.themePrimary,
+};
+const spanClassTitle = mergeStyles({
+ padding: "1rem 1rem 0.5rem 1rem",
+ fontSize: "25px",
+ // color: getTheme().palette.themeTertiary,
+});
+const spanClass = mergeStyles({
+ fontSize: "20px",
+});
+const className = mergeStyles(spanClass, {
+ padding: "2rem",
+ textAlign: 'center',
+});
+
+export const NotFound = () => (
+
+ {
+ setisUploaded(false);
+ setFileName("");
+ }}
+ />
+
+ )}
+
+
+);
diff --git a/src/components/Registration/Registration.tsx b/src/components/Registration/Registration.tsx
new file mode 100644
index 0000000..225944b
--- /dev/null
+++ b/src/components/Registration/Registration.tsx
@@ -0,0 +1,403 @@
+import React, { useEffect, useState, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import {
+ ControlledTextField,
+ ControlledDropdown,
+ ControlledInputUpload,
+} from "../../hook-form/Controlled";
+import {
+ Text,
+ PrimaryButton,
+ ITextFieldStyleProps,
+ ITextFieldStyles,
+ mergeStyleSets,
+ IDropdownOption,
+ IDropdownStyleProps,
+ IDropdownStyles,
+ Checkbox,
+} from "@fluentui/react";
+import {
+ IApplicant,
+ IApplicantDetailsFromBackEnd,
+} from "../../models/IApplicant";
+import { useBoolean } from "@fluentui/react-hooks";
+import ModalWindow from "../ModalWindow";
+import { useApplicants } from "../../hooks/useApplicants";
+import { useOptions } from "../../hooks/useOptions";
+import { IOptionsRegistration } from "../../models/Forms/IOptions";
+import { ILocationFromBackEnd } from "../../models/ILocation";
+import { ITech } from "../../models/IEvent";
+
+const registrationPattern: {
+ name: RegExp;
+ email: RegExp;
+ phoneNumber: RegExp;
+} = {
+ name: /^\D+\s\D+$/i,
+ email: /^[-a-z0-9!#$%&'*+/=?^_`{|}~]+(\.[-a-z0-9!#$%&'*+/=?^_`{|}~]+)*@([a-z0-9]([-a-z0-9]{0,61}[a-z0-9])?\.)*(aero|arpa|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel|[a-z][a-z])$/i,
+ phoneNumber: /\W\d+/gi,
+};
+
+export const Registration: React.FC<{
+ name?: string;
+ candidatePage?: boolean;
+ candidat?: IApplicantDetailsFromBackEnd;
+ techs?: ITech[];
+}> = (props) => {
+ const [response, setResponse] = useState404
+We are sorry, the page you requested cannot be found.
+The URL may be misspelled or the page you're looking for is no longer available.
+{props.name}
+
+
+
+
+
+ {
+ const curr = options.locations.find((el) => el.name === data.key);
+ setCountry(curr);
+ }}
+ styles={textFieldStyles}
+ className={contentStyles.margin}
+ />
+
+
+
+
+
+ Feedback
+
+
+
+ Feedback
+
+
+
+
+
+ Welcome, User!
+ TS specialist +
+
+
+
+ Internship JS&Java
+
+
+
+
+ Interview
+
+
+
+ {props.children}
+
+ );
+};
+
+export default Wrapper;
diff --git a/src/components/UserCircle/UserCircle.tsx b/src/components/UserCircle/UserCircle.tsx
new file mode 100644
index 0000000..cbe7b0e
--- /dev/null
+++ b/src/components/UserCircle/UserCircle.tsx
@@ -0,0 +1,20 @@
+import { mergeStyles } from "@fluentui/merge-styles";
+import React from "react";
+
+const UserCircle = ({ initials }) => (
+ {initials}
+);
+
+const userCircle = mergeStyles({
+ borderRadius: "50%",
+ height: 40,
+ width: 40,
+ backgroundColor: "rgba(40,40,255,.25)",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ fontSize: "1em",
+ fontWeight: 600,
+});
+
+export default UserCircle;
diff --git a/src/components/applicant-list/AllApplicantListFilter.tsx b/src/components/applicant-list/AllApplicantListFilter.tsx
new file mode 100644
index 0000000..75ace94
--- /dev/null
+++ b/src/components/applicant-list/AllApplicantListFilter.tsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from "react";
+import { useMemo } from "react";
+
+import { ControlledDropdown } from "../../hook-form/Controlled";
+import { useForm } from "react-hook-form";
+import { IFilterDropdownItem } from "../Filter/Models";
+import {
+ IStackStyles,
+ IDropdownStyles,
+ Stack,
+ PrimaryButton,
+} from "@fluentui/react";
+import { useApplicants } from "../../hooks/useApplicants";
+
+const stackStyles: IStackStyles = {
+ root: {
+ display: "block",
+ "@media(min-width: 725px)": {
+ justifyContent: "space-between",
+ display: "flex",
+ flexWrap: "nowrap",
+ padding: "0",
+ },
+ },
+};
+
+const dropdownStyles: Partial
+
+
+ {
+ history.push(`/admin/candidates/${item.id}`);
+ showLoader();
+ }}
+ onRenderDetailsHeader={(detailsHeaderProps, defaultRender) => (
+ {defaultRender(detailsHeaderProps)}
+ )}
+ />
+
+
+ );
+};
+
+export default ApplicantList;
diff --git a/src/components/header/AuthBtn/AuthBtn.tsx b/src/components/header/AuthBtn/AuthBtn.tsx
new file mode 100644
index 0000000..1d7e857
--- /dev/null
+++ b/src/components/header/AuthBtn/AuthBtn.tsx
@@ -0,0 +1,37 @@
+import React from "react"
+import { PrimaryButton, IContextualMenuProps} from "@fluentui/react";
+import { useMemo } from "react"
+import { useHistory } from "react-router";
+
+
+
+const AuthBtn: React.FC<{isLoggedIn: boolean, showModal: any, logout: any, userName: string }> = (props) => {
+ const history = useHistory();
+ const menuProps: IContextualMenuProps = useMemo(() => {
+ return {
+ items: [
+ {
+ key: 'AdminPanel',
+ text: 'Admin Panel',
+ iconProps: { iconName: 'AdminALogoFill32' },
+ onClick: () => history.push('/admin/events'),
+ },
+ {
+ key: 'LogOut',
+ text: 'Log Out',
+ iconProps: { iconName: 'SignOut' },
+ onClick: props.logout
+ },
+ ],
+ };
+ }, [])
+
+ return (
+ props.isLoggedIn
+ ?
+
+
+
+
+ );
+};
+
+const theme = getTheme();
+const contentStyles = mergeStyleSets({
+ container: {
+ display: "flex",
+ flexFlow: "column nowrap",
+ alignItems: "stretch",
+ },
+ header: [
+ theme.fonts.xLargePlus,
+
+ {
+ flex: "1 1 auto",
+ borderTop: `4px solid ${theme.palette.themePrimary}`,
+ color: theme.palette.neutralPrimary,
+ display: "flex",
+ alignItems: "center",
+ fontWeight: FontWeights.semibold,
+ padding: "12px 12px 14px 24px",
+ },
+ ],
+ body: {
+ flex: "4 4 auto",
+ padding: "0 24px 24px 24px",
+ overflowY: "hidden",
+ textAlign: "center",
+ },
+ item: {
+ marginBottom: "10px",
+ },
+});
+const iconButtonStyles = {
+ root: {
+ color: theme.palette.neutralPrimary,
+ marginLeft: "auto",
+ marginTop: "4px",
+ marginRight: "2px",
+ },
+ rootHovered: {
+ color: theme.palette.neutralDark,
+ },
+};
+
+export default ButtonLog;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
new file mode 100644
index 0000000..ada12d1
--- /dev/null
+++ b/src/components/header/Header.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { useHistory } from "react-router";
+import { Stack } from "@fluentui/react/lib";
+
+import HeaderNav from "./Navigation/Navigation";
+import ButtonLog from "./ButtonLog/ButtonLog";
+import { useAuth } from "../../hooks/useAuth";
+
+const logo = require("./../../assets/img/logo.svg");
+
+const Header: React.FC = () => {
+ const { isAuth, currentUser } = useAuth();
+ const history = useHistory();
+
+ return (
+
+ 
history.push("/events")}
+ alt="exadel"
+ />
+ {isAuth &&
+ - {listItems}
+
+ );
+};
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
new file mode 100644
index 0000000..5816004
--- /dev/null
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+
+import Header from "../components/Header/Header";
+import Footer from "../components/Footer/Footer";
+import { NotFound } from "../components/NotFound";
+
+import Wrapper from "../components/UI/Wrapper/Wrapper";
+import MainComponent from "../components/MainComponent";
+import Event from "../components/Event";
+import Scrollbar from "../components/UI/Scrollbar/Scrollbar";
+
+
+export const MainPage = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/src/utils/stringReformers.ts b/src/utils/stringReformers.ts
new file mode 100644
index 0000000..2583bf1
--- /dev/null
+++ b/src/utils/stringReformers.ts
@@ -0,0 +1,92 @@
+import {
+ AcceptStatus,
+ InterviewStatus,
+ PreferredTime,
+} from "../models/IApplicant";
+import { EventStatus, EventType } from "../models/IEvent";
+
+export const preferredTimeReformer = (str: string): string => {
+ switch (str) {
+ case PreferredTime.First:
+ return "10:00-12:00";
+ case PreferredTime.Second:
+ return "12:00-14:00";
+ case PreferredTime.Third:
+ return "14:00-16:00";
+ case PreferredTime.Fourth:
+ return "16:00-18:00";
+ case PreferredTime.Any:
+ return "Any time";
+ default:
+ return str;
+ }
+};
+export const interviewStatusReformer = (str: string): string => {
+ switch (str) {
+ case InterviewStatus.Registered:
+ return "Registered";
+ case InterviewStatus.AwaitingHRInterview:
+ return "Waiting for HR";
+ case InterviewStatus.AwaitingTSInterview:
+ return "Waiting for TS";
+ case InterviewStatus.WaitingDecision:
+ return "Awaiting a Decision";
+ default:
+ return str;
+ }
+};
+
+export const acceptStatusReformer = (str: string): string => {
+ switch (str) {
+ case AcceptStatus.Accepted:
+ return "Accepted";
+ case AcceptStatus.Pending:
+ return "Pending";
+ case AcceptStatus.Rejected:
+ return "Rejected";
+ default:
+ return str;
+ }
+};
+
+export const dateReformer = (str: string): string => {
+ const options = {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ } as const;
+
+ return new Date(str).toLocaleDateString("en-GB", options);
+};
+export const timeReformer = (str: string): string => {
+ return new Date(str).toLocaleTimeString("en-GB", {
+ hour: "numeric",
+ minute: "numeric",
+ });
+};
+
+export const eventTypeReformer = (str: string): string => {
+ switch (str) {
+ case EventType.Internship:
+ return "Internship";
+ case EventType.MeetUp:
+ return "MeetUp";
+ case EventType.Training:
+ return "Training";
+ default:
+ return str;
+ }
+};
+
+export const eventStatusReformer = (str: string): string => {
+ switch (str) {
+ case EventStatus.Archived:
+ return "Archived";
+ case EventStatus.NotPublished:
+ return "Not Published";
+ case EventStatus.Published:
+ return "Published";
+ default:
+ return str;
+ }
+};
diff --git a/src/utils/toDropdownOptions.ts b/src/utils/toDropdownOptions.ts
new file mode 100644
index 0000000..bbbb75b
--- /dev/null
+++ b/src/utils/toDropdownOptions.ts
@@ -0,0 +1,13 @@
+import { IDropdownOption } from "@fluentui/react";
+
+export const toDropdownOptions = (
+ arr: string[],
+ textReformer?: (text: string) => string
+): IDropdownOption