Loading...
;
- }
- if (!user) {
- return null;
- } else if (
- user.password_reset === true &&
- window.location.pathname !== "/reset-password"
- ) {
- window.location.href = "/reset-password";
- return null;
- }
- return (
- Loading...
;
+ }
+ if (!user) {
+ return null;
+ } else if (
+ user.password_reset === true &&
+ window.location.pathname !== '/reset-password'
+ ) {
+ window.location.href = '/reset-password';
+ return null;
+ }
+ return (
+ 
;
+ return ;
}
diff --git a/frontend/src/Components/Brand.tsx b/frontend/src/Components/Brand.tsx
index 0013a89a..f7b98684 100644
--- a/frontend/src/Components/Brand.tsx
+++ b/frontend/src/Components/Brand.tsx
@@ -1,12 +1,12 @@
export default function Brand() {
- return (
-
-
-
- );
+ return (
+
- - Unlock - Ed - v2 -
-
+
+
+ );
}
diff --git a/frontend/src/Components/CatalogCourseCard.tsx b/frontend/src/Components/CatalogCourseCard.tsx
index d2081ad7..10053ccf 100644
--- a/frontend/src/Components/CatalogCourseCard.tsx
+++ b/frontend/src/Components/CatalogCourseCard.tsx
@@ -1,154 +1,158 @@
-import { BookmarkIcon } from "@heroicons/react/24/solid";
-import { BookmarkIcon as BookmarkIconOutline } from "@heroicons/react/24/outline";
-import LightGreenPill from "./pill-labels/LightGreenPill";
-import RedPill from "./pill-labels/RedPill";
-import YellowPill from "./pill-labels/YellowPill";
-import axios from "axios";
-import { ViewType } from "./ToggleView";
-import GreyPill from "./pill-labels/GreyPill";
-import { MouseEvent } from "react";
-import { CourseCatalogue } from "@/common";
+import { BookmarkIcon } from '@heroicons/react/24/solid';
+import { BookmarkIcon as BookmarkIconOutline } from '@heroicons/react/24/outline';
+import LightGreenPill from './pill-labels/LightGreenPill';
+import RedPill from './pill-labels/RedPill';
+import YellowPill from './pill-labels/YellowPill';
+import axios from 'axios';
+import { ViewType } from './ToggleView';
+import GreyPill from './pill-labels/GreyPill';
+import { MouseEvent } from 'react';
+import { CourseCatalogue } from '@/common';
export interface CatalogCourseCard {
- name: string;
- img_url: string;
- url: string;
- provider_platform_name: string;
- tags: Array
+ + Unlock + Ed + v2 +
+
-
-
- ) : (
+ if (view == ViewType.List)
+ return (
+
+
-
- updateFavorite(e)}>{bookmark}
- {course.program_name}
-|
-{course.provider_name}
- {programPill} - {outcomePills} -- {course.description} -
-
+
+
+ );
+ return (
+
+ updateFavorite(e)}>{bookmark}
+ {course.program_name}
+|
+{course.provider_name}
+ {programPill} + {outcomePills} ++ {course.description} +
+
-
- {coverImage !== "" ? (
- 
- ) : (
-
- )}
-
- (null);
- const [open, setOpen] = useState(true);
- const deleteLinkModal = useRef(null);
- const addLinkModal = useRef(null);
+ const [activeLinkToDelete, setActiveLinkToDelete] =
+ useState(null);
+ const [open, setOpen] = useState(true);
+ const deleteLinkModal = useRef(null);
+ const addLinkModal = useRef(null);
- return (
- {
+ addLink(category, title, url),
+ addLinkModal.current?.close();
+ }}
+ />
+ }
+ ref={addLinkModal}
+ />
+
+ );
}
diff --git a/frontend/src/Components/ConvertSeconds.tsx b/frontend/src/Components/ConvertSeconds.tsx
index 732e13f3..bd861cfd 100644
--- a/frontend/src/Components/ConvertSeconds.tsx
+++ b/frontend/src/Components/ConvertSeconds.tsx
@@ -1,13 +1,13 @@
const convertSeconds = (secs: number) => {
- const hours = Math.floor(secs / 3600);
- const minutes = Math.floor((secs % 3600) / 60);
- const seconds = Math.floor(secs % 60);
+ const hours = Math.floor(secs / 3600);
+ const minutes = Math.floor((secs % 3600) / 60);
+ const seconds = Math.floor(secs % 60);
- return hours
- ? { number: hours, label: `hr${hours === 1 ? "" : "s"}` }
- : minutes
- ? { number: minutes, label: `min${minutes === 1 ? "" : "s"}` }
- : { number: seconds, label: `sec${seconds === 1 ? "" : "s"}` };
+ return hours
+ ? { number: hours, label: `hr${hours === 1 ? '' : 's'}` }
+ : minutes
+ ? { number: minutes, label: `min${minutes === 1 ? '' : 's'}` }
+ : { number: seconds, label: `sec${seconds === 1 ? '' : 's'}` };
};
export default convertSeconds;
diff --git a/frontend/src/Components/CurrentlyEnrolledClass.tsx b/frontend/src/Components/CurrentlyEnrolledClass.tsx
index 74d50791..b5549229 100644
--- a/frontend/src/Components/CurrentlyEnrolledClass.tsx
+++ b/frontend/src/Components/CurrentlyEnrolledClass.tsx
@@ -1,26 +1,30 @@
-import { ArrowUpRightIcon } from "@heroicons/react/24/solid";
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
export default function CurrentlyEnrolledClass({ course }: { course: any }) {
- const truncateAltName = (altName: string) => {
- if (altName.length < 15) return altName;
- return altName.slice(0, 15) + "...";
- };
- return (
- ) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/DeleteForm.tsx b/frontend/src/Components/DeleteForm.tsx
index 71feabb6..f34b7cde 100644
--- a/frontend/src/Components/DeleteForm.tsx
+++ b/frontend/src/Components/DeleteForm.tsx
@@ -1,33 +1,33 @@
-import { CloseX } from "../Components/inputs/CloseX";
+import { CloseX } from '../Components/inputs/CloseX';
interface DeleteProps {
- item: string;
- onCancel: () => void;
- onSuccess: () => void;
+ item: string;
+ onCancel: () => void;
+ onSuccess: () => void;
}
export default function DeleteForm({ item, onCancel, onSuccess }: DeleteProps) {
- return (
-
updateFavorite(e)}
- >
- {bookmark}
-
-
-
- {/* this should be the school or program that offers the course */}
-
+ {coverImage !== '' ? (
+
+ ) : (
+
+ )}
+
+
- )}
-
- );
+ );
}
diff --git a/frontend/src/Components/CategoryItem.tsx b/frontend/src/Components/CategoryItem.tsx
index 5de55814..2548ac75 100644
--- a/frontend/src/Components/CategoryItem.tsx
+++ b/frontend/src/Components/CategoryItem.tsx
@@ -1,127 +1,143 @@
-import { Category, CategoryLink } from "@/common";
-import { useRef, useState } from "react";
-import LinkItem from "./LinkItem";
-import AddLinkForm from "@/Components/forms/AddLinkForm";
+import { Category, CategoryLink } from '@/common';
+import { useRef, useState } from 'react';
+import LinkItem from './LinkItem';
+import AddLinkForm from '@/Components/forms/AddLinkForm';
import {
- ChevronDownIcon,
- ChevronRightIcon,
- TrashIcon,
- PlusIcon,
- ChevronUpIcon,
-} from "@heroicons/react/24/solid";
-import Modal, { ModalType } from "./Modal";
-import DeleteForm from "./forms/DeleteForm";
+ ChevronDownIcon,
+ ChevronRightIcon,
+ TrashIcon,
+ PlusIcon,
+ ChevronUpIcon
+} from '@heroicons/react/24/solid';
+import Modal, { ModalType } from './Modal';
+import DeleteForm from './forms/DeleteForm';
export default function CategoryItem({
- category,
- deleteLink,
- addLink,
- moveLink,
- updateLink,
+ category,
+ deleteLink,
+ addLink,
+ moveLink,
+ updateLink
}: {
- category: Category;
- deleteLink: Function;
- addLink: Function;
- moveLink: Function;
- updateLink: Function;
+ category: Category;
+ deleteLink: Function;
+ addLink: Function;
+ moveLink: Function;
+ updateLink: Function;
}) {
- const [activeLinkToDelete, setActiveLinkToDelete] =
- useState{course.provider_name}
-{course.program_name}
-{course.description}
-
- {programPill} {outcomePills}
-
+ updateFavorite(e)}
+ >
+ {bookmark}
-
+
+
+ {/* this should be the school or program that offers the course */}
+
+
{course.provider_name}
++ {course.program_name} +
++ {course.description} +
+
+ {programPill} {outcomePills}
+
+
- setOpen(!open)}
- >
-
- {category.name}
- {open ? (
-
- setActiveLinkToDelete(null)}
- onSuccess={() => deleteLink(category, activeLinkToDelete)}
- />
- }
- ref={deleteLinkModal}
- />
- {
- addLink(category, title, url), addLinkModal.current?.close();
- }}
- />
- }
- ref={addLinkModal}
- />
-
- );
+ ref={deleteLinkModal}
+ />
+ setOpen(!open)}
- >
-
- {category.name}
- {open ? (
-
- -
-
-
- {category.links.map((linkPair: CategoryLink, index) => {
- const key = Object.keys(linkPair)[0];
- return (
- Title
-URL
-
+ setOpen(!open)}
>
-
+ setActiveLinkToDelete(null)}
+ onSuccess={() =>
+ deleteLink(category, activeLinkToDelete)
+ }
+ />
}
- />
-
- );
- })}
-
- setOpen(!open)}
>
-
- updateLink(category, index, newLinkPair)
+
+ {category.name}
+ {open ? (
+
+ -
+
+
+ {category.links.map((linkPair: CategoryLink, index) => {
+ const key = Object.keys(linkPair)[0];
+ return (
+ Title
+URL
+
+
+ updateLink(category, index, newLinkPair)
+ }
+ />
+
+ );
+ })}
+
+
+ {
+ setActiveLinkToDelete(linkPair),
+ deleteLinkModal.current?.showModal();
+ }}
+ />
+
+
+
+ moveLink(category, index, 'up')
+ }
+ />
+
+
+
+ moveLink(category, index, 'down')
+ }
+ />
+
+
- {
- setActiveLinkToDelete(linkPair),
- deleteLinkModal.current?.showModal();
- }}
- />
-
-
- moveLink(category, index, "up")}
- />
-
-
- moveLink(category, index, "down")}
- />
-
-
-
- );
+ const truncateAltName = (altName: string) => {
+ if (altName.length < 15) return altName;
+ return altName.slice(0, 15) + '...';
+ };
+ return (
+
- {course.alt_name !== "" && (
-
-
- {course.provider_platform_name}
- - {truncateAltName(course.alt_name)} -
- )} -{course.name}
-
+
+ );
}
diff --git a/frontend/src/Components/DangerButton.tsx b/frontend/src/Components/DangerButton.tsx
index 6524a0ad..8a234d97 100644
--- a/frontend/src/Components/DangerButton.tsx
+++ b/frontend/src/Components/DangerButton.tsx
@@ -1,22 +1,22 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes } from 'react';
export default function DangerButton({
- className = "",
- disabled,
- children,
- ...props
+ className = '',
+ disabled,
+ children,
+ ...props
}: ButtonHTMLAttributes
+ {course.alt_name !== '' && (
+
+
+ {course.provider_platform_name}
+ + {truncateAltName(course.alt_name)} +
+ )} +{course.name}
+
- onCancel()} />
-
- );
+ return (
+
- Are you sure you would like to delete this {item.toLowerCase()}?
-
This action cannot be undone.
-
+ onCancel()} />
+
+ );
}
diff --git a/frontend/src/Components/EnrolledCourseCard.tsx b/frontend/src/Components/EnrolledCourseCard.tsx
index fab68c8e..65ae62e8 100644
--- a/frontend/src/Components/EnrolledCourseCard.tsx
+++ b/frontend/src/Components/EnrolledCourseCard.tsx
@@ -1,137 +1,140 @@
import {
- CheckCircleIcon,
- ClockIcon,
- StarIcon,
-} from "@heroicons/react/24/solid";
-import { StarIcon as StarIconOutline } from "@heroicons/react/24/outline";
-import ProgressBar from "./ProgressBar";
-import { CourseStatus } from "@/Pages/MyCourses";
-import { ViewType } from "./ToggleView";
-import axios from "axios";
+ CheckCircleIcon,
+ ClockIcon,
+ StarIcon
+} from '@heroicons/react/24/solid';
+import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline';
+import ProgressBar from './ProgressBar';
+import { CourseStatus } from '@/Pages/MyCourses';
+import { ViewType } from './ToggleView';
+import axios from 'axios';
// this might also want to live within courses, as the type of course it is (ie currently enrolled, completed, favorited, pending)
// recent would probably be a boolean, which would only need to be accessed on the homepage
export interface CourseCard {
- course: any; // TO DO: will change to be specific
- recent?: boolean;
- view?: ViewType;
- callMutate?: () => void;
+ course: any; // TO DO: will change to be specific
+ recent?: boolean;
+ view?: ViewType;
+ callMutate?: () => void;
}
export default function EnrolledCourseCard({
- course,
- recent,
- view,
- callMutate,
+ course,
+ recent,
+ view,
+ callMutate
}: CourseCard) {
- const coverImage = course.thumbnail_url;
- let url = course.external_url;
- let status: CourseStatus;
- if (course.course_progress == 100) status = CourseStatus.Completed;
+ const coverImage = course.thumbnail_url;
+ let url = course.external_url;
+ let status: CourseStatus;
+ if (course.course_progress == 100) status = CourseStatus.Completed;
- function updateFavorite(e) {
- e.preventDefault();
- axios
- .put(`/api/programs/${course.id}/save`)
- .then((response) => {
- callMutate();
- console.log(response);
- })
- .catch((error) => {
- console.log(error);
- });
- }
+ function updateFavorite(e) {
+ e.preventDefault();
+ axios
+ .put(`/api/programs/${course.id}/save`)
+ .then((response) => {
+ callMutate();
+ console.log(response);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
- return (
- <>
- {view == ViewType.List ? (
-
-
+ Are you sure you would like to delete this {item.toLowerCase()}?
+
This action cannot be undone.
+
-
- {status == CourseStatus.Completed ? (
- updateFavorite(e)}>
- {!recent &&
- (course.is_favorited ? (
-
- {course.program_name}
-|
-{course.provider_platform_name}
-
-
- ) : status == CourseStatus.Pending ? (
-
-
- ) : (
-
-
- )}
-
- ) : (
-
-
- {coverImage !== "" ? (
-
- ) : (
-
- )}
-
-
updateFavorite(e)}
- >
- {!recent &&
- (course.is_favorited ? (
-
-
-
-
- setName(e.target.value)}
- onBlur={() => {
- const newLinkPair: CategoryLink = {};
- newLinkPair[name] = url;
- callUpdateLink(newLinkPair);
- }}
- className="input input-bordered w-1/3"
- />
- setURL(e.target.value)}
- onBlur={() => {
- const newLinkPair: CategoryLink = {};
- newLinkPair[name] = url;
- callUpdateLink(newLinkPair);
- }}
- className="input input-bordered w-2/3"
- />
-
- );
+ return (
+
+ setName(e.target.value)}
+ onBlur={() => {
+ const newLinkPair: CategoryLink = {};
+ newLinkPair[name] = url;
+ callUpdateLink(newLinkPair);
+ }}
+ className="input input-bordered w-1/3"
+ />
+ setURL(e.target.value)}
+ onBlur={() => {
+ const newLinkPair: CategoryLink = {};
+ newLinkPair[name] = url;
+ callUpdateLink(newLinkPair);
+ }}
+ className="input input-bordered w-2/3"
+ />
+
+ );
}
diff --git a/frontend/src/Components/MilestonesBarChart.tsx b/frontend/src/Components/MilestonesBarChart.tsx
index 96987431..118762dd 100644
--- a/frontend/src/Components/MilestonesBarChart.tsx
+++ b/frontend/src/Components/MilestonesBarChart.tsx
@@ -1,77 +1,88 @@
import {
- BarChart,
- Bar,
- XAxis,
- YAxis,
- Tooltip,
- ResponsiveContainer,
- CartesianGrid,
- Label,
-} from "recharts";
-import { ThemeContext } from "./ThemeContext";
-import { useContext } from "react";
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+ CartesianGrid,
+ Label
+} from 'recharts';
+import { ThemeContext } from './ThemeContext';
+import { useContext } from 'react';
const MilestonesBarChart = ({ data }: { data: any }) => {
- const { theme } = useContext(ThemeContext);
+ const { theme } = useContext(ThemeContext);
- var barColor = theme == "light" ? "#18ABA0" : "#61BAB2";
- var backgroundColor = theme == "light" ? "#FFFFFF" : "#0F2926";
+ var barColor = theme == 'light' ? '#18ABA0' : '#61BAB2';
+ var backgroundColor = theme == 'light' ? '#FFFFFF' : '#0F2926';
- const maxYAxisLabel = (props) => {
- const { x, y, payload } = props;
- const name = payload.value;
- return (
- <>
- {name.length > 10 ? (
- <>
+ const maxYAxisLabel = (props) => {
+ const { x, y, payload } = props;
+ const name = payload.value;
+ if (name.length > 10) {
+ return (
+ <>
+
+ {name.slice(0, 11)}
+
+
+ {name.length > 20
+ ? name.slice(11, 20) + '...'
+ : name.slice(11, 20)}
+
+
+ );
+ }
+ return (
- {name.slice(0, 11)}
-
-
- {name.length > 20
- ? name.slice(11, 20) + "..."
- : name.slice(11, 20)}
+ {name}
-
- ) : (
-
- {name}
-
- )}
-
- );
- };
+ );
+ };
- const YAxisTick = (props) => {
- return {maxYAxisLabel(props)} ;
- };
+ const YAxisTick = (props) => {
+ return {maxYAxisLabel(props)} ;
+ };
- return (
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+ );
};
export default MilestonesBarChart;
diff --git a/frontend/src/Components/Modal.tsx b/frontend/src/Components/Modal.tsx
index 1b7f5bf1..93a02ed6 100644
--- a/frontend/src/Components/Modal.tsx
+++ b/frontend/src/Components/Modal.tsx
@@ -1,37 +1,37 @@
-import { ReactNode, forwardRef } from "react";
+import { ReactNode, forwardRef } from 'react';
export interface ModalProps {
- type: ModalType | string;
- item: string;
- form: ReactNode | null;
+ type: ModalType | string;
+ item: string;
+ form: ReactNode | null;
}
export enum ModalType {
- Edit = "Edit",
- Add = "Add",
- Show = "Show",
- Associate = "Associate",
- Confirm = "Confirm",
- Register = "Register",
- Blank = "",
+ Edit = 'Edit',
+ Add = 'Add',
+ Show = 'Show',
+ Associate = 'Associate',
+ Confirm = 'Confirm',
+ Register = 'Register',
+ Blank = ''
}
const Modal = forwardRef(function Modal(
- { type, item, form },
- ref,
+ { type, item, form },
+ ref
) {
- return (
-
- );
+ return (
+
+ );
});
export default Modal;
diff --git a/frontend/src/Components/MonthActivityChart.tsx b/frontend/src/Components/MonthActivityChart.tsx
index 1137de91..54850046 100644
--- a/frontend/src/Components/MonthActivityChart.tsx
+++ b/frontend/src/Components/MonthActivityChart.tsx
@@ -1,59 +1,59 @@
import {
- LineChart,
- Line,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-import { ThemeContext } from "./ThemeContext";
-import { useContext } from "react";
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer
+} from 'recharts';
+import { ThemeContext } from './ThemeContext';
+import { useContext } from 'react';
const ActivityChart = ({ data }: { data: any }) => {
- const { theme } = useContext(ThemeContext);
+ const { theme } = useContext(ThemeContext);
- var lineColor = theme == "light" ? "#18ABA0" : "#61BAB2";
- var gridColor = theme == "light" ? "#ECECEC" : "#737373";
- var backgroundColor = theme == "light" ? "#FFFFFF" : "#0F2926";
+ var lineColor = theme == 'light' ? '#18ABA0' : '#61BAB2';
+ var gridColor = theme == 'light' ? '#ECECEC' : '#737373';
+ var backgroundColor = theme == 'light' ? '#FFFFFF' : '#0F2926';
- return (
-
-
-
-
- );
+ return (
+
+
+
+
+ );
};
export default ActivityChart;
diff --git a/frontend/src/Components/NavLink.tsx b/frontend/src/Components/NavLink.tsx
index f3a336ad..12e755a4 100644
--- a/frontend/src/Components/NavLink.tsx
+++ b/frontend/src/Components/NavLink.tsx
@@ -1,27 +1,27 @@
export interface NavLinkProps {
- href: string;
- className?: string;
- children: React.ReactNode;
+ href: string;
+ className?: string;
+ children: React.ReactNode;
}
export default function NavLink({
- active = false,
- className = "",
- children,
- ...props
+ active = false,
+ className = '',
+ children,
+ ...props
}: NavLinkProps & { active: boolean }) {
- return (
-
- {course.provider_platform_name} -
-- {course.alt_name && course.alt_name + " - "} - {course.program_name} -
-
+ if (view == ViewType.List)
+ return (
+
+
+
+ );
+ return (
+
+
{status == CourseStatus.Completed ? (
- updateFavorite(e)}>
+ {!recent &&
+ (course.is_favorited ? (
+
+ {course.program_name}
+|
+{course.provider_platform_name}
+
-
+
+
) : status == CourseStatus.Pending ? (
-
-
+
+
) : (
-
+
)}
-
+
+ {coverImage !== '' ? (
+
+ ) : (
+
+ )}
+
+
- )}
-
- );
+ );
}
diff --git a/frontend/src/Components/LinkItem.tsx b/frontend/src/Components/LinkItem.tsx
index c007355b..28c10dc4 100644
--- a/frontend/src/Components/LinkItem.tsx
+++ b/frontend/src/Components/LinkItem.tsx
@@ -1,42 +1,42 @@
-import { CategoryLink } from "@/common";
-import { useState } from "react";
+import { CategoryLink } from '@/common';
+import { useState } from 'react';
export default function LinkItem({
- linkName,
- linkURL,
- callUpdateLink,
+ linkName,
+ linkURL,
+ callUpdateLink
}: {
- linkName: string;
- linkURL: string;
- callUpdateLink: any;
+ linkName: string;
+ linkURL: string;
+ callUpdateLink: any;
}) {
- const [name, setName] = useState(linkName);
- const [url, setURL] = useState(linkURL);
+ const [name, setName] = useState(linkName);
+ const [url, setURL] = useState(linkURL);
- return (
- updateFavorite(e)}
+ >
+ {!recent &&
+ (course.is_favorited ? (
+
-
+
+
+
+
+ {course.provider_platform_name} +
++ {course.alt_name && course.alt_name + ' - '} + {course.program_name} +
+
+ {status == CourseStatus.Completed ? (
+
+
+
+ ) : status == CourseStatus.Pending ? (
+
+
+ ) : (
+
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
diff --git a/frontend/src/Components/Navbar.tsx b/frontend/src/Components/Navbar.tsx
index 045cc377..ea498e54 100644
--- a/frontend/src/Components/Navbar.tsx
+++ b/frontend/src/Components/Navbar.tsx
@@ -1,85 +1,86 @@
-import { UserRole } from "@/common";
-import Brand from "./Brand";
+import { UserRole } from '@/common';
+import Brand from './Brand';
import {
- ArchiveBoxIcon,
- BookOpenIcon,
- BuildingStorefrontIcon,
- ChartBarIcon,
- HomeIcon,
- RectangleStackIcon,
- TrophyIcon,
- UsersIcon,
-} from "@heroicons/react/24/solid";
-import { useAuth } from "@/AuthContext";
+ ArchiveBoxIcon,
+ BookOpenIcon,
+ BuildingStorefrontIcon,
+ ChartBarIcon,
+ HomeIcon,
+ RectangleStackIcon,
+ TrophyIcon,
+ UsersIcon
+} from '@heroicons/react/24/solid';
+import { useAuth } from '@/AuthContext';
export default function Navbar() {
- const user = useAuth();
- return (
-
-
-
-
-
-
-
-
Dashboard - -
- -
-
-
- Users - -
- -
-
-
- Activity - -
- -
-
-
- Resources - -
- -
-
-
- Platforms - -
-
- ) : (
- <>
- {/* student view */}
- -
-
-
Dashboard - -
- -
-
-
My Courses - -
- -
-
-
My Progress - -
- -
-
-
Course Catalog - -
-
- )}
-
+ const user = useAuth();
+ return (
+
+ );
}
diff --git a/frontend/src/Components/NewOidcClientNotification.tsx b/frontend/src/Components/NewOidcClientNotification.tsx
index 29436754..faca7c6a 100644
--- a/frontend/src/Components/NewOidcClientNotification.tsx
+++ b/frontend/src/Components/NewOidcClientNotification.tsx
@@ -1,42 +1,44 @@
-import { CloseX } from "./inputs/CloseX";
-import { OidcClient } from "@/common";
+import { CloseX } from './inputs/CloseX';
+import { OidcClient } from '@/common';
export default function NewOidcClientNotification({
- client,
- onClose,
+ client,
+ onClose
}: {
- client: OidcClient;
- onClose: () => void;
+ client: OidcClient;
+ onClose: () => void;
}) {
- return (
-
+
*/}
-
- );
+ -
+
+
-
+
+
Dashboard + +
+ -
+
+
+ Users + +
+ -
+
+
+ Activity + +
+ -
+
+
+ Resources + +
+ -
+
+
+ Platforms + +
+
+ ) : (
+ <>
+ {/* student view */}
+ -
+
+
Dashboard + +
+ -
+
+
My Courses + +
+ -
+
+
My Progress + +
+ -
+
+
{' '} + Course Catalog + +
+
+ )}
+
-
- onClose()} />
-
- - OIDC Client Registration Successful -
-
-
- );
+ );
}
diff --git a/frontend/src/Components/NotificationCard.tsx b/frontend/src/Components/NotificationCard.tsx
index cc7c99b7..dab5377e 100644
--- a/frontend/src/Components/NotificationCard.tsx
+++ b/frontend/src/Components/NotificationCard.tsx
@@ -1,31 +1,35 @@
export enum NotificationType {
- Announcement = "Announcement",
- ToDo = "ToDo",
+ Announcement = 'Announcement',
+ ToDo = 'ToDo'
}
// TO DO: specify cardInfo type
export default function NotificationCard({
- cardInfo,
- type,
+ cardInfo,
+ type
}: {
- cardInfo: any;
- type: NotificationType;
+ cardInfo: any;
+ type: NotificationType;
}) {
- return (
-
-
- Please make sure to save the following information. It will not be
- displayed again.
+ return (
+
-
-
-
-
-
-
+
-
+ onClose()} />
+
+ + OIDC Client Registration Successful +
+
+
+
+
+
+
+
+ Please make sure to save the following information. It will
+ not be displayed again.
+
+ +
+ Client ID:
+
+ {client.client_id}
+ +
Client Secret:
+{client.client_secret}
+ +
Authorization Endpoint:
+{client.auth_url}
+ +
Token Endpoint:
+{client.token_url}
+ +
Scopes:
+{client.scopes}
+ -
Client ID:
- {client.client_id}
- -
Client Secret:
-{client.client_secret}
- -
Authorization Endpoint:
-{client.auth_url}
- -
Token Endpoint:
-{client.token_url}
- -
Scopes:
-{client.scopes}
- - {cardInfo.course_name && cardInfo.course_name + ": "} - {cardInfo.title} -
- {type == NotificationType.Announcement ? ( -{cardInfo.message}
- ) : ( - <> -- {cardInfo.course_name + " | " + cardInfo.provider_platform} -
-{cardInfo.due.toUTCString()}
- - )} - - ); + return ( + ++ {cardInfo.course_name && cardInfo.course_name + ': '} + {cardInfo.title} +
+ {type == NotificationType.Announcement ? ( +{cardInfo.message}
+ ) : ( + <> ++ {cardInfo.course_name + + ' | ' + + cardInfo.provider_platform} +
++ {cardInfo.due.toUTCString()} +
+ + )} + + ); } diff --git a/frontend/src/Components/NotificationsSideBar.tsx b/frontend/src/Components/NotificationsSideBar.tsx index e47531d3..6c9e0473 100644 --- a/frontend/src/Components/NotificationsSideBar.tsx +++ b/frontend/src/Components/NotificationsSideBar.tsx @@ -1,79 +1,79 @@ -import NotificationCard, { NotificationType } from "./NotificationCard"; +import NotificationCard, { NotificationType } from './NotificationCard'; const date = new Date(); const announcements = [ - { - title: "Enrollment Approved", - message: - "You are now enrolled in Data and Algorithms from Harvard University.", - url: "", - }, - { - course_name: "Advanced English Composition", - title: "Schedule Change", - message: "Advanced English Composition is now M/W 10:30am-12pm.", - url: "", - }, - { - course_name: "Linear Algebra", - title: "Midterm Grades Out", - message: - "Hi everyone, midterm grades have been posted. Please reach out if you have any questions.", - url: "", - }, + { + title: 'Enrollment Approved', + message: + 'You are now enrolled in Data and Algorithms from Harvard University.', + url: '' + }, + { + course_name: 'Advanced English Composition', + title: 'Schedule Change', + message: 'Advanced English Composition is now M/W 10:30am-12pm.', + url: '' + }, + { + course_name: 'Linear Algebra', + title: 'Midterm Grades Out', + message: + 'Hi everyone, midterm grades have been posted. Please reach out if you have any questions.', + url: '' + } ]; const toDo = [ - { - title: "Assignment 4", - course_name: "Introduction to Computer Science", - provider_platform: "Kolibri", - url: "", - due: date, - }, - { - title: "Homework 6", - course_name: "Linear Algebra", - provider_platform: "WashU Canvas", - url: "", - due: date, - }, + { + title: 'Assignment 4', + course_name: 'Introduction to Computer Science', + provider_platform: 'Kolibri', + url: '', + due: date + }, + { + title: 'Homework 6', + course_name: 'Linear Algebra', + provider_platform: 'WashU Canvas', + url: '', + due: date + } ]; export default function NotificationsSideBar() { - // call the data here in the future + // call the data here in the future - return ( -
- ;
+ user: User;
+ path: Array;
}) {
- const detailsRef = useRef(null);
- useEffect(() => {
- const closeDropdown = ({ target }: MouseEvent) => {
- if (detailsRef.current && !detailsRef.current?.contains(target as Node)) {
- detailsRef.current.removeAttribute("open");
- }
- };
+ const detailsRef = useRef(null);
+ useEffect(() => {
+ const closeDropdown = ({ target }: MouseEvent) => {
+ if (
+ detailsRef.current &&
+ !detailsRef.current?.contains(target as Node)
+ ) {
+ detailsRef.current.removeAttribute('open');
+ }
+ };
- window.addEventListener("click", closeDropdown);
+ window.addEventListener('click', closeDropdown);
- return () => {
- window.removeEventListener("click", closeDropdown);
- };
- }, []);
+ return () => {
+ window.removeEventListener('click', closeDropdown);
+ };
+ }, []);
- return (
- ) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/ProgressBar.tsx b/frontend/src/Components/ProgressBar.tsx
index 17e3434c..1bcb1d5b 100644
--- a/frontend/src/Components/ProgressBar.tsx
+++ b/frontend/src/Components/ProgressBar.tsx
@@ -1,12 +1,12 @@
export default function ProgressBar({ percent }: { percent: number }) {
- return (
-
- {provider.name}
-
- {provider.oidc_id !== 0 ? (
-
-
- {/* TO DO: FINISH THIS */}
- {provider.state == ProviderPlatformState.ENABLED ? (
- enabled
- ) : provider.state == ProviderPlatformState.DISABLED ? (
- disabled
- ) : provider.state == ProviderPlatformState.ARCHIVED ? (
- archived
- ) : (
-
-
- {provider.state !== ProviderPlatformState.ARCHIVED && (
- <>
- {provider.oidc_id !== 0 ? (
- <>
-
-
- );
+ const navigate = useNavigate();
+ return (
+
+ {provider.name}
+
+ {provider.oidc_id !== 0 ? (
+
+
+ {/* TO DO: FINISH THIS */}
+ {provider.state == ProviderPlatformState.ENABLED ? (
+ enabled
+ ) : provider.state == ProviderPlatformState.DISABLED ? (
+ disabled
+ ) : provider.state == ProviderPlatformState.ARCHIVED ? (
+ archived
+ ) : (
+
+
+ {provider.state !== ProviderPlatformState.ARCHIVED && (
+ <>
+ {provider.oidc_id !== 0 ? (
+ <>
+
+
+ );
}
diff --git a/frontend/src/Components/ResourcesSideBar.tsx b/frontend/src/Components/ResourcesSideBar.tsx
index 05c45c34..1f7f071b 100644
--- a/frontend/src/Components/ResourcesSideBar.tsx
+++ b/frontend/src/Components/ResourcesSideBar.tsx
@@ -1,113 +1,114 @@
-import { Category, Link, Resource, ServerResponse } from "@/common";
-import Error from "@/Pages/Error";
-import useSWR from "swr";
-import KolibriImg from "../../public/kolibri-card-cover.png";
-import WikiImg from "../../public/wikipedia.png";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { Category, Link, Resource, ServerResponse } from '@/common';
+import Error from '@/Pages/Error';
+import useSWR from 'swr';
+import KolibriImg from '../../public/kolibri-card-cover.png';
+import WikiImg from '../../public/wikipedia.png';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
const ExternalLink = ({ children, url }: { children: any; url: string }) => {
- return (
-
- >("/api/left-menu");
+ const { data, isLoading, error } =
+ useSWR>('/api/left-menu');
- if (isLoading) return
-
- );
+ );
}
diff --git a/frontend/src/Components/PageNav.tsx b/frontend/src/Components/PageNav.tsx
index 8d99df33..f9b64905 100644
--- a/frontend/src/Components/PageNav.tsx
+++ b/frontend/src/Components/PageNav.tsx
@@ -1,137 +1,142 @@
-import { User, UserRole } from "../common";
-import { useEffect, useRef } from "react";
+import { User, UserRole } from '../common';
+import { useEffect, useRef } from 'react';
import {
- ArrowRightEndOnRectangleIcon,
- HomeIcon,
- UsersIcon,
- ChartBarIcon,
- RectangleStackIcon,
- ArchiveBoxIcon,
-} from "@heroicons/react/24/solid";
-import ThemeToggle from "./ThemeToggle";
-import { handleLogout } from "../AuthContext";
+ ArrowRightEndOnRectangleIcon,
+ HomeIcon,
+ UsersIcon,
+ ChartBarIcon,
+ RectangleStackIcon,
+ ArchiveBoxIcon
+} from '@heroicons/react/24/solid';
+import ThemeToggle from './ThemeToggle';
+import { handleLogout } from '../AuthContext';
export default function PageNav({
- user,
- path,
+ user,
+ path
}: {
- user: User;
- path: ArrayAnnouncements
-
- {announcements.map((cardInfo: any) => {
- return (
-
-
+
-
+
+ Announcements
+
+ {announcements.map((cardInfo: any) => {
+ return (
+
+
+
To Do
+
+ {toDo.map((cardInfo: any) => {
+ return (
+
+
-
- To Do
-
- {toDo.map((cardInfo: any) => {
- return (
-
-
-
+ );
}
diff --git a/frontend/src/Components/Pagination.tsx b/frontend/src/Components/Pagination.tsx
index 7c7cc452..9a1c1a09 100644
--- a/frontend/src/Components/Pagination.tsx
+++ b/frontend/src/Components/Pagination.tsx
@@ -1,63 +1,63 @@
-import { PaginationMeta } from "@/common";
+import { PaginationMeta } from '@/common';
import {
- ChevronDoubleLeftIcon,
- ChevronDoubleRightIcon,
-} from "@heroicons/react/24/solid";
+ ChevronDoubleLeftIcon,
+ ChevronDoubleRightIcon
+} from '@heroicons/react/24/solid';
export default function Pagination({
- meta,
- setPage,
+ meta,
+ setPage
}: {
- meta: PaginationMeta;
- setPage: (page: number) => void;
+ meta: PaginationMeta;
+ setPage: (page: number) => void;
}) {
- const page = meta.current_page - 1;
+ const page = meta.current_page - 1;
- return (
-
-
- -
-
-
-
-
- {path.map((p) => (
- - {p} - ))} -
-
+ -
-
-
- -+
- - {user.name_first} {user.name_last} - -
--
-
- - - - - {user.role == UserRole.Student ? ( -
- {/* Student specific options go here */} - ) : ( - <> -
-
-
-
- Users - -
- -
-
-
- Activity - -
+ return (
+ -
-
-
- Resources - +
+ {path.map((p) => (
+ - {p} + ))} +
-
-
-
- Platforms - -
-
- )}
+ - + + - + {user.role == UserRole.Student ? ( +
- + {/* Student specific options go here */} + + ) : ( + <> +
-
+
+
+ Users + +
+ -
+
+
+ Activity + +
+ -
+
+
+ Resources + +
+ -
+
+
+ Platforms + +
+
+ )}
- - - - -
- + + +
+- ); + + ++++-+- -+ + {user.name_first} {user.name_last} + +
+-
+
+
-
+ );
}
diff --git a/frontend/src/Components/PrimaryButton.tsx b/frontend/src/Components/PrimaryButton.tsx
index 8ed21901..53c2a945 100644
--- a/frontend/src/Components/PrimaryButton.tsx
+++ b/frontend/src/Components/PrimaryButton.tsx
@@ -1,22 +1,22 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes } from 'react';
export default function PrimaryButton({
- className = "",
- disabled,
- children,
- ...props
+ className = '',
+ disabled,
+ children,
+ ...props
}: ButtonHTMLAttributes 0 ? "tooltip tooltip-left" : ""}`}
- data-tip="First Page"
- >
-
-
-
- {[page - 2, page - 1, page, page + 1, page + 2]
- .filter((i) => i >= 0 && i < meta.last_page)
- .map((i) => {
- return (
-
-
-
- );
+ return (
+ {percent} %
-
+
+
+ );
}
diff --git a/frontend/src/Components/ProviderCard.tsx b/frontend/src/Components/ProviderCard.tsx
index 9c8da48d..c10c3309 100644
--- a/frontend/src/Components/ProviderCard.tsx
+++ b/frontend/src/Components/ProviderCard.tsx
@@ -1,85 +1,97 @@
-import { useNavigate } from "react-router-dom";
-import { ProviderPlatform, ProviderPlatformState } from "@/common";
+import { useNavigate } from 'react-router-dom';
+import { ProviderPlatform, ProviderPlatformState } from '@/common';
import {
- PencilSquareIcon,
- CheckCircleIcon,
- LinkIcon,
- UserGroupIcon,
- InformationCircleIcon,
-} from "@heroicons/react/24/outline";
-import TealPill from "./pill-labels/TealPill";
-import YellowPill from "./pill-labels/YellowPill";
-import OutcomePill from "./pill-labels/GreyPill";
+ PencilSquareIcon,
+ CheckCircleIcon,
+ LinkIcon,
+ UserGroupIcon,
+ InformationCircleIcon
+} from '@heroicons/react/24/outline';
+import TealPill from './pill-labels/TealPill';
+import YellowPill from './pill-labels/YellowPill';
+import OutcomePill from './pill-labels/GreyPill';
export default function ProviderCard({
- provider,
- openEditProvider,
- oidcClient,
- showAuthorizationInfo,
+ provider,
+ openEditProvider,
+ oidcClient,
+ showAuthorizationInfo
}: {
- provider: ProviderPlatform;
- openEditProvider: Function;
- oidcClient: Function;
- showAuthorizationInfo: Function;
+ provider: ProviderPlatform;
+ openEditProvider: Function;
+ oidcClient: Function;
+ showAuthorizationInfo: Function;
}) {
- const navigate = useNavigate();
- return (
- {percent} %
+ Status unavailable
- )} -
- showAuthorizationInfo(provider)}
- />
-
-
- navigate(`/provider-users/${provider.id}`)}
- />
-
-
- ) : (
-
- oidcClient(provider)}
- />
-
- )}
-
- openEditProvider(provider)}
- />
-
-
- )}
- Status unavailable
+ )} +
+
+ showAuthorizationInfo(provider)
+ }
+ />
+
+
+
+ navigate(
+ `/provider-users/${provider.id}`
+ )
+ }
+ />
+
+
+ ) : (
+
+ oidcClient(provider)}
+ />
+
+ )}
+
+ openEditProvider(provider)}
+ />
+
+
+ )}
+
- 
-
- );
+ return (
+
-
- Explore Kolibri's Content
-
-
- Kolibri
-- Kolibri provides an extensive library of educational content suitable - for all learning levels. -
- {/* Temporary-- replace with external link to Kolibri */} -
+
+
+ );
};
const WikiCard = () => {
- return (
-
+
+ Explore Kolibri's Content
+
+
+ Kolibri
++ Kolibri provides an extensive library of educational content + suitable for all learning levels. +
+ {/* Temporary-- replace with external link to Kolibri */} +
-
- );
+ return (
+
- 
-
-
-
- Explore Wikipedia's Content
-
-
- Wikipedia
-- Wikipedia offers a vast collection of articles covering a wide range - of topics across various academic disciplines. -
- {/* Temporary-- replace with external link to Wiki */} -
+
+ );
};
const ResourcesCard = ({ resource }: { resource: Resource }) => {
- return (
-
+
+
+
+
+ Explore Wikipedia's Content
+
+
+ Wikipedia
++ Wikipedia offers a vast collection of articles covering a + wide range of topics across various academic disciplines. +
+ {/* Temporary-- replace with external link to Wiki */} +
-
- );
+ return (
+
-
- {title}
-
- );
- })}
-
- {resource.name}
- {resource.links.map((link: Link) => { - const [title, url] = Object.entries(link)[0]; - return ( -
+
+ );
};
export default function ResourcesSideBar() {
- const { data, isLoading, error } =
- useSWR
+
+ {title}
+
+ );
+ })}
+
+ {resource.name}
+ {resource.links.map((link: Link) => { + const [title, url] = Object.entries(link)[0]; + return ( +Loading...
;
- if (error) return Loading...
;
+ if (error) return
- ) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/StatsCard.tsx b/frontend/src/Components/StatsCard.tsx
index 87a59323..59e4342c 100644
--- a/frontend/src/Components/StatsCard.tsx
+++ b/frontend/src/Components/StatsCard.tsx
@@ -1,21 +1,21 @@
export default function StatsCard({
- title,
- number,
- label,
+ title,
+ number,
+ label
}: {
- title: string;
- number: string;
- label: string;
+ title: string;
+ number: string;
+ label: string;
}) {
- return (
- (defaultContext);
interface ThemeProviderProps {
- children: ReactNode;
+ children: ReactNode;
}
export const ThemeProvider: React.FC = ({ children }) => {
- const [theme, setTheme] = useState("light");
-
- useEffect(() => {
- const storedTheme = localStorage.getItem("theme");
- if (storedTheme) {
- setTheme(storedTheme);
- document.documentElement.setAttribute("data-theme", storedTheme);
- }
- }, []);
-
- const toggleTheme = () => {
- const newTheme = theme === "light" ? "dark" : "light";
- setTheme(newTheme);
- localStorage.setItem("theme", newTheme);
- document.documentElement.setAttribute("data-theme", newTheme);
- };
-
- return (
-
- {children}
-
- );
+ const [theme, setTheme] = useState('light');
+
+ useEffect(() => {
+ const storedTheme = localStorage.getItem('theme');
+ if (storedTheme) {
+ setTheme(storedTheme);
+ document.documentElement.setAttribute('data-theme', storedTheme);
+ }
+ }, []);
+
+ const toggleTheme = () => {
+ const newTheme = theme === 'light' ? 'dark' : 'light';
+ setTheme(newTheme);
+ localStorage.setItem('theme', newTheme);
+ document.documentElement.setAttribute('data-theme', newTheme);
+ };
+
+ return (
+
+ {children}
+
+ );
};
diff --git a/frontend/src/Components/ThemeToggle.tsx b/frontend/src/Components/ThemeToggle.tsx
index 603f28c8..3bdc0a31 100644
--- a/frontend/src/Components/ThemeToggle.tsx
+++ b/frontend/src/Components/ThemeToggle.tsx
@@ -1,24 +1,24 @@
-import { useEffect, useContext } from "react";
-import { ThemeContext } from "./ThemeContext";
+import { useEffect, useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
export default function ThemeToggle() {
- const { theme, toggleTheme } = useContext(ThemeContext);
+ const { theme, toggleTheme } = useContext(ThemeContext);
- useEffect(() => {
- /* Sets the data-theme attribute on html tag */
- document.documentElement.setAttribute("data-theme", theme);
- }, [theme]);
+ useEffect(() => {
+ /* Sets the data-theme attribute on html tag */
+ document.documentElement.setAttribute('data-theme', theme);
+ }, [theme]);
- return (
- /* Component provided by daisyUI - https://daisyui.com/components/toggle/ */
- {
- toggleTheme();
- e.target.blur();
- }}
- />
- );
+ return (
+ /* Component provided by daisyUI - https://daisyui.com/components/toggle/ */
+ {
+ toggleTheme();
+ e.target.blur();
+ }}
+ />
+ );
}
diff --git a/frontend/src/Components/Toast.tsx b/frontend/src/Components/Toast.tsx
index df6acba0..7b1d0508 100644
--- a/frontend/src/Components/Toast.tsx
+++ b/frontend/src/Components/Toast.tsx
@@ -1,52 +1,52 @@
import {
- CheckCircleIcon,
- ExclamationCircleIcon,
-} from "@heroicons/react/24/outline";
-import { useEffect, useState } from "react";
+ CheckCircleIcon,
+ ExclamationCircleIcon
+} from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
// params needed: error or success, message, isVisible
interface ToastProps {
- state: ToastState;
- message: string;
- reset: () => void;
+ state: ToastState;
+ message: string;
+ reset: () => void;
}
export enum ToastState {
- success = "success",
- error = "error",
- null = "",
+ success = 'success',
+ error = 'error',
+ null = ''
}
export default function Toast({ state, message, reset }: ToastProps) {
- const [isVisible, setIsVisible] = useState(true);
+ const [isVisible, setIsVisible] = useState(true);
- useEffect(() => {
- const timeoutId = setTimeout(() => {
- setIsVisible(false);
- setTimeout(() => {
- reset();
- }, 1000);
- }, 5000);
+ useEffect(() => {
+ const timeoutId = setTimeout(() => {
+ setIsVisible(false);
+ setTimeout(() => {
+ reset();
+ }, 1000);
+ }, 5000);
- return () => {
- clearTimeout(timeoutId);
- };
- }, [reset]);
+ return () => {
+ clearTimeout(timeoutId);
+ };
+ }, [reset]);
- return (
-
-
-
- {data.map((_, index) => (
- |
- ))}
-
-
-
-
- );
+ return (
+
+
+
+ {data.map((_, index) => (
+ |
+ ))}
+
+
+
+
+ );
}
diff --git a/frontend/src/Components/UserActivityMap.tsx b/frontend/src/Components/UserActivityMap.tsx
index ca341b35..aeee4e26 100644
--- a/frontend/src/Components/UserActivityMap.tsx
+++ b/frontend/src/Components/UserActivityMap.tsx
@@ -1,365 +1,374 @@
-import { useState } from "react";
-import DropdownControl from "./inputs/DropdownControl";
-import useSWR from "swr";
-import { useAuth } from "@/AuthContext";
-import { ServerResponse } from "@/common";
-import convertSeconds from "./ConvertSeconds";
+import { useState } from 'react';
+import DropdownControl from './inputs/DropdownControl';
+import useSWR from 'swr';
+import { useAuth } from '@/AuthContext';
+import { ServerResponse } from '@/common';
+import convertSeconds from './ConvertSeconds';
type ActivityMapData = {
- date: string;
- total_time: string;
- quartile: number;
+ date: string;
+ total_time: string;
+ quartile: number;
};
/* interface for dynamically generated year options */
interface ValidYears {
- [year: string]: string;
+ [year: string]: string;
}
/* subtract a year from a date */
const subtractYear = (date: Date) => {
- const newDate = new Date(date);
- newDate.setUTCFullYear(date.getUTCFullYear() - 1);
- newDate.setUTCDate(newDate.getUTCDate() + 1);
- return newDate;
+ const newDate = new Date(date);
+ newDate.setUTCFullYear(date.getUTCFullYear() - 1);
+ newDate.setUTCDate(newDate.getUTCDate() + 1);
+ return newDate;
};
/* predefining tailwind strings lets us assign them dynamically later */
const quartileColors: string[] = [
- "bg-inner-background",
- "bg-teal-1",
- "bg-teal-2",
- "bg-teal-3",
- "bg-teal-4",
+ 'bg-inner-background',
+ 'bg-teal-1',
+ 'bg-teal-2',
+ 'bg-teal-3',
+ 'bg-teal-4'
];
/* node sizes for the activity map */
const nodeSizes: string =
- "w-1.5 h-1.5 rounded-sm text-xs md:w-2 md:h-2 lg:w-3 lg:h-3 xl:w-3.5 xl:h-3.5 xl:rounded-md";
+ 'w-1.5 h-1.5 rounded-sm text-xs md:w-2 md:h-2 lg:w-3 lg:h-3 xl:w-3.5 xl:h-3.5 xl:rounded-md';
/* gaps between cells in activity map */
-const gapSizes: string = "p-0 ml-px mt-px md:m-0 md:p-px";
+const gapSizes: string = 'p-0 ml-px mt-px md:m-0 md:p-px';
/* main component for the user activity map */
export default function UserActivityMap() {
- const { user } = useAuth();
+ const { user } = useAuth();
- const createdAtYear = parseInt(user?.created_at.substr(0, 4));
+ const createdAtYear = parseInt(user?.created_at.substr(0, 4));
- const [yearEnd, setYearEnd] = useState(new Date());
- const [dropdownValDesc, setDropdownValDesc] = useState("the past year");
+ const [yearEnd, setYearEnd] = useState(new Date());
+ const [dropdownValDesc, setDropdownValDesc] = useState('the past year');
- const { data, error, isLoading } = useSWR>(
- `/api/users/${user.id}/daily-activity${dropdownValDesc !== "the past year" ? "?year=" + dropdownValDesc.trim() : ""}`,
- );
+ const { data, error, isLoading } = useSWR>(
+ `/api/users/${user.id}/daily-activity${dropdownValDesc !== 'the past year' ? '?year=' + dropdownValDesc.trim() : ''}`
+ );
- const generateYearOptions = () => {
- const years: ValidYears = { "Past year": "Past year" };
- const currentYear = new Date().getUTCFullYear();
- let i = currentYear - createdAtYear;
- for (i; i >= 0; i--) {
- /* added " " to change listed order without impacting appearance */
- const str = " " + String(createdAtYear + i);
- years[str] = str;
- }
- return years;
- };
+ const generateYearOptions = () => {
+ const years: ValidYears = { 'Past year': 'Past year' };
+ const currentYear = new Date().getUTCFullYear();
+ let i = currentYear - createdAtYear;
+ for (i; i >= 0; i--) {
+ /* added " " to change listed order without impacting appearance */
+ const str = ' ' + String(createdAtYear + i);
+ years[str] = str;
+ }
+ return years;
+ };
- const dropdownChange = (val: string) => {
- let date;
- if (val == "Past year") {
- date = new Date();
- setYearEnd(date);
- val = "the past year";
- } else {
- date = new Date(Number(val), 0, 1);
- setYearEnd(new Date(Number(val), 11, 31));
- }
- setDropdownValDesc(val);
- };
+ const dropdownChange = (val: string) => {
+ let date;
+ if (val == 'Past year') {
+ date = new Date();
+ setYearEnd(date);
+ val = 'the past year';
+ } else {
+ date = new Date(Number(val), 0, 1);
+ setYearEnd(new Date(Number(val), 11, 31));
+ }
+ setDropdownValDesc(val);
+ };
- /* generate nodes for the legend */
- const legendNodes: JSX.Element[] = [];
- for (let i = 0; i < 5; i++) {
- legendNodes.push(
-
- Open Content
-
-
- );
+ );
}
diff --git a/frontend/src/Components/ResponsiveNavLink.tsx b/frontend/src/Components/ResponsiveNavLink.tsx
index 3edee0b2..19bd7266 100644
--- a/frontend/src/Components/ResponsiveNavLink.tsx
+++ b/frontend/src/Components/ResponsiveNavLink.tsx
@@ -1,21 +1,21 @@
-import { NavLinkProps } from "./NavLink";
+import { NavLinkProps } from './NavLink';
export default function ResponsiveNavLink({
- active = false,
- className = "",
- children,
- ...props
+ active = false,
+ className = '',
+ children,
+ ...props
}: NavLinkProps & { active?: boolean }) {
- return (
- Resources
-
- {data.data.map((category: Category, index: number) => {
- return (
-
-
+
-
+
+ Open Content
+
+
Resources
+
+ {data.data.map((category: Category, index: number) => {
+ return (
+
+
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
}
diff --git a/frontend/src/Components/SecondaryButton.tsx b/frontend/src/Components/SecondaryButton.tsx
index c88d142d..9f8b2478 100644
--- a/frontend/src/Components/SecondaryButton.tsx
+++ b/frontend/src/Components/SecondaryButton.tsx
@@ -1,24 +1,24 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes } from 'react';
export default function SecondaryButton({
- type = "button",
- className = "",
- disabled,
- children,
- ...props
+ type = 'button',
+ className = '',
+ disabled,
+ children,
+ ...props
}: ButtonHTMLAttributes
-
- );
+ return (
+ {title.toUpperCase()}
-- {number} - - {label.toLowerCase()} - -
-
+
+ );
}
diff --git a/frontend/src/Components/ThemeContext.tsx b/frontend/src/Components/ThemeContext.tsx
index 33a7a59d..38eb0b5f 100644
--- a/frontend/src/Components/ThemeContext.tsx
+++ b/frontend/src/Components/ThemeContext.tsx
@@ -1,42 +1,42 @@
-import React, { createContext, useState, useEffect, ReactNode } from "react";
+import React, { createContext, useState, useEffect, ReactNode } from 'react';
interface ThemeContextType {
- theme: string;
- toggleTheme: () => void;
+ theme: string;
+ toggleTheme: () => void;
}
const defaultContext: ThemeContextType = {
- theme: "light",
- toggleTheme: () => {},
+ theme: 'light',
+ toggleTheme: () => {}
};
export const ThemeContext = createContext{title.toUpperCase()}
++ {number} + + {label.toLowerCase()} + +
+
-
- );
+ return (
+
- {state == "success" ? (
-
-
+
+ );
}
diff --git a/frontend/src/Components/ToggleView.tsx b/frontend/src/Components/ToggleView.tsx
index 519b9ee7..bb4f8fab 100644
--- a/frontend/src/Components/ToggleView.tsx
+++ b/frontend/src/Components/ToggleView.tsx
@@ -1,35 +1,35 @@
-import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/solid";
+import { ListBulletIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
export enum ViewType {
- Grid = "Grid",
- List = "List",
+ Grid = 'Grid',
+ List = 'List'
}
export default function ToggleView({
- activeView,
- setActiveView,
+ activeView,
+ setActiveView
}: {
- activeView: ViewType;
- setActiveView: Function;
+ activeView: ViewType;
+ setActiveView: Function;
}) {
- return (
-
+ {state == 'success' ? (
+
+
-
-
- );
+ return (
+
- {/* TO DO: come back and render on active or not */}
-
-
-
-
+
+
+ );
}
diff --git a/frontend/src/Components/TopProgActivityPieChart.tsx b/frontend/src/Components/TopProgActivityPieChart.tsx
index 247672fa..1d272204 100644
--- a/frontend/src/Components/TopProgActivityPieChart.tsx
+++ b/frontend/src/Components/TopProgActivityPieChart.tsx
@@ -1,37 +1,40 @@
-import { PieChart, Pie, Legend, Cell, ResponsiveContainer } from "recharts";
-import { ThemeContext } from "./ThemeContext";
-import { useContext } from "react";
+import { PieChart, Pie, Legend, Cell, ResponsiveContainer } from 'recharts';
+import { ThemeContext } from './ThemeContext';
+import { useContext } from 'react';
export default function TopProgPieChart({ data }: { data: any }) {
- const { theme } = useContext(ThemeContext);
+ const { theme } = useContext(ThemeContext);
- var COLORS = ["#D7F4F1", "#B0DFDA", "#18ABA0", "#005952", "#002E2A"];
- if (theme == "dark") {
- COLORS = ["#11554E", "#13746C", "#14958A", "#61BAB2", "#B0DFDA"];
- }
+ var COLORS = ['#D7F4F1', '#B0DFDA', '#18ABA0', '#005952', '#002E2A'];
+ if (theme == 'dark') {
+ COLORS = ['#11554E', '#13746C', '#14958A', '#61BAB2', '#B0DFDA'];
+ }
- console.log(data);
+ console.log(data);
- return (
-
+ {/* TO DO: come back and render on active or not */}
+
+
+
+
-
-
-
-
- {/*
- {/* Could put something here, like "Keep up the good work!" */}
-
-
-
- Less
- {legendNodes.map((node) => node)}
- More
- */}
-
- {error ? (
-
-
- Error loading activity. Please try again later.
+ return (
+ //
-
- ,
- );
- }
+ /* add spacers for days of week before activity range */
+ for (i = 0; i < dateCount.getUTCDay(); i++) {
+ tableData.push(
+
+
+
+ );
+ }
- i = new Date().getDay() + 1;
+ i = new Date().getDay() + 1;
- /* fill first months array element if range starts midweek */
- if (dateCount.getUTCDay() != 0) {
- if (dateCount.getUTCDate() < 8) {
- insertMonthHeader(dateCount);
- } else {
- tableMonths.push("");
+ /* fill first months array element if range starts midweek */
+ if (dateCount.getUTCDay() != 0) {
+ if (dateCount.getUTCDate() < 8) {
+ insertMonthHeader(dateCount);
+ } else {
+ tableMonths.push('');
+ }
}
- }
- /* fill cells with Nodes for days in range */
- while (dateCount <= end) {
- /* at start of new week, if new, push month, else push empty string */
- if (dateCount.getUTCDay() == 0) {
- newMonth = dateCount.getUTCMonth();
- if (
- newMonth != oldMonth &&
- dateCount.getUTCDate() < 8 &&
- tableMonths[tableMonths.length - 1] == ""
- ) {
- insertMonthHeader(dateCount);
- } else {
- tableMonths.push("");
- }
- oldMonth = newMonth;
- }
+ /* fill cells with Nodes for days in range */
+ while (dateCount <= end) {
+ /* at start of new week, if new, push month, else push empty string */
+ if (dateCount.getUTCDay() == 0) {
+ newMonth = dateCount.getUTCMonth();
+ if (
+ newMonth != oldMonth &&
+ dateCount.getUTCDate() < 8 &&
+ tableMonths[tableMonths.length - 1] == ''
+ ) {
+ insertMonthHeader(dateCount);
+ } else {
+ tableMonths.push('');
+ }
+ oldMonth = newMonth;
+ }
- /* in range and activity on date */
- if (
- i < len &&
- dateCount.toISOString().split("T")[0] == data[i].date.split("T")[0]
- ) {
- const activityTime = convertSeconds(Number(data[i].total_time));
- tableData.push(
-
- ,
- );
- aggregateActivityTime += Number(data[i].total_time);
- i += 1;
- } else {
- tableData.push(
-
- ,
- );
+ /* in range and activity on date */
+ if (
+ i < len &&
+ dateCount.toISOString().split('T')[0] == data[i].date.split('T')[0]
+ ) {
+ const activityTime = convertSeconds(Number(data[i].total_time));
+ tableData.push(
+
+
+ );
+ aggregateActivityTime += Number(data[i].total_time);
+ i += 1;
+ } else {
+ tableData.push(
+
+
+ );
+ }
+ dateCount.setUTCDate(dateCount.getUTCDate() + 1);
}
- dateCount.setUTCDate(dateCount.getUTCDate() + 1);
- }
- /* add empty cells for days of week after activity range */
- for (i = dateCount.getUTCDay(); i < 7; i++) {
- tableData.push(
-
-
- ,
- );
- }
- return (
- <>
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {weekdays[day]}
+
+
+ );
+ };
return (
-
-
- {weekdays[day]}
-
-
+
+
+
+
);
- };
- return (
-
-
-
-
- );
};
export default WeekActivityChart;
diff --git a/frontend/src/Components/forms/AddCategoryForm.tsx b/frontend/src/Components/forms/AddCategoryForm.tsx
index 8bfbcf73..0816631b 100644
--- a/frontend/src/Components/forms/AddCategoryForm.tsx
+++ b/frontend/src/Components/forms/AddCategoryForm.tsx
@@ -1,44 +1,44 @@
-import { useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-import { TextInput, CloseX, SubmitButton } from "../inputs";
+import { useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { TextInput, CloseX, SubmitButton } from '../inputs';
type Inputs = {
- title: string;
+ title: string;
};
export default function AddCategoryForm({
- onSuccess,
+ onSuccess
}: {
- onSuccess: (title: string) => void;
+ onSuccess: (title: string) => void;
}) {
- const [errorMessage, _] = useState("");
+ const [errorMessage, _] = useState('');
- const {
- register,
- handleSubmit,
- reset,
- formState: { errors },
- } = useForm();
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors }
+ } = useForm();
- const onSubmit: SubmitHandler = async (data) => {
- onSuccess(data.title);
- reset();
- };
+ const onSubmit: SubmitHandler = async (data) => {
+ onSuccess(data.title);
+ reset();
+ };
- return (
- ();
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors }
+ } = useForm();
- const onSubmit: SubmitHandler = async (data) => {
- onSuccess(data.title, data.url);
- reset();
- };
+ const onSubmit: SubmitHandler = async (data) => {
+ onSuccess(data.title, data.url);
+ reset();
+ };
- return (
- ();
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors }
+ } = useForm();
- const onSubmit: SubmitHandler = async (data) => {
- try {
- if (!data.base_url.startsWith("http")) {
- data.base_url = "https://" + data.base_url;
- }
- setErrorMessage("");
- const response = await axios.post("/api/provider-platforms", data);
- if (response.status !== 201) {
- onSuccess(ToastState.error, "Failed to add provider platform");
- }
- reset();
- onSuccess(ToastState.success, "Provider platform created successfully");
- } catch (error: any) {
- setErrorMessage(error.response.data.message);
- }
- };
+ const onSubmit: SubmitHandler = async (data) => {
+ try {
+ if (!data.base_url.startsWith('http')) {
+ data.base_url = 'https://' + data.base_url;
+ }
+ setErrorMessage('');
+ const response = await axios.post('/api/provider-platforms', data);
+ if (response.status !== 201) {
+ onSuccess(ToastState.error, 'Failed to add provider platform');
+ }
+ reset();
+ onSuccess(
+ ToastState.success,
+ 'Provider platform created successfully'
+ );
+ } catch (error: any) {
+ setErrorMessage(error.response.data.message);
+ }
+ };
- return (
- ([]);
- const [selectedProviders, setSelectedProviders] = useState([]);
- const {
- reset,
- register,
- handleSubmit,
- formState: { errors },
- } = useForm();
+ const [errorMessage, setErrorMessage] = useState('');
+ const [providers, setProviders] = useState([]);
+ const [selectedProviders, setSelectedProviders] = useState([]);
+ const {
+ reset,
+ register,
+ handleSubmit,
+ formState: { errors }
+ } = useForm();
- const onSubmit: SubmitHandler = async (data) => {
- try {
- setErrorMessage("");
- const response = await axios.post("/api/users", {
- user: data,
- provider_platforms: selectedProviders,
- });
+ const onSubmit: SubmitHandler = async (data) => {
+ try {
+ setErrorMessage('');
+ const response = await axios.post('/api/users', {
+ user: data,
+ provider_platforms: selectedProviders
+ });
- if (response.status !== 201) {
- onSuccess("", "Failed to create user", ToastState.error);
- }
- reset();
- onSuccess(
- response.data.temp_password,
- "User created successfully with temporary password",
- ToastState.success,
- );
- } catch (error: any) {
- setErrorMessage(error.response.data.message);
- }
- };
-
- const handleAddUserToProviderList = (providerId: number) => {
- if (selectedProviders.includes(providerId)) {
- setSelectedProviders(selectedProviders.filter((id) => id !== providerId));
- } else {
- setSelectedProviders([...selectedProviders, providerId]);
- }
- };
+ if (response.status !== 201) {
+ onSuccess('', 'Failed to create user', ToastState.error);
+ }
+ reset();
+ onSuccess(
+ response.data.temp_password,
+ 'User created successfully with temporary password',
+ ToastState.success
+ );
+ } catch (error: any) {
+ setErrorMessage(error.response.data.message);
+ }
+ };
- useEffect(() => {
- const fetchActiveProviders = async () => {
- try {
- const resp = await axios.get(
- `/api/provider-platforms?only=oidc_enabled`,
- );
- if (resp.status === 200) {
- setProviders(resp.data.data);
+ const handleAddUserToProviderList = (providerId: number) => {
+ if (selectedProviders.includes(providerId)) {
+ setSelectedProviders(
+ selectedProviders.filter((id) => id !== providerId)
+ );
+ } else {
+ setSelectedProviders([...selectedProviders, providerId]);
}
- } catch (error: any) {
- setErrorMessage(error.response.data.message);
- }
};
- fetchActiveProviders();
- }, []);
- return (
- ();
+ const {
+ control,
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors }
+ } = useForm();
- const password = useWatch({
- control,
- name: "password",
- });
+ const password = useWatch({
+ control,
+ name: 'password'
+ });
- const confirm = useWatch({
- control,
- name: "confirm",
- });
+ const confirm = useWatch({
+ control,
+ name: 'confirm'
+ });
- const facility = useWatch({
- control,
- name: "facility_name",
- });
- useEffect(() => {
- const checkFacilityName = async () => {
- try {
- const resp = await axios.get("/api/facilities/1");
- if (resp.status === 200) {
- setIsFacilityDefault(resp.data.data[0].name === "Default");
- return;
- }
- } catch (error: any) {
- setIsFacilityDefault(false);
- }
- };
- checkFacilityName();
- }, []);
+ const facility = useWatch({
+ control,
+ name: 'facility_name'
+ });
+ useEffect(() => {
+ const checkFacilityName = async () => {
+ try {
+ const resp = await axios.get('/api/facilities/1');
+ if (resp.status === 200) {
+ setIsFacilityDefault(resp.data.data[0].name === 'Default');
+ return;
+ }
+ } catch (error: any) {
+ setIsFacilityDefault(false);
+ }
+ };
+ checkFacilityName();
+ }, []);
- const isLengthValid = password && password.length >= 8;
- const hasNumber = /\d/.test(password);
- const passwordsMatch = password === confirm;
- const isValid = isLengthValid && hasNumber && passwordsMatch;
- const validFacility =
- facility && facility.length > 2 && facility.trim().length > 2;
- const isFirstAdminLogin =
- auth.user.id === 1 && auth.user.role === "admin" && isFacilityDefault;
+ const isLengthValid = password && password.length >= 8;
+ const hasNumber = /\d/.test(password);
+ const passwordsMatch = password === confirm;
+ const isValid = isLengthValid && hasNumber && passwordsMatch;
+ const validFacility =
+ facility && facility.length > 2 && facility.trim().length > 2;
+ const isFirstAdminLogin =
+ auth.user.id === 1 && auth.user.role === 'admin' && isFacilityDefault;
- const submit: SubmitHandler = async (data) => {
- try {
- setErrorMessage("");
- setProcessing(true);
- if (data.facility_name) {
- data.facility_name = data.facility_name.trim();
- }
- const response = await axios.post("/api/reset-password", data);
- if (response.status === 200) {
- window.location.replace("dashboard");
- } else {
- setErrorMessage(`Your passwords did not pass validation,
+ const submit: SubmitHandler = async (data) => {
+ try {
+ setErrorMessage('');
+ setProcessing(true);
+ if (data.facility_name) {
+ data.facility_name = data.facility_name.trim();
+ }
+ const response = await axios.post('/api/reset-password', data);
+ if (response.status === 200) {
+ window.location.replace('dashboard');
+ } else {
+ setErrorMessage(`Your passwords did not pass validation,
please check that they match and are 8 or more characters with at least 1 number.`);
- }
- } catch (error: any) {
- setProcessing(false);
- setErrorMessage(
- error.response.data ||
- "Your passwords didn't pass validation, please try again.",
- );
- reset();
- }
- };
+ }
+ } catch (error: any) {
+ setProcessing(false);
+ setErrorMessage(
+ error.response.data ||
+ "Your passwords didn't pass validation, please try again."
+ );
+ reset();
+ }
+ };
- return (
-
- );
+
+
+ );
}
/* component for the cells of our activity map */
function Node({
- quartile,
- date,
- activity_time,
+ quartile,
+ date,
+ activity_time
}: {
- quartile: number;
- date?: Date;
- activity_time?: string;
+ quartile: number;
+ date?: Date;
+ activity_time?: string;
}) {
- let tooltipString = "";
- if (!date) {
- /* if node is from legend */
+ let tooltipString = '';
+ if (!date) {
+ /* if node is from legend */
+ return (
+
+ );
+ }
+ if (!activity_time) {
+ tooltipString = 'No activity on ' + date.toISOString().split('T')[0];
+ } else {
+ tooltipString = `${activity_time} on ${date?.toISOString().split('T')[0]}`;
+ }
return (
-
+
+
- ) : isLoading ? (
-
+
+
-
+ {/* Could put something here, like "Keep up the good work!" */}
+
+
+
Less
+ {legendNodes.map((node) => node)}
+ More
+
-
-
- ) : (
- data && (
-
-
- );
+ */}
+
-
+ {error ? (
+
- )
- )}
-
+
+ ) : isLoading ? (
+
+ Error loading activity. Please try again later.
+
+
+
+
+ ) : (
+ data && (
+
+
+ )
+ )}
+
+
);
- }
- if (!activity_time) {
- tooltipString = "No activity on " + date.toISOString().split("T")[0];
- } else {
- tooltipString = `${activity_time} on ${date?.toISOString().split("T")[0]}`;
- }
- return (
-
-
-
- );
}
/* component that builds the activity map table */
function ActivityMapTable({
- data,
- end,
- error,
- isLoading,
- range,
+ data,
+ end,
+ error,
+ isLoading,
+ range
}: {
- data: ActivityMapData[];
- end: Date;
- error: any;
- isLoading: boolean;
- range: string;
+ data: ActivityMapData[];
+ end: Date;
+ error: any;
+ isLoading: boolean;
+ range: string;
}) {
- /* array that holds cells for the table */
- const tableData: JSX.Element[] = [];
- const tableMonths: string[] = [];
- let i;
- const len = data?.length;
- // const now = new Date();
- let aggregateActivityTime = 0;
- let oldMonth, newMonth;
+ /* array that holds cells for the table */
+ const tableData: JSX.Element[] = [];
+ const tableMonths: string[] = [];
+ let i;
+ const len = data?.length;
+ // const now = new Date();
+ let aggregateActivityTime = 0;
+ let oldMonth, newMonth;
- const getAggregateActivityTime = (time: number) => {
- if (error) {
- return "Error fetching activity data";
- }
- if (isLoading) {
- return "Loading...";
- } else if (time == 0) {
- return "No activity ";
- } else if (time == 1) {
- return "You have completed one hour of activity";
- } else {
- return "You have completed " + String(time) + " hours of activity";
- }
- };
+ const getAggregateActivityTime = (time: number) => {
+ if (error) {
+ return 'Error fetching activity data';
+ }
+ if (isLoading) {
+ return 'Loading...';
+ } else if (time == 0) {
+ return 'No activity ';
+ } else if (time == 1) {
+ return 'You have completed one hour of activity';
+ } else {
+ return 'You have completed ' + String(time) + ' hours of activity';
+ }
+ };
- const insertMonthHeader = (date: Date) => {
- const months = [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec",
- ];
- tableMonths.push(months[date.getUTCMonth()]);
- };
+ const insertMonthHeader = (date: Date) => {
+ const months = [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec'
+ ];
+ tableMonths.push(months[date.getUTCMonth()]);
+ };
- const dateCount = subtractYear(end);
+ const dateCount = subtractYear(end);
- /* add spacers for days of week before activity range */
- for (i = 0; i < dateCount.getUTCDay(); i++) {
- tableData.push(
- | - {node} - | - ); - })} -
| - - | -
- M
- |
- - + /* add empty cells for days of week after activity range */ + for (i = dateCount.getUTCDay(); i < 7; i++) { + tableData.push( + | + | -
- W
- |
- - - | -
- F
- |
- - - | -
- {isLoading || error
- ? null
- : getAggregateActivityTime(Math.floor(aggregateActivityTime / 3600)) +
- " in " +
- range +
- "."}
-
-
- );
+ );
+ }
+ return (
+ <>
+ | + {node} + | + ); + })} +
| + + | +
+ M
+ |
+ + + | +
+ W
+ |
+ + + | +
+ F
+ |
+ + + | +
+ {isLoading || error
+ ? null
+ : getAggregateActivityTime(
+ Math.floor(aggregateActivityTime / 3600)
+ ) +
+ ' in ' +
+ range +
+ '.'}
+
+
+ );
}
diff --git a/frontend/src/Components/WeeklyActivity.tsx b/frontend/src/Components/WeeklyActivity.tsx
index b19ae5a0..10f46a4d 100644
--- a/frontend/src/Components/WeeklyActivity.tsx
+++ b/frontend/src/Components/WeeklyActivity.tsx
@@ -1,104 +1,105 @@
import {
- LineChart,
- Line,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- ResponsiveContainer,
-} from "recharts";
-import { ThemeContext } from "./ThemeContext";
-import { useContext } from "react";
-import { RecentActivity } from "@/common";
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer
+} from 'recharts';
+import { ThemeContext } from './ThemeContext';
+import { useContext } from 'react';
+import { RecentActivity } from '@/common';
const WeekActivityChart = ({ data }: { data: any }) => {
- const { theme } = useContext(ThemeContext);
- var lineColor = theme == "light" ? "#18ABA0" : "#61BAB2";
- var gridColor = theme == "light" ? "#ECECEC" : "#737373";
- var backgroundColor = theme == "light" ? "#FFFFFF" : "#0F2926";
+ const { theme } = useContext(ThemeContext);
+ var lineColor = theme == 'light' ? '#18ABA0' : '#61BAB2';
+ var gridColor = theme == 'light' ? '#ECECEC' : '#737373';
+ var backgroundColor = theme == 'light' ? '#FFFFFF' : '#0F2926';
- const result: RecentActivity[] = new Array(7);
- let currentDate = new Date();
+ const result: RecentActivity[] = Array.from({ length: 7 });
+ let currentDate = new Date();
- for (let i = 6; i >= 0; i--) {
- let date = new Date(currentDate);
- date.setDate(date.getDate() - i);
- const dateString = date.toISOString().split("T")[0];
- let entry = data.find(
- (activity: RecentActivity) => activity.date.split("T")[0] === dateString,
- );
- entry
- ? (entry = {
- date: entry.date.split("T")[0],
- delta: Math.round(entry.delta / 60),
- })
- : (entry = { date: dateString, delta: 0 });
- result[6 - i] = entry;
- }
+ for (let i = 6; i >= 0; i--) {
+ let date = new Date(currentDate);
+ date.setDate(date.getDate() - i);
+ const dateString = date.toISOString().split('T')[0];
+ let entry = data.find(
+ (activity: RecentActivity) =>
+ activity.date.split('T')[0] === dateString
+ );
+ entry
+ ? (entry = {
+ date: entry.date.split('T')[0],
+ delta: Math.round(entry.delta / 60)
+ })
+ : (entry = { date: dateString, delta: 0 });
+ result[6 - i] = entry;
+ }
- const weekdays = [
- "Sun",
- "Mon",
- "Tues",
- "Wed",
- "Thurs",
- "Fri",
- "Sat",
- "Today",
- ];
- const XAxisTick = (props) => {
- const { x, y, payload } = props;
- let day = new Date(payload.value).getDay() + 1;
- if (new Date().getDay() == day) day = 7;
+ const weekdays = [
+ 'Sun',
+ 'Mon',
+ 'Tues',
+ 'Wed',
+ 'Thurs',
+ 'Fri',
+ 'Sat',
+ 'Today'
+ ];
+ const XAxisTick = (props) => {
+ const { x, y, payload } = props;
+ let day = new Date(payload.value).getDay() + 1;
+ if (new Date().getDay() == day) day = 7;
+ return (
+
- reset()} />
-
-
- );
+ return (
+
+ reset()} />
+
+
+ );
}
diff --git a/frontend/src/Components/forms/AddLinkForm.tsx b/frontend/src/Components/forms/AddLinkForm.tsx
index ccde44a7..018eabe3 100644
--- a/frontend/src/Components/forms/AddLinkForm.tsx
+++ b/frontend/src/Components/forms/AddLinkForm.tsx
@@ -1,54 +1,54 @@
-import { useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-import { SubmitButton } from "../inputs/SubmitButton";
-import { TextInput } from "../inputs/TextInput";
-import { CloseX } from "../inputs/CloseX";
+import { useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { SubmitButton } from '../inputs/SubmitButton';
+import { TextInput } from '../inputs/TextInput';
+import { CloseX } from '../inputs/CloseX';
type Inputs = {
- title: string;
- url: string;
+ title: string;
+ url: string;
};
export default function AddLinkForm({
- onSuccess,
+ onSuccess
}: {
- onSuccess: (title: string, url: string) => void;
+ onSuccess: (title: string, url: string) => void;
}) {
- const [errorMessage, _] = useState("");
+ const [errorMessage, _] = useState('');
- const {
- register,
- handleSubmit,
- reset,
- formState: { errors },
- } = useForm
- reset()} />
-
-
- );
+ return (
+
+ reset()} />
+
+
+ );
}
diff --git a/frontend/src/Components/forms/AddProviderForm.tsx b/frontend/src/Components/forms/AddProviderForm.tsx
index 5df49013..5df77bf8 100644
--- a/frontend/src/Components/forms/AddProviderForm.tsx
+++ b/frontend/src/Components/forms/AddProviderForm.tsx
@@ -1,128 +1,131 @@
-import { ProviderPlatformState, ProviderPlatformType } from "@/common";
-import axios from "axios";
-import { useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { ProviderPlatformState, ProviderPlatformType } from '@/common';
+import axios from 'axios';
+import { useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
import {
- CloseX,
- DropdownInput,
- SubmitButton,
- TextAreaInput,
- TextInput,
-} from "../inputs";
-import { ToastState } from "../Toast";
+ CloseX,
+ DropdownInput,
+ SubmitButton,
+ TextAreaInput,
+ TextInput
+} from '../inputs';
+import { ToastState } from '../Toast';
type ProviderInputs = {
- name: string;
- type: ProviderPlatformType;
- description: string;
- base_url: string;
- account_id: string;
- access_key: string;
- icon_url: string;
- state: ProviderPlatformState;
+ name: string;
+ type: ProviderPlatformType;
+ description: string;
+ base_url: string;
+ account_id: string;
+ access_key: string;
+ icon_url: string;
+ state: ProviderPlatformState;
};
export default function AddProviderForm({
- onSuccess,
+ onSuccess
}: {
- onSuccess: Function;
+ onSuccess: Function;
}) {
- const [errorMessage, setErrorMessage] = useState("");
+ const [errorMessage, setErrorMessage] = useState('');
- const {
- register,
- handleSubmit,
- reset,
- formState: { errors },
- } = useForm
- reset()} />
-
-
- );
+ return (
+
+ reset()} />
+
+
+ );
}
diff --git a/frontend/src/Components/forms/AddUserForm.tsx b/frontend/src/Components/forms/AddUserForm.tsx
index 3dc6b56a..83ceb3be 100644
--- a/frontend/src/Components/forms/AddUserForm.tsx
+++ b/frontend/src/Components/forms/AddUserForm.tsx
@@ -1,142 +1,150 @@
-import { ProviderPlatform, UserRole } from "../../common";
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-import { ToastState } from "../Toast";
-import { CloseX } from "../inputs/CloseX";
-import { TextInput } from "../inputs/TextInput";
-import { DropdownInput } from "../inputs/DropdownInput";
-import { SubmitButton } from "../inputs/SubmitButton";
+import { ProviderPlatform, UserRole } from '../../common';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { ToastState } from '../Toast';
+import { CloseX } from '../inputs/CloseX';
+import { TextInput } from '../inputs/TextInput';
+import { DropdownInput } from '../inputs/DropdownInput';
+import { SubmitButton } from '../inputs/SubmitButton';
type Inputs = {
- name_first: string;
- name_last: string;
- username: string;
- role: UserRole;
+ name_first: string;
+ name_last: string;
+ username: string;
+ role: UserRole;
};
export default function AddUserForm({
- onSuccess,
+ onSuccess
}: {
- onSuccess: (psw: string, msg: string, err: ToastState) => void;
+ onSuccess: (psw: string, msg: string, err: ToastState) => void;
}) {
- const [errorMessage, setErrorMessage] = useState("");
- const [providers, setProviders] = useState
- reset()} />
-
-
- );
+ useEffect(() => {
+ const fetchActiveProviders = async () => {
+ try {
+ const resp = await axios.get(
+ `/api/provider-platforms?only=oidc_enabled`
+ );
+ if (resp.status === 200) {
+ setProviders(resp.data.data);
+ }
+ } catch (error: any) {
+ setErrorMessage(error.response.data.message);
+ }
+ };
+ fetchActiveProviders();
+ }, []);
+
+ return (
+
+ reset()} />
+
+
+ );
}
diff --git a/frontend/src/Components/forms/ChangePasswordForm.tsx b/frontend/src/Components/forms/ChangePasswordForm.tsx
index d9abdcef..0bdc9ae7 100644
--- a/frontend/src/Components/forms/ChangePasswordForm.tsx
+++ b/frontend/src/Components/forms/ChangePasswordForm.tsx
@@ -1,200 +1,200 @@
-import { useEffect, useState } from "react";
-import { useForm, useWatch, SubmitHandler } from "react-hook-form";
-import InputError from "../../Components/inputs/InputError";
-import PrimaryButton from "../../Components/PrimaryButton";
-import { TextInput } from "../../Components/inputs/TextInput";
-import { CheckIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from 'react';
+import { useForm, useWatch, SubmitHandler } from 'react-hook-form';
+import InputError from '../../Components/inputs/InputError';
+import PrimaryButton from '../../Components/PrimaryButton';
+import { TextInput } from '../../Components/inputs/TextInput';
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/solid';
-import axios from "axios";
-import { useAuth } from "@/AuthContext";
+import axios from 'axios';
+import { useAuth } from '@/AuthContext';
type Inputs = {
- password: string;
- confirm: string;
- facility_name: string;
+ password: string;
+ confirm: string;
+ facility_name: string;
};
export default function ChangePasswordForm() {
- const [errorMessage, setErrorMessage] = useState("");
- const [processing, setProcessing] = useState(false);
- const [isFacilityDefault, setIsFacilityDefault] = useState(null);
- const auth = useAuth();
+ const [errorMessage, setErrorMessage] = useState('');
+ const [processing, setProcessing] = useState(false);
+ const [isFacilityDefault, setIsFacilityDefault] = useState(null);
+ const auth = useAuth();
- const {
- control,
- register,
- handleSubmit,
- reset,
- formState: { errors },
- } = useForm
+
+ {processing ? (
+
+ ) : (
+
+
+
+ );
}
diff --git a/frontend/src/Components/forms/ConfirmImportAllUsersForm.tsx b/frontend/src/Components/forms/ConfirmImportAllUsersForm.tsx
index 2ad757f0..71caf548 100644
--- a/frontend/src/Components/forms/ConfirmImportAllUsersForm.tsx
+++ b/frontend/src/Components/forms/ConfirmImportAllUsersForm.tsx
@@ -1,29 +1,31 @@
-import { CloseX } from "../inputs/CloseX";
+import { CloseX } from '../inputs/CloseX';
export default function ConfirmImportAllUsersForm({
- onCancel,
- onSuccess,
+ onCancel,
+ onSuccess
}: {
- onCancel: Function;
- onSuccess: Function;
+ onCancel: Function;
+ onSuccess: Function;
}) {
- return (
- Reset Password
+ )}
+
- onCancel()} />
-
- );
+ return (
+ Are you sure you would like to import all users?
- -
+ onCancel()} />
+
+ );
}
diff --git a/frontend/src/Components/forms/ConsentForm.tsx b/frontend/src/Components/forms/ConsentForm.tsx
index 5c48590d..5f12a7fd 100644
--- a/frontend/src/Components/forms/ConsentForm.tsx
+++ b/frontend/src/Components/forms/ConsentForm.tsx
@@ -1,50 +1,52 @@
-import axios from "axios";
+import axios from 'axios';
export default function ConsentForm() {
- const accept = async () => {
- try {
- const urlParams = new URLSearchParams(window.location.search);
- const consent = urlParams.get("consent_challenge");
- await axios(`/api/consent/accept`, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- data: { consent_challenge: consent },
- });
- return;
- } catch (error: any) {
- console.error(error.response);
- }
- };
- const deny = () => {
- window.location.replace("/");
- };
- return (
- + Are you sure you would like to import all users? +
+ +
- ({
- defaultValues: {
- name: provider.name,
- description: provider.description,
- type: provider.type,
- base_url: provider.base_url,
- account_id: provider.account_id,
- icon_url: provider.icon_url,
- state: provider.state,
- },
- });
-
- const getAccessKey = async () => {
- if (showAccessKey) {
- setShowAccessKey(false);
- return;
- }
- if (accessKey) {
- setShowAccessKey(true);
- return;
- }
- try {
- const response = await axios.get(
- `/api/provider-platforms/${provider.id}`,
- );
- setAccessKey(response.data.data[0]["access_key"]);
- setShowAccessKey(true);
- } catch (error) {
- console.log(error);
- setErrorMessage(error.response.data.message);
- }
- };
-
- function diffFormData(formData: any, currentUserData: any) {
- const changes: Partial = {};
- Object.keys(formData).forEach((key) => {
- if (
- formData[key] !== currentUserData[key] &&
- formData[key] !== undefined
- ) {
- changes[key] = formData[key];
- }
+ const [errorMessage, setErrorMessage] = useState('');
+ const [showAdditionalFields, setShowAdditionalFields] = useState(false);
+ const [showAccessKey, setShowAccessKey] = useState(false);
+ const [accessKey, setAccessKey] = useState('');
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors }
+ } = useForm({
+ defaultValues: {
+ name: provider.name,
+ description: provider.description,
+ type: provider.type,
+ base_url: provider.base_url,
+ account_id: provider.account_id,
+ icon_url: provider.icon_url,
+ state: provider.state
+ }
});
- return changes;
- }
- const onSubmit: SubmitHandler = async (data) => {
- const cleanData = diffFormData(data, provider);
- try {
- setErrorMessage("");
- const response = await axios.patch(
- `/api/provider-platforms/${provider?.id}`,
- cleanData,
- );
- if (response.status !== 201) {
- onSuccess(ToastState.error, "Failed to update provider platform");
- }
- reset();
- onSuccess(ToastState.success, "Provider platform updated successfully");
- } catch (error: any) {
- setErrorMessage(error.response.data.message);
- }
- };
+ const getAccessKey = async () => {
+ if (showAccessKey) {
+ setShowAccessKey(false);
+ return;
+ }
+ if (accessKey) {
+ setShowAccessKey(true);
+ return;
+ }
+ try {
+ const response = await axios.get(
+ `/api/provider-platforms/${provider.id}`
+ );
+ setAccessKey(response.data.data[0]['access_key']);
+ setShowAccessKey(true);
+ } catch (error) {
+ console.log(error);
+ setErrorMessage(error.response.data.message);
+ }
+ };
- function closeAndReset() {
- onSuccess();
- reset();
- }
+ function diffFormData(formData: any, currentUserData: any) {
+ const changes: Partial = {};
+ Object.keys(formData).forEach((key) => {
+ if (
+ formData[key] !== currentUserData[key] &&
+ formData[key] !== undefined
+ ) {
+ changes[key] = formData[key];
+ }
+ });
+ return changes;
+ }
- return (
-
-
- );
+ );
}
diff --git a/frontend/src/Components/forms/DeleteForm.tsx b/frontend/src/Components/forms/DeleteForm.tsx
index 2116a690..596f000f 100644
--- a/frontend/src/Components/forms/DeleteForm.tsx
+++ b/frontend/src/Components/forms/DeleteForm.tsx
@@ -1,32 +1,32 @@
-import { CloseX } from "../inputs";
+import { CloseX } from '../inputs';
interface DeleteProps {
- item: string;
- onCancel: () => void;
- onSuccess: () => void;
+ item: string;
+ onCancel: () => void;
+ onSuccess: () => void;
}
export default function DeleteForm({ item, onCancel, onSuccess }: DeleteProps) {
- return (
- Consent Form
-- Do you consent to give this external application access to your - account? -
-
-
-
+ const accept = async () => {
+ try {
+ const urlParams = new URLSearchParams(window.location.search);
+ const consent = urlParams.get('consent_challenge');
+ await axios(`/api/consent/accept`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ data: { consent_challenge: consent }
+ });
+ return;
+ } catch (error: any) {
+ console.error(error.response);
+ }
+ };
+ const deny = () => {
+ window.location.replace('/');
+ };
+ return (
+
-
+
-
+
+ Consent Form +
++ Do you consent to give this external application access to + your account? +
+
+
+
+
+
- onCancel()} />
-
- );
+ return (
+
- Are you sure you would like to delete this {item.toLowerCase()}?
-
This action cannot be undone.
-
+ onCancel()} />
+
+ );
}
diff --git a/frontend/src/Components/forms/EditProviderForm.tsx b/frontend/src/Components/forms/EditProviderForm.tsx
index ac2c6b9d..22e73eb2 100644
--- a/frontend/src/Components/forms/EditProviderForm.tsx
+++ b/frontend/src/Components/forms/EditProviderForm.tsx
@@ -1,238 +1,247 @@
import {
- ProviderPlatform,
- ProviderPlatformState,
- ProviderPlatformType,
-} from "@/common";
-import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
-import axios from "axios";
-import { useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
+ ProviderPlatform,
+ ProviderPlatformState,
+ ProviderPlatformType
+} from '@/common';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
+import axios from 'axios';
+import { useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
import {
- CloseX,
- TextInput,
- TextAreaInput,
- DropdownInput,
- SubmitButton,
-} from "../inputs";
-import { ToastState } from "../Toast";
+ CloseX,
+ TextInput,
+ TextAreaInput,
+ DropdownInput,
+ SubmitButton
+} from '../inputs';
+import { ToastState } from '../Toast';
type ProviderInputs = {
- id: number;
- name: string;
- type: ProviderPlatformType;
- description: string;
- base_url: string;
- account_id: string;
- access_key: string;
- icon_url: string;
- state: ProviderPlatformState;
+ id: number;
+ name: string;
+ type: ProviderPlatformType;
+ description: string;
+ base_url: string;
+ account_id: string;
+ access_key: string;
+ icon_url: string;
+ state: ProviderPlatformState;
};
export default function EditProviderForm({
- onSuccess,
- provider,
+ onSuccess,
+ provider
}: {
- onSuccess: Function;
- provider: ProviderPlatform;
+ onSuccess: Function;
+ provider: ProviderPlatform;
}) {
- const [errorMessage, setErrorMessage] = useState("");
- const [showAdditionalFields, setShowAdditionalFields] = useState(false);
- const [showAccessKey, setShowAccessKey] = useState(false);
- const [accessKey, setAccessKey] = useState("");
- const {
- register,
- handleSubmit,
- reset,
- formState: { errors },
- } = useForm
+ Are you sure you would like to delete this {item.toLowerCase()}?
+
This action cannot be undone.
+
- closeAndReset()} />
-
+ );
}
diff --git a/frontend/src/Components/forms/MapUserForm.tsx b/frontend/src/Components/forms/MapUserForm.tsx
index cd4f7f43..ccb3685d 100644
--- a/frontend/src/Components/forms/MapUserForm.tsx
+++ b/frontend/src/Components/forms/MapUserForm.tsx
@@ -1,176 +1,181 @@
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { ToastState } from "../Toast";
-import { ProviderUser } from "@/common";
-import { User } from "@/types";
-import { CloseX } from "../inputs/CloseX";
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { ToastState } from '../Toast';
+import { ProviderUser } from '@/common';
+import { User } from '@/types';
+import { CloseX } from '../inputs/CloseX';
interface Props {
- externalUser: ProviderUser;
- providerId: number;
- onSubmit: (msg: string, err: ToastState) => void;
- onCancel: () => void;
+ externalUser: ProviderUser;
+ providerId: number;
+ onSubmit: (msg: string, err: ToastState) => void;
+ onCancel: () => void;
}
export default function MapUserForm({
- externalUser,
- providerId,
- onSubmit,
- onCancel,
+ externalUser,
+ providerId,
+ onSubmit,
+ onCancel
}: Props) {
- const [errorMessage, setErrorMessage] = useState("");
- const [usersToMap, setUsersToMap] = useState([]);
- const [totalUnmapped, setTotalUnmapped] = useState([]);
- const [displayUsers, setDisplayUsers] = useState([]);
- const [currentPage, setCurrentPage] = useState(1);
- const [selectedUser, setSelectedUser] = useState(null);
- const usersPerPage = 5;
+ const [errorMessage, setErrorMessage] = useState('');
+ const [usersToMap, setUsersToMap] = useState([]);
+ const [totalUnmapped, setTotalUnmapped] = useState([]);
+ const [displayUsers, setDisplayUsers] = useState([]);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [selectedUser, setSelectedUser] = useState(null);
+ const usersPerPage = 5;
- const handlePageChange = (newPage: number) => {
- setCurrentPage(newPage);
- };
+ const handlePageChange = (newPage: number) => {
+ setCurrentPage(newPage);
+ };
- const handleUserSelection = (userId: number) => {
- setSelectedUser(userId);
- };
+ const handleUserSelection = (userId: number) => {
+ setSelectedUser(userId);
+ };
- const handleSubmit = async (userId: number) => {
- try {
- setErrorMessage("");
- const response = await axios.post(
- `/api/provider-platforms/${providerId}/map-user/${userId}`,
- externalUser,
- );
+ const handleSubmit = async (userId: number) => {
+ try {
+ setErrorMessage('');
+ const response = await axios.post(
+ `/api/provider-platforms/${providerId}/map-user/${userId}`,
+ externalUser
+ );
- if (response.status !== 201) {
- onSubmit("", ToastState.error);
- }
- onSubmit(
- "User created successfully with temporary password",
- ToastState.success,
- );
- } catch (error: any) {
- setErrorMessage(error.response.data.message);
- onSubmit("Failed to map user", ToastState.error);
- return;
- }
- };
-
- function handleGetAllUnmappedUsers() {
- if (usersToMap.length === totalUnmapped.length) {
- return;
- }
- if (displayUsers.length < totalUnmapped.length) {
- totalUnmapped.length === 0
- ? onSubmit("No unmapped users in UnlockEd", ToastState.error)
- : setDisplayUsers(totalUnmapped);
- } else {
- setDisplayUsers(usersToMap);
- }
- }
+ if (response.status !== 201) {
+ onSubmit('', ToastState.error);
+ }
+ onSubmit(
+ 'User created successfully with temporary password',
+ ToastState.success
+ );
+ } catch (error: any) {
+ setErrorMessage(error.response.data.message);
+ onSubmit('Failed to map user', ToastState.error);
+ return;
+ }
+ };
- useEffect(() => {
- async function fetchUsers() {
- try {
- const all = await axios.get(
- `/api/users?include=only_unmapped&provider_id=${providerId}`,
- );
- if (all.status !== 200) {
- onSubmit("failed to fetch users, please try again", ToastState.error);
- return;
+ function handleGetAllUnmappedUsers() {
+ if (usersToMap.length === totalUnmapped.length) {
+ return;
}
- setTotalUnmapped(all.data.data);
- const response = await axios.get(
- `/api/users?include=only_unmapped&provider_id=${providerId}&search=${externalUser.username}&search=${externalUser.email}`,
- );
- if (response.status !== 200) {
- onSubmit("Failed to fetch users", ToastState.error);
- return;
+ if (displayUsers.length < totalUnmapped.length) {
+ totalUnmapped.length === 0
+ ? onSubmit('No unmapped users in UnlockEd', ToastState.error)
+ : setDisplayUsers(totalUnmapped);
+ } else {
+ setDisplayUsers(usersToMap);
}
- setUsersToMap(response.data.data);
- setDisplayUsers(response.data.data);
- } catch (error: any) {
- console.log(error);
- setErrorMessage(error);
- onSubmit("Failed to fetch users", ToastState.error);
- return;
- }
}
- externalUser && fetchUsers();
- }, [externalUser]);
- const indexOfLastUser = currentPage * usersPerPage;
- const indexOfFirstUser = indexOfLastUser - usersPerPage;
- const currentUsers = displayUsers.slice(indexOfFirstUser, indexOfLastUser);
- const totalPages = Math.ceil(displayUsers.length / usersPerPage);
+ useEffect(() => {
+ async function fetchUsers() {
+ try {
+ const all = await axios.get(
+ `/api/users?include=only_unmapped&provider_id=${providerId}`
+ );
+ if (all.status !== 200) {
+ onSubmit(
+ 'failed to fetch users, please try again',
+ ToastState.error
+ );
+ return;
+ }
+ setTotalUnmapped(all.data.data);
+ const response = await axios.get(
+ `/api/users?include=only_unmapped&provider_id=${providerId}&search=${externalUser.username}&search=${externalUser.email}`
+ );
+ if (response.status !== 200) {
+ onSubmit('Failed to fetch users', ToastState.error);
+ return;
+ }
+ setUsersToMap(response.data.data);
+ setDisplayUsers(response.data.data);
+ } catch (error: any) {
+ console.log(error);
+ setErrorMessage(error);
+ onSubmit('Failed to fetch users', ToastState.error);
+ return;
+ }
+ }
+ externalUser && fetchUsers();
+ }, [externalUser]);
+
+ const indexOfLastUser = currentPage * usersPerPage;
+ const indexOfFirstUser = indexOfLastUser - usersPerPage;
+ const currentUsers = displayUsers.slice(indexOfFirstUser, indexOfLastUser);
+ const totalPages = Math.ceil(displayUsers.length / usersPerPage);
- return (
-
- , state: ToastState) => void;
- provider: ProviderPlatform;
- onClose: () => void;
+ onSuccess: (
+ response: ServerResponse,
+ state: ToastState
+ ) => void;
+ provider: ProviderPlatform;
+ onClose: () => void;
}) {
- const [errorMessage, setErrorMessage] = useState("");
- const [hasAuto, setHasAuto] = useState(false);
- const {
- register,
- handleSubmit,
- formState: { errors },
- } = useForm({
- defaultValues: {
- redirect_url: "",
- provider_platform_id: provider.id,
- },
- });
+ const [errorMessage, setErrorMessage] = useState('');
+ const [hasAuto, setHasAuto] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ formState: { errors }
+ } = useForm({
+ defaultValues: {
+ redirect_url: '',
+ provider_platform_id: provider.id
+ }
+ });
- const onSubmit: SubmitHandler = async (data) => {
- try {
- setErrorMessage("");
- data.auto_register = hasAuto;
- const response = await axios.post("/api/oidc/clients", data);
- if (response.status !== 201) {
- setErrorMessage("Failed to register OIDC client.");
- onSuccess(response.data, ToastState.error);
- }
- const client = response.data as ServerResponse;
- onSuccess(client, ToastState.success);
- } catch (error: any) {
- setErrorMessage(error);
- onSuccess(error.response.data, ToastState.error);
- }
- };
+ const onSubmit: SubmitHandler = async (data) => {
+ try {
+ setErrorMessage('');
+ data.auto_register = hasAuto;
+ const response = await axios.post('/api/oidc/clients', data);
+ if (response.status !== 201) {
+ setErrorMessage('Failed to register OIDC client.');
+ onSuccess(response.data, ToastState.error);
+ }
+ const client = response.data as ServerResponse;
+ onSuccess(client, ToastState.success);
+ } catch (error: any) {
+ setErrorMessage(error);
+ onSuccess(error.response.data, ToastState.error);
+ }
+ };
- return (
- <>
- onClose()} />
-
-
- );
+ return (
+ <>
+ onClose()} />
+
+
+ );
}
diff --git a/frontend/src/Components/forms/ResetPasswordForm.tsx b/frontend/src/Components/forms/ResetPasswordForm.tsx
index bea151a4..42169c8e 100644
--- a/frontend/src/Components/forms/ResetPasswordForm.tsx
+++ b/frontend/src/Components/forms/ResetPasswordForm.tsx
@@ -1,64 +1,68 @@
-import axios from "axios";
-import { User, UserRole } from "../../common";
-import { CloseX } from "../inputs/CloseX";
+import axios from 'axios';
+import { User, UserRole } from '../../common';
+import { CloseX } from '../inputs/CloseX';
interface ResetPasswordFormProps {
- onCancel: (message: string, is_err: boolean) => void;
- onSuccess: (psw: string) => void;
- user: User | null;
+ onCancel: (message: string, is_err: boolean) => void;
+ onSuccess: (psw: string) => void;
+ user: User | null;
}
export default function ResetPasswordForm({
- user,
- onSuccess,
- onCancel,
+ user,
+ onSuccess,
+ onCancel
}: ResetPasswordFormProps) {
- const getTempPassword = async () => {
- try {
- const response = await axios.post("/api/users/student-password", {
- user_id: user?.id,
- });
- if (response.status !== 200) {
- onCancel("Failed to reset password", true);
- return;
- }
- console.log(response.data["temp_password"]);
- onSuccess(response.data["temp_password"]);
- return;
- } catch (error: any) {
- onCancel(error.response.data.message, true);
- return;
- }
- };
- return (
-
-
- );
+ );
}
diff --git a/frontend/src/Components/forms/RegisterOidcClientForm.tsx b/frontend/src/Components/forms/RegisterOidcClientForm.tsx
index 95dc7278..a5d817b1 100644
--- a/frontend/src/Components/forms/RegisterOidcClientForm.tsx
+++ b/frontend/src/Components/forms/RegisterOidcClientForm.tsx
@@ -1,90 +1,94 @@
-import { OidcClient, ProviderPlatform, ServerResponse } from "../../common";
-import axios from "axios";
-import { useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
-import { TextInput } from "../inputs/TextInput";
-import { SubmitButton } from "../inputs/SubmitButton";
-import { CloseX } from "../inputs/CloseX";
-import { ToastState } from "../Toast";
+import { OidcClient, ProviderPlatform, ServerResponse } from '../../common';
+import axios from 'axios';
+import { useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { TextInput } from '../inputs/TextInput';
+import { SubmitButton } from '../inputs/SubmitButton';
+import { CloseX } from '../inputs/CloseX';
+import { ToastState } from '../Toast';
type Inputs = {
- redirect_url: string;
- provider_platform_id: number;
- auto_register: boolean;
+ redirect_url: string;
+ provider_platform_id: number;
+ auto_register: boolean;
};
export default function RegisterOidcClientForm({
- onSuccess,
- provider,
- onClose,
+ onSuccess,
+ provider,
+ onClose
}: {
- onSuccess: (response: ServerResponseProvider Username:
-
- {externalUser?.username ?? errorMessage}
-
+ return ( +
-
- + return ( +
+
-
+
+
+ Provider Username:
+
+ {externalUser?.username ?? errorMessage}
+
+
+ +
Provider Email:
+
+ {externalUser?.email ?? ''}
+
+ to UnlockEd Users:
+
+ {currentUsers.map((user) => (
+
+
+ handleUserSelection(user.id)}
+ />
+
+
+ ))}
+
+
+
+
+
+
+ +
+ +
Provider Email:
- {externalUser?.email ?? ""}
- to UnlockEd Users:
-
- {currentUsers.map((user) => (
-
-
- handleUserSelection(user.id)}
- />
-
-
- ))}
-
-
-
-
-
-
- -
- - -
- onCancel("", false)} />
- {user?.role == UserRole.Admin ? (
-
- );
+ );
}
diff --git a/frontend/src/Components/forms/ShowImportedUsers.tsx b/frontend/src/Components/forms/ShowImportedUsers.tsx
index 98a536c1..4f4bb09e 100644
--- a/frontend/src/Components/forms/ShowImportedUsers.tsx
+++ b/frontend/src/Components/forms/ShowImportedUsers.tsx
@@ -1,69 +1,73 @@
-import { useState } from "react";
-import { CloseX } from "../inputs";
-import { UserImports } from "@/common";
+import { useState } from 'react';
+import { CloseX } from '../inputs';
+import { UserImports } from '@/common';
interface ImportedUserProps {
- users: UserImports[];
- onExit: () => void;
+ users: UserImports[];
+ onExit: () => void;
}
const PaginatedUserTable = ({ users, onExit }: ImportedUserProps) => {
- const [currentPage, setCurrentPage] = useState(1);
- const usersPerPage = 5;
- const indexOfLastUser = currentPage * usersPerPage;
- const indexOfFirstUser = indexOfLastUser - usersPerPage;
- const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser);
- const totalPages = Math.ceil(users.length / usersPerPage);
+ const [currentPage, setCurrentPage] = useState(1);
+ const usersPerPage = 5;
+ const indexOfLastUser = currentPage * usersPerPage;
+ const indexOfFirstUser = indexOfLastUser - usersPerPage;
+ const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser);
+ const totalPages = Math.ceil(users.length / usersPerPage);
- const handlePageChange = (newPage: number) => {
- setCurrentPage(newPage);
- };
+ const handlePageChange = (newPage: number) => {
+ setCurrentPage(newPage);
+ };
- return (
- - You may only reset the password for non-administrator accounts. -
- ) : ( + const getTempPassword = async () => { + try { + const response = await axios.post('/api/users/student-password', { + user_id: user?.id + }); + if (response.status !== 200) { + onCancel('Failed to reset password', true); + return; + } + console.log(response.data['temp_password']); + onSuccess(response.data['temp_password']); + return; + } catch (error: any) { + onCancel(error.response.data.message, true); + return; + } + }; + return (
- onCancel('', false)} />
+ {user?.role == UserRole.Admin ? (
+
- )}
- - Are you sure you would like to reset {user?.name_first}{" "} - {user?.name_last}'s password? -
- -
-
-
-
+ + You may only reset the password for non-administrator + accounts. +
+ ) : ( +
+
+ )}
+ Are you sure you would like to reset {user?.name_first}{' '} + {user?.name_last}'s password? +
+ +
+
+
+
+
-
- );
+ return (
+ Imported Users
-
-
-
-
-
- | Username | -Temp Password | -Error | -
|---|---|---|
| {user.username} | -{user.temp_password ?? "n/a"} | -{user.error ?? "n/a"} | -
-
-
- Page {currentPage} of {totalPages}
-
-
-
-
+
+ );
};
export default PaginatedUserTable;
diff --git a/frontend/src/Components/forms/ShowTempPasswordForm.tsx b/frontend/src/Components/forms/ShowTempPasswordForm.tsx
index 5c5db8aa..1d5165ce 100644
--- a/frontend/src/Components/forms/ShowTempPasswordForm.tsx
+++ b/frontend/src/Components/forms/ShowTempPasswordForm.tsx
@@ -1,40 +1,42 @@
-import { CloseX } from "../inputs";
+import { CloseX } from '../inputs';
export interface TempPasswordProps {
- tempPassword: string;
- userName: string | null;
- onClose: () => void;
+ tempPassword: string;
+ userName: string | null;
+ onClose: () => void;
}
export default function ShowTempPasswordForm({
- tempPassword,
- userName,
- onClose,
+ tempPassword,
+ userName,
+ onClose
}: TempPasswordProps) {
- return (
- Imported Users
+
+
+
+
+
+ | Username | +Temp Password | +Error | +
|---|---|---|
| {user.username} | ++ {user.temp_password ?? 'n/a'} + | ++ {user.error ?? 'n/a'} + | +
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
- onClose()} />
- {userName == null ? (
- ;
+ label?: string;
+ callback: Function;
+ enumType: Record;
}
/* a dropdown that executes a callback function on change */
export default function DropdownControl({
- label,
- callback,
- enumType,
+ label,
+ callback,
+ enumType
}: DropdownControlProps) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/DropdownInput.tsx b/frontend/src/Components/inputs/DropdownInput.tsx
index fa16ca64..d77a9fac 100644
--- a/frontend/src/Components/inputs/DropdownInput.tsx
+++ b/frontend/src/Components/inputs/DropdownInput.tsx
@@ -1,45 +1,45 @@
-import { FieldErrors } from "react-hook-form";
+import { FieldErrors } from 'react-hook-form';
interface DropdownProps {
- label: string;
- interfaceRef: string;
- required: boolean;
- errors: FieldErrors;
- register: Function;
- enumType: Record;
+ label: string;
+ interfaceRef: string;
+ required: boolean;
+ errors: FieldErrors;
+ register: Function;
+ enumType: Record;
}
export function DropdownInput({
- label,
- interfaceRef,
- required,
- errors,
- register,
- enumType,
+ label,
+ interfaceRef,
+ required,
+ errors,
+ register,
+ enumType
}: DropdownProps) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/InputError.tsx b/frontend/src/Components/inputs/InputError.tsx
index 8e344162..34db8c6f 100644
--- a/frontend/src/Components/inputs/InputError.tsx
+++ b/frontend/src/Components/inputs/InputError.tsx
@@ -1,16 +1,16 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes } from 'react';
export default function InputError({
- message,
- className = "",
- ...props
+ message,
+ className = '',
+ ...props
}: HTMLAttributes & { message?: string }) {
- return message ? (
- ;
- register: Function;
+ label: string;
+ interfaceRef: string;
+ required: boolean;
+ length: number | null;
+ errors: FieldErrors;
+ register: Function;
}
export function TextAreaInput({
- label,
- interfaceRef,
- required,
- length,
- errors,
- register,
+ label,
+ interfaceRef,
+ required,
+ length,
+ errors,
+ register
}: TextAreaProps) {
- const options = {
- required: {
- value: required,
- message: `${label} is required`,
- },
- ...(length !== null && {
- maxLength: {
- value: length,
- message: `${label} should be ${length} characters or less`,
- },
- }),
- };
- return (
-
- );
+ const options = {
+ required: {
+ value: required,
+ message: `${label} is required`
+ },
+ ...(length !== null && {
+ maxLength: {
+ value: length,
+ message: `${label} should be ${length} characters or less`
+ }
+ })
+ };
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/TextInput.tsx b/frontend/src/Components/inputs/TextInput.tsx
index 361fba2f..9970937f 100644
--- a/frontend/src/Components/inputs/TextInput.tsx
+++ b/frontend/src/Components/inputs/TextInput.tsx
@@ -1,55 +1,55 @@
-import { FieldErrors } from "react-hook-form";
+import { FieldErrors } from 'react-hook-form';
interface TextProps {
- label: string;
- interfaceRef: string;
- required: boolean;
- length: number | null;
- errors: FieldErrors;
- register: Function;
- password?: boolean;
- isFocused?: boolean;
- autoComplete?: string;
+ label: string;
+ interfaceRef: string;
+ required: boolean;
+ length: number | null;
+ errors: FieldErrors;
+ register: Function;
+ password?: boolean;
+ isFocused?: boolean;
+ autoComplete?: string;
}
export function TextInput({
- label,
- interfaceRef,
- required,
- length,
- errors,
- register,
- password = false,
- isFocused = false,
- autoComplete = "on",
+ label,
+ interfaceRef,
+ required,
+ length,
+ errors,
+ register,
+ password = false,
+ isFocused = false,
+ autoComplete = 'on'
}: TextProps) {
- const options = {
- required: {
- value: required,
- message: `${label} is required`,
- },
- ...(length !== null && {
- maxLength: {
- value: length,
- message: `${label} should be ${length} characters or less`,
- },
- }),
- };
- return (
-
- );
+ const options = {
+ required: {
+ value: required,
+ message: `${label} is required`
+ },
+ ...(length !== null && {
+ maxLength: {
+ value: length,
+ message: `${label} should be ${length} characters or less`
+ }
+ })
+ };
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/index.js b/frontend/src/Components/inputs/index.js
index ba60b494..1afc6901 100644
--- a/frontend/src/Components/inputs/index.js
+++ b/frontend/src/Components/inputs/index.js
@@ -1,5 +1,5 @@
-export { CloseX } from "./CloseX";
-export { TextAreaInput } from "./TextAreaInput";
-export { DropdownInput } from "./DropdownInput";
-export { TextInput } from "./TextInput";
-export { SubmitButton } from "./SubmitButton";
+export { CloseX } from './CloseX';
+export { TextAreaInput } from './TextAreaInput';
+export { DropdownInput } from './DropdownInput';
+export { TextInput } from './TextInput';
+export { SubmitButton } from './SubmitButton';
diff --git a/frontend/src/Components/pill-labels/DarkGreenPill.tsx b/frontend/src/Components/pill-labels/DarkGreenPill.tsx
index e7e0fbc7..39028b08 100644
--- a/frontend/src/Components/pill-labels/DarkGreenPill.tsx
+++ b/frontend/src/Components/pill-labels/DarkGreenPill.tsx
@@ -1,5 +1,5 @@
export default function DarkGreenPill(props) {
- return (
- (
- `/api/users/${user.id}/admin-dashboard`,
- );
- const { theme } = useContext(ThemeContext);
+ const { user } = useAuth();
+ const { data, error, isLoading } = useSWR(
+ `/api/users/${user.id}/admin-dashboard`
+ );
+ const { theme } = useContext(ThemeContext);
- if (error || isLoading) return ;
- const avgActivity = convertSeconds(data.avg_daily_activity);
- const totalActivity = convertSeconds(data.total_weekly_activity);
- console.log(data);
+ if (error || isLoading) return ;
+ const avgActivity = convertSeconds(data.avg_daily_activity);
+ const totalActivity = convertSeconds(data.total_weekly_activity);
+ console.log(data);
- return (
-
You have successfully created a new user.
- ) : ( - <> -- You have successfully reset {userName}'s password. -
-- Copy this password now. If you lose it, you'll need to regenerate it - to get a new one. -
- - )} -
-
- );
+ );
}
diff --git a/frontend/src/Components/inputs/Checkbox.tsx b/frontend/src/Components/inputs/Checkbox.tsx
index 0133c474..c88fe95c 100644
--- a/frontend/src/Components/inputs/Checkbox.tsx
+++ b/frontend/src/Components/inputs/Checkbox.tsx
@@ -1,24 +1,24 @@
interface CheckboxProps {
- label: string;
- interfaceRef: string;
- register: Function;
+ label: string;
+ interfaceRef: string;
+ register: Function;
}
export default function Checkbox({
- label,
- interfaceRef,
- register,
+ label,
+ interfaceRef,
+ register
}: CheckboxProps) {
- return (
-
-
-
-
-
+ return (
+ Temporary Password
- {tempPassword}
-
+ onClose()} />
+ {userName == null ? (
+
- + You have successfully created a new user. +
+ ) : ( + <> ++ You have successfully reset {userName}'s password. +
++ Copy this password now. If you lose it, you'll need to + regenerate it to get a new one. +
+ + )} +
+
+
+
+
+
+ Temporary Password
+ {tempPassword}
+
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/frontend/src/Components/inputs/CloseX.tsx b/frontend/src/Components/inputs/CloseX.tsx
index 24b8ddbf..e8fa26f2 100644
--- a/frontend/src/Components/inputs/CloseX.tsx
+++ b/frontend/src/Components/inputs/CloseX.tsx
@@ -1,12 +1,12 @@
export function CloseX({ close }: { close: () => void }) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/DropdownControl.tsx b/frontend/src/Components/inputs/DropdownControl.tsx
index d8349228..f8943314 100644
--- a/frontend/src/Components/inputs/DropdownControl.tsx
+++ b/frontend/src/Components/inputs/DropdownControl.tsx
@@ -1,34 +1,34 @@
interface DropdownControlProps {
- label?: string;
- callback: Function;
- enumType: Record
- {message}
-
- ) : null;
+ return message ? (
+
+ {message}
+
+ ) : null;
}
diff --git a/frontend/src/Components/inputs/SearchBar.tsx b/frontend/src/Components/inputs/SearchBar.tsx
index dc2b3d66..7393e980 100644
--- a/frontend/src/Components/inputs/SearchBar.tsx
+++ b/frontend/src/Components/inputs/SearchBar.tsx
@@ -1,25 +1,25 @@
-import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
export default function SearchBar({
- searchTerm,
- changeCallback,
+ searchTerm,
+ changeCallback
}: {
- searchTerm: string;
- changeCallback: (arg: string) => void;
+ searchTerm: string;
+ changeCallback: (arg: string) => void;
}) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/SubmitButton.tsx b/frontend/src/Components/inputs/SubmitButton.tsx
index aea2ea21..18b4297e 100644
--- a/frontend/src/Components/inputs/SubmitButton.tsx
+++ b/frontend/src/Components/inputs/SubmitButton.tsx
@@ -1,8 +1,8 @@
export function SubmitButton({ errorMessage }: { errorMessage: string }) {
- return (
-
- );
+ return (
+
+ );
}
diff --git a/frontend/src/Components/inputs/TextAreaInput.tsx b/frontend/src/Components/inputs/TextAreaInput.tsx
index b903779f..e21b149e 100644
--- a/frontend/src/Components/inputs/TextAreaInput.tsx
+++ b/frontend/src/Components/inputs/TextAreaInput.tsx
@@ -1,46 +1,46 @@
-import { FieldErrors } from "react-hook-form";
+import { FieldErrors } from 'react-hook-form';
interface TextAreaProps {
- label: string;
- interfaceRef: string;
- required: boolean;
- length: number | null;
- errors: FieldErrors{props.children}
- ); + return ( +{props.children}
+ ); } diff --git a/frontend/src/Components/pill-labels/GreyPill.tsx b/frontend/src/Components/pill-labels/GreyPill.tsx index c36005a3..e2dab250 100644 --- a/frontend/src/Components/pill-labels/GreyPill.tsx +++ b/frontend/src/Components/pill-labels/GreyPill.tsx @@ -1,5 +1,7 @@ export default function GreyPill(props) { - return ( -{props.children}
- ); + return ( ++ {props.children} +
+ ); } diff --git a/frontend/src/Components/pill-labels/LightGreenPill.tsx b/frontend/src/Components/pill-labels/LightGreenPill.tsx index cc50fe2f..75749c37 100644 --- a/frontend/src/Components/pill-labels/LightGreenPill.tsx +++ b/frontend/src/Components/pill-labels/LightGreenPill.tsx @@ -1,5 +1,7 @@ export default function LightGreenPill(props) { - return ( -{props.children}
- ); + return ( ++ {props.children} +
+ ); } diff --git a/frontend/src/Components/pill-labels/RedPill.tsx b/frontend/src/Components/pill-labels/RedPill.tsx index fff6d7f1..68885dba 100644 --- a/frontend/src/Components/pill-labels/RedPill.tsx +++ b/frontend/src/Components/pill-labels/RedPill.tsx @@ -1,5 +1,7 @@ export default function RedPill(props) { - return ( -{props.children}
- ); + return ( ++ {props.children} +
+ ); } diff --git a/frontend/src/Components/pill-labels/TealPill.tsx b/frontend/src/Components/pill-labels/TealPill.tsx index 212ff110..47a19046 100644 --- a/frontend/src/Components/pill-labels/TealPill.tsx +++ b/frontend/src/Components/pill-labels/TealPill.tsx @@ -1,5 +1,7 @@ export default function TealPill(props) { - return ( -{props.children}
- ); + return ( ++ {props.children} +
+ ); } diff --git a/frontend/src/Components/pill-labels/YellowPill.tsx b/frontend/src/Components/pill-labels/YellowPill.tsx index 3803116b..25983f4a 100644 --- a/frontend/src/Components/pill-labels/YellowPill.tsx +++ b/frontend/src/Components/pill-labels/YellowPill.tsx @@ -1,5 +1,7 @@ export default function YellowPill(props) { - return ( -{props.children}
- ); + return ( ++ {props.children} +
+ ); } diff --git a/frontend/src/Layouts/AuthenticatedLayout.tsx b/frontend/src/Layouts/AuthenticatedLayout.tsx index b2f9a225..03e55a45 100644 --- a/frontend/src/Layouts/AuthenticatedLayout.tsx +++ b/frontend/src/Layouts/AuthenticatedLayout.tsx @@ -1,18 +1,20 @@ -import { PropsWithChildren } from "react"; -import Navbar from "@/Components/Navbar"; +import { PropsWithChildren } from 'react'; +import Navbar from '@/Components/Navbar'; export default function AuthenticatedLayout({ - title, - children, + title, + children }: PropsWithChildren<{ title: string }>) { - return ( -
-
-
- );
+ return (
+
- {children}
-
-
+
+
+ );
}
diff --git a/frontend/src/Layouts/GuestLayout.tsx b/frontend/src/Layouts/GuestLayout.tsx
index 54e7eb89..b479e9ba 100644
--- a/frontend/src/Layouts/GuestLayout.tsx
+++ b/frontend/src/Layouts/GuestLayout.tsx
@@ -1,18 +1,18 @@
-import ApplicationLogo from "../Components/ApplicationLogo";
-import { PropsWithChildren } from "react";
+import ApplicationLogo from '../Components/ApplicationLogo';
+import { PropsWithChildren } from 'react';
export default function Guest({ children }: PropsWithChildren) {
- return (
-
+ );
}
diff --git a/frontend/src/Pages/AdminDashboard.tsx b/frontend/src/Pages/AdminDashboard.tsx
index 1aa88d1e..7f684998 100644
--- a/frontend/src/Pages/AdminDashboard.tsx
+++ b/frontend/src/Pages/AdminDashboard.tsx
@@ -1,110 +1,129 @@
-import { useAuth } from "@/AuthContext";
-import MilestonesBarChart from "@/Components/MilestonesBarChart";
-import ActivityChart from "@/Components/MonthActivityChart";
-import StatsCard from "@/Components/StatsCard";
-import TopProgPieChart from "@/Components/TopProgActivityPieChart";
-import { AdminDashboardJoin } from "@/common";
-import useSWR from "swr";
-import convertSeconds from "../Components/ConvertSeconds";
-import { useContext } from "react";
-import { ThemeContext } from "@/Components/ThemeContext";
+import { useAuth } from '@/AuthContext';
+import MilestonesBarChart from '@/Components/MilestonesBarChart';
+import ActivityChart from '@/Components/MonthActivityChart';
+import StatsCard from '@/Components/StatsCard';
+import TopProgPieChart from '@/Components/TopProgActivityPieChart';
+import { AdminDashboardJoin } from '@/common';
+import useSWR from 'swr';
+import convertSeconds from '../Components/ConvertSeconds';
+import { useContext } from 'react';
+import { ThemeContext } from '@/Components/ThemeContext';
export default function AdminDashboard() {
- const { user } = useAuth();
- const { data, error, isLoading } = useSWR
+
+ {children}
+
+
+
-
- {status && (
-
-
- );
+ useEffect(() => {
+ // if there is no ?flow= query parameter, redirect to /self-service/login/browser
+ if (!window.location.search.includes('flow=')) {
+ window.location.href = '/self-service/login/browser';
+ }
+ }, []);
+ return (
+ <>
+
+
+ {status && (
+
+
+ );
}
diff --git a/frontend/src/Pages/Auth/ResetPassword.tsx b/frontend/src/Pages/Auth/ResetPassword.tsx
index 075b31f1..a0a468c0 100644
--- a/frontend/src/Pages/Auth/ResetPassword.tsx
+++ b/frontend/src/Pages/Auth/ResetPassword.tsx
@@ -1,11 +1,11 @@
-import ChangePasswordForm from "../../Components/forms/ChangePasswordForm";
-import GuestLayout from "../..//Layouts/GuestLayout";
+import ChangePasswordForm from '../../Components/forms/ChangePasswordForm';
+import GuestLayout from '../..//Layouts/GuestLayout';
export default function ResetPassword() {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/frontend/src/Pages/CourseCatalog.tsx b/frontend/src/Pages/CourseCatalog.tsx
index 4f9834a6..8f68c30e 100644
--- a/frontend/src/Pages/CourseCatalog.tsx
+++ b/frontend/src/Pages/CourseCatalog.tsx
@@ -1,77 +1,83 @@
-import { useAuth } from "@/AuthContext";
-import PageNav from "@/Components/PageNav";
-import ToggleView, { ViewType } from "@/Components/ToggleView";
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { useEffect, useState } from "react";
-import CatalogCourseCard from "@/Components/CatalogCourseCard";
-import SearchBar from "@/Components/inputs/SearchBar";
-import { CourseCatalogue, Program, ServerResponse } from "@/common";
-import useSWR from "swr";
-import DropdownControl from "@/Components/inputs/DropdownControl";
+import { useAuth } from '@/AuthContext';
+import PageNav from '@/Components/PageNav';
+import ToggleView, { ViewType } from '@/Components/ToggleView';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import { useEffect, useState } from 'react';
+import CatalogCourseCard from '@/Components/CatalogCourseCard';
+import SearchBar from '@/Components/inputs/SearchBar';
+import { CourseCatalogue, Program, ServerResponse } from '@/common';
+import useSWR from 'swr';
+import DropdownControl from '@/Components/inputs/DropdownControl';
// TO DO: make it paginated
// TO DO: mutate the data on save so it stays the same across both views
export default function CourseCatalog() {
- const { user } = useAuth();
- const [activeView, setActiveView] = useState(ViewType.Grid);
- const [searchTerm, setSearchTerm] = useState("");
- const [order, setOrder] = useState("asc");
- const { data, mutate } = useSWR>(
- `/api/users/${user.id}/catalogue?search=${searchTerm}&order=${order}`,
- );
+ const { user } = useAuth();
+ const [activeView, setActiveView] = useState(ViewType.Grid);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [order, setOrder] = useState('asc');
+ const { data, mutate } = useSWR>(
+ `/api/users/${user.id}/catalogue?search=${searchTerm}&order=${order}`
+ );
- useEffect(() => {
- console.log(data);
- }, [data]);
+ useEffect(() => {
+ console.log(data);
+ }, [data]);
- function callMutate() {
- console.log("called");
- mutate();
- }
+ function callMutate() {
+ console.log('called');
+ mutate();
+ }
- function handleSearch(newSearch: string) {
- setSearchTerm(newSearch);
- // setPageQuery(1);
- }
+ function handleSearch(newSearch: string) {
+ setSearchTerm(newSearch);
+ // setPageQuery(1);
+ }
- if (!data) return ;
+ if (!data) return ;
- return (
-
-
- );
+ return (
+
+
+ );
}
diff --git a/frontend/src/Pages/Dashboard.tsx b/frontend/src/Pages/Dashboard.tsx
index 5ac130ad..ccfafbea 100644
--- a/frontend/src/Pages/Dashboard.tsx
+++ b/frontend/src/Pages/Dashboard.tsx
@@ -1,21 +1,21 @@
-import PageNav from "@/Components/PageNav";
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { useAuth } from "@/AuthContext";
-import { UserRole } from "@/common";
-import StudentDashboard from "./StudentDashboard";
-import AdminDashboard from "./AdminDashboard";
+import PageNav from '@/Components/PageNav';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import { useAuth } from '@/AuthContext';
+import { UserRole } from '@/common';
+import StudentDashboard from './StudentDashboard';
+import AdminDashboard from './AdminDashboard';
export default function Dashboard() {
- const { user } = useAuth();
+ const { user } = useAuth();
- return (
-
-
- );
+ return (
+
+
+ );
}
diff --git a/frontend/src/Pages/Error.tsx b/frontend/src/Pages/Error.tsx
index 7a6b67e4..8ec84ef3 100644
--- a/frontend/src/Pages/Error.tsx
+++ b/frontend/src/Pages/Error.tsx
@@ -1,25 +1,25 @@
-import GuestLayout from "@/Layouts/GuestLayout";
+import GuestLayout from '@/Layouts/GuestLayout';
export default function Error() {
- return (
- <>
-
-
-
-
- );
+ return (
+ <>
+
+
+
+
+ );
}
diff --git a/frontend/src/Pages/MyCourses.tsx b/frontend/src/Pages/MyCourses.tsx
index 53e9fb74..0a61ea4b 100644
--- a/frontend/src/Pages/MyCourses.tsx
+++ b/frontend/src/Pages/MyCourses.tsx
@@ -1,114 +1,125 @@
-import { useAuth } from "@/AuthContext";
-import PageNav from "@/Components/PageNav";
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import EnrolledCourseCard from "@/Components/EnrolledCourseCard";
-import { useEffect, useState } from "react";
-import ToggleView, { ViewType } from "@/Components/ToggleView";
-import SearchBar from "@/Components/inputs/SearchBar";
-import DropdownControl from "@/Components/inputs/DropdownControl";
-import { Program, ServerResponse } from "@/common";
-import useSWR from "swr";
+import { useAuth } from '@/AuthContext';
+import PageNav from '@/Components/PageNav';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import EnrolledCourseCard from '@/Components/EnrolledCourseCard';
+import { useEffect, useState } from 'react';
+import ToggleView, { ViewType } from '@/Components/ToggleView';
+import SearchBar from '@/Components/inputs/SearchBar';
+import DropdownControl from '@/Components/inputs/DropdownControl';
+import { Program, ServerResponse } from '@/common';
+import useSWR from 'swr';
// TO DO: make sure this lives in the right place
export enum CourseStatus {
- Current = "Current",
- Completed = "Completed",
- Pending = "Pending",
- Recent = "Recent",
+ Current = 'Current',
+ Completed = 'Completed',
+ Pending = 'Pending',
+ Recent = 'Recent'
}
enum TabType {
- Current = "in_progress",
- Completed = "completed",
- Favorited = "is_favorited",
- All = "all",
+ Current = 'in_progress',
+ Completed = 'completed',
+ Favorited = 'is_favorited',
+ All = 'all'
}
// TO DO: go back and fix all "key" values that are mapped and make them intentional
export default function MyCourses() {
- const { user } = useAuth();
- const [searchTerm, setSearchTerm] = useState("");
- const [sort, setSort] = useState("order=asc&order_by=program_name");
- const [activeTab, setActiveTab] = useState(TabType.Current);
- const [activeView, setActiveView] = useState(ViewType.Grid);
+ const { user } = useAuth();
+ const [searchTerm, setSearchTerm] = useState('');
+ const [sort, setSort] = useState('order=asc&order_by=program_name');
+ const [activeTab, setActiveTab] = useState(TabType.Current);
+ const [activeView, setActiveView] = useState(ViewType.Grid);
- const { data, mutate } = useSWR>(
- `/api/users/${user.id}/programs?${
- sort +
- (activeTab !== TabType.All ? `&tags=${activeTab}` : "") +
- (searchTerm ? `&search=${searchTerm}` : "")
- }`,
- );
+ const { data, mutate } = useSWR>(
+ `/api/users/${user.id}/programs?${
+ sort +
+ (activeTab !== TabType.All ? `&tags=${activeTab}` : '') +
+ (searchTerm ? `&search=${searchTerm}` : '')
+ }`
+ );
- useEffect(() => {
- console.log(data);
- }, [data]);
+ useEffect(() => {
+ console.log(data);
+ }, [data]);
- function callMutate() {
- console.log("called");
- mutate();
- }
+ function callMutate() {
+ console.log('called');
+ mutate();
+ }
- const handleChange = (newSearch: string) => {
- setSearchTerm(newSearch);
- //setPageQuery(1);
- };
+ const handleChange = (newSearch: string) => {
+ setSearchTerm(newSearch);
+ //setPageQuery(1);
+ };
- function handleDropdownChange(value: string) {
- setSort(value);
- }
+ function handleDropdownChange(value: string) {
+ setSort(value);
+ }
- return (
-
-
- );
+ return (
+
+
+ );
}
diff --git a/frontend/src/Pages/MyProgress.tsx b/frontend/src/Pages/MyProgress.tsx
index a2788003..ee482961 100644
--- a/frontend/src/Pages/MyProgress.tsx
+++ b/frontend/src/Pages/MyProgress.tsx
@@ -1,127 +1,164 @@
-import { useAuth } from "@/AuthContext";
-import PageNav from "@/Components/PageNav";
-import StatsCard from "@/Components/StatsCard";
-import UserActivityMap from "@/Components/UserActivityMap";
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import DarkGreenPill from "@/Components/pill-labels/DarkGreenPill";
-import TealPill from "@/Components/pill-labels/TealPill";
-import useSWR from "swr";
-import { ServerResponse } from "@/common";
-import convertSeconds from "@/Components/ConvertSeconds";
+import { useAuth } from '@/AuthContext';
+import PageNav from '@/Components/PageNav';
+import StatsCard from '@/Components/StatsCard';
+import UserActivityMap from '@/Components/UserActivityMap';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import DarkGreenPill from '@/Components/pill-labels/DarkGreenPill';
+import TealPill from '@/Components/pill-labels/TealPill';
+import useSWR from 'swr';
+import { ServerResponse } from '@/common';
+import convertSeconds from '@/Components/ConvertSeconds';
export default function MyProgress() {
- const { user } = useAuth();
- const { data } = useSWR>(
- `/api/users/${user.id}/programs`,
- );
- const { data: certificates } = useSWR>(
- `/api/users/${user.id}/outcomes?type=certificate`,
- );
+ const { user } = useAuth();
+ const { data } = useSWR>(
+ `/api/users/${user.id}/programs`
+ );
+ const { data: certificates } = useSWR>(
+ `/api/users/${user.id}/outcomes?type=certificate`
+ );
- console.log(data);
+ console.log(data);
- return (
-
-
{data.facility_name}
-
-
- );
+ );
}
diff --git a/frontend/src/Pages/Auth/Consent.tsx b/frontend/src/Pages/Auth/Consent.tsx
index d27c413c..fb040dcc 100644
--- a/frontend/src/Pages/Auth/Consent.tsx
+++ b/frontend/src/Pages/Auth/Consent.tsx
@@ -1,9 +1,9 @@
-import ConsentForm from "../../Components/forms/ConsentForm";
+import ConsentForm from '../../Components/forms/ConsentForm';
export default function Consent() {
- return (
-
-
-
-
- Overall Platform Engagement
-
-
-
-
+ return (
+ Top Milestone Completion Per Course
-
+
- {/* Top course engagement */}
- {data.facility_name}
+
+
+
+ {/* Top course engagement */}
+
+
+ + Overall Platform Engagement +
+
+
+
+
+ Top Milestone Completion Per Course
+
+
+ Top Course Engagement
+
+ {/* TO DO: caption needs to be added */}
+
+
+
+
+ | Course Name | +Time Spent | +
|---|---|
| + + {course.program_name} + | +{courseTime} | +
-
- Top Course Engagement
-
- {/* TO DO: caption needs to be added */}
-
-
-
-
- | Course Name | -Time Spent | -
|---|---|
| - - {course.program_name} - | -{courseTime} | -
-
- );
+ return (
+
+
+ );
}
diff --git a/frontend/src/Pages/Auth/Login.tsx b/frontend/src/Pages/Auth/Login.tsx
index b14362b9..d718c71f 100644
--- a/frontend/src/Pages/Auth/Login.tsx
+++ b/frontend/src/Pages/Auth/Login.tsx
@@ -1,24 +1,24 @@
-import { useEffect } from "react";
-import LoginForm from "@/Components/forms/LoginForm";
-import GuestLayout from "@/Layouts/GuestLayout";
+import { useEffect } from 'react';
+import LoginForm from '@/Components/forms/LoginForm';
+import GuestLayout from '@/Layouts/GuestLayout';
export default function Login({ status }: { status?: string }) {
- useEffect(() => {
- // if there is no ?flow= query parameter, redirect to /self-service/login/browser
- if (!window.location.search.includes("flow=")) {
- window.location.href = "/self-service/login/browser";
- }
- }, []);
- return (
- <>
-
-
- {status}
-
- )}
-
+ {status}
+
+ )}
+
-
-
-
- Course Catalog
-
-
- {/* render on gallery or list view */}
-
- {data?.map((course: CourseCatalogue) => {
- return (
-
-
+
+
+
+ Course Catalog
+
+
+ {/* render on gallery or list view */}
+
+ {data?.map((course: CourseCatalogue) => {
+ return (
+
+
-
-
- Either there has been an unexpected error, or the page you requested
- was not found.
-
-
-
+
+
+ Either there has been an unexpected error, or the page
+ you requested was not found.
+
+
+
-
- My Courses
-
- {Object.entries(TabType).map(([key]) => (
-
- ))}
-
-
-
- {/* render on gallery or list view */}
-
-
-
- {data?.programs?.map((course: any, index: number) => {
- return (
-
-
+
+ My Courses
+
+ {Object.entries(TabType).map(([key]) => (
+
+ ))}
+
+
+
+ {/* render on gallery or list view */}
+
+
+
+ {data?.programs?.map((course: any, index: number) => {
+ return (
+
+
- (null);
- const editProviderModal = useRef(null);
- const [editProvider, setEditProvider] = useState(
- null,
- );
- const openOidcClientModal = useRef(null);
- const openOidcRegistrationModal = useRef(null);
- const [oidcClient, setOidcClient] = useState(null);
- const [toast, setToast] = useState({
- state: ToastState.null,
- message: "",
- });
+ const { user } = useAuth();
+ const addProviderModal = useRef(null);
+ const editProviderModal = useRef(null);
+ const [editProvider, setEditProvider] = useState(
+ null
+ );
+ const openOidcClientModal = useRef(null);
+ const openOidcRegistrationModal = useRef(null);
+ const [oidcClient, setOidcClient] = useState(null);
+ const [toast, setToast] = useState({
+ state: ToastState.null,
+ message: ''
+ });
- const {
- data: providers,
- mutate,
- error,
- isLoading,
- } = useSWR(`/api/provider-platforms`);
+ const {
+ data: providers,
+ mutate,
+ error,
+ isLoading
+ } = useSWR(`/api/provider-platforms`);
- // TO DO: SORT THIS IN THE BACKEND AND RETURN SORTED
- providers?.data.sort(function (
- providerA: ProviderPlatform,
- providerB: ProviderPlatform,
- ) {
- if (providerA.state === "enabled" && providerB.state !== "enabled") {
- return -1;
- } else if (providerA.state !== "enabled" && providerB.state === "enabled") {
- return 1;
- } else if (
- providerA.state === "archived" &&
- providerB.state !== "archived"
+ // TO DO: SORT THIS IN THE BACKEND AND RETURN SORTED
+ providers?.data.sort(function (
+ providerA: ProviderPlatform,
+ providerB: ProviderPlatform
) {
- return 1;
- } else if (
- providerA.state !== "archived" &&
- providerB.state === "archived"
- ) {
- return -1;
- } else {
- return 0;
- }
- });
-
- function resetModal() {
- setTimeout(() => {
- setEditProvider(null);
- }, 200);
- }
-
- function openEditProvider(provider: ProviderPlatform) {
- setEditProvider(provider);
- editProviderModal.current?.showModal();
- }
+ if (providerA.state === 'enabled' && providerB.state !== 'enabled') {
+ return -1;
+ } else if (
+ providerA.state !== 'enabled' &&
+ providerB.state === 'enabled'
+ ) {
+ return 1;
+ } else if (
+ providerA.state === 'archived' &&
+ providerB.state !== 'archived'
+ ) {
+ return 1;
+ } else if (
+ providerA.state !== 'archived' &&
+ providerB.state === 'archived'
+ ) {
+ return -1;
+ } else {
+ return 0;
+ }
+ });
- function updateProvider(state: ToastState, message: string) {
- mutate();
- if (state && message) {
- setToast({
- state: state,
- message: message,
- });
+ function resetModal() {
+ setTimeout(() => {
+ setEditProvider(null);
+ }, 200);
}
- editProviderModal.current?.close();
- addProviderModal.current?.close();
- resetModal();
- }
- const registerOidcClient = (prov: ProviderPlatform) => {
- openOidcClientModal.current?.showModal();
- setEditProvider(prov);
- };
-
- const onRegisterOidcClientClose = (
- response: ServerResponse,
- state: ToastState,
- ) => {
- openOidcClientModal.current?.close();
- setEditProvider(null);
- if (!response && state == ToastState.success) {
- setToast({
- state: state,
- message: "OIDC client registered successfully.",
- });
- } else if (!response && state == ToastState.error) {
- setToast({
- state: state,
- message: "Failed to register OIDC client.",
- });
- } else {
- console.log(response.data[0]);
- setOidcClient(response.data[0] as OidcClient);
- openOidcRegistrationModal.current?.showModal();
+ function openEditProvider(provider: ProviderPlatform) {
+ setEditProvider(provider);
+ editProviderModal.current?.showModal();
}
- mutate();
- state &&
- response &&
- setToast({
- state: state,
- message: response.message,
- });
- };
- const showAuthorizationInfo = async (provider: ProviderPlatform) => {
- const resp = await axios(`/api/oidc/clients/${provider.oidc_id}`);
- if (resp.data) {
- setOidcClient(resp.data.data[0] as OidcClient);
- openOidcRegistrationModal.current?.showModal();
- return;
+ function updateProvider(state: ToastState, message: string) {
+ mutate();
+ if (state && message) {
+ setToast({
+ state: state,
+ message: message
+ });
+ }
+ editProviderModal.current?.close();
+ addProviderModal.current?.close();
+ resetModal();
}
- };
- return (
-
- {
- updateProvider(state, message);
- }}
- />
+ const registerOidcClient = (prov: ProviderPlatform) => {
+ openOidcClientModal.current?.showModal();
+ setEditProvider(prov);
+ };
+
+ const onRegisterOidcClientClose = (
+ response: ServerResponse,
+ state: ToastState
+ ) => {
+ openOidcClientModal.current?.close();
+ setEditProvider(null);
+ if (!response && state == ToastState.success) {
+ setToast({
+ state: state,
+ message: 'OIDC client registered successfully.'
+ });
+ } else if (!response && state == ToastState.error) {
+ setToast({
+ state: state,
+ message: 'Failed to register OIDC client.'
+ });
+ } else {
+ console.log(response.data[0]);
+ setOidcClient(response.data[0] as OidcClient);
+ openOidcRegistrationModal.current?.showModal();
}
- ref={addProviderModal}
- />
- {
- updateProvider(state, message);
- }}
- provider={editProvider}
- />
- ) : (
-
- )
+ mutate();
+ state &&
+ response &&
+ setToast({
+ state: state,
+ message: response.message
+ });
+ };
+
+ const showAuthorizationInfo = async (provider: ProviderPlatform) => {
+ const resp = await axios(`/api/oidc/clients/${provider.oidc_id}`);
+ if (resp.data) {
+ setOidcClient(resp.data.data[0] as OidcClient);
+ openOidcRegistrationModal.current?.showModal();
+ return;
}
- ref={editProviderModal}
- />
- openOidcClientModal.current?.close()}
+ };
+
+ return (
+
+ openOidcRegistrationModal.current?.close()}
+ {
+ updateProvider(state, message);
+ }}
+ />
+ }
+ ref={addProviderModal}
/>
- ) : (
-
- )
- }
- ref={openOidcRegistrationModal}
- />
- {/* Toasts */}
- {toast.state !== ToastState.null && (
- setToast({ state: ToastState.null, message: "" })}
- />
- )}
-
- );
+ {
+ updateProvider(state, message);
+ }}
+ provider={editProvider}
+ />
+ ) : (
+
+ )
+ }
+ ref={editProviderModal}
+ />
+ openOidcClientModal.current?.close()}
+ />
+ ) : (
+
+ )
+ }
+ ref={openOidcClientModal}
+ />
+
+ openOidcRegistrationModal.current?.close()
+ }
+ />
+ ) : (
+
+ )
+ }
+ ref={openOidcRegistrationModal}
+ />
+ {/* Toasts */}
+ {toast.state !== ToastState.null && (
+
+ setToast({ state: ToastState.null, message: '' })
+ }
+ />
+ )}
+
+ );
}
diff --git a/frontend/src/Pages/ProviderUserManagement.tsx b/frontend/src/Pages/ProviderUserManagement.tsx
index bb41fd65..d3b78909 100644
--- a/frontend/src/Pages/ProviderUserManagement.tsx
+++ b/frontend/src/Pages/ProviderUserManagement.tsx
@@ -1,382 +1,404 @@
-import { useEffect, useRef, useState } from "react";
-import axios from "axios";
-import AuthenticatedLayout from "../Layouts/AuthenticatedLayout";
-import { useParams } from "react-router-dom";
+import { useEffect, useRef, useState } from 'react';
+import axios from 'axios';
+import AuthenticatedLayout from '../Layouts/AuthenticatedLayout';
+import { useParams } from 'react-router-dom';
import {
- PaginatedResponse,
- PaginationMeta,
- ProviderPlatform,
- ProviderUser,
- UserImports,
-} from "../common";
-import PageNav from "../Components/PageNav";
-import Toast, { ToastState } from "../Components/Toast";
-import Modal, { ModalType } from "../Components/Modal";
-import { useAuth } from "../AuthContext";
-import MapUserForm from "@/Components/forms/MapUserForm";
-import PrimaryButton from "@/Components/PrimaryButton";
-import ShowImportedUsers from "@/Components/forms/ShowImportedUsers";
-import Pagination from "@/Components/Pagination";
-import useSWR from "swr";
-import ConfirmImportAllUsersForm from "@/Components/forms/ConfirmImportAllUsersForm";
+ PaginatedResponse,
+ PaginationMeta,
+ ProviderPlatform,
+ ProviderUser,
+ UserImports
+} from '../common';
+import PageNav from '../Components/PageNav';
+import Toast, { ToastState } from '../Components/Toast';
+import Modal, { ModalType } from '../Components/Modal';
+import { useAuth } from '../AuthContext';
+import MapUserForm from '@/Components/forms/MapUserForm';
+import PrimaryButton from '@/Components/PrimaryButton';
+import ShowImportedUsers from '@/Components/forms/ShowImportedUsers';
+import Pagination from '@/Components/Pagination';
+import useSWR from 'swr';
+import ConfirmImportAllUsersForm from '@/Components/forms/ConfirmImportAllUsersForm';
export default function ProviderUserManagement() {
- const auth = useAuth();
- const mapUserModal = useRef(null);
- const importedUsersModal = useRef(null);
- const importAllUsersModal = useRef(null);
- const [displayToast, setDisplayToast] = useState(false);
- const [searchTerm, setSearchTerm] = useState("");
- const [usersToImport, setUsersToImport] = useState([]);
- const [userToMap, setUserToMap] = useState(null);
- const [perPage, setPerPage] = useState(10);
- const [currentPage, setCurrentPage] = useState(1);
- const { providerId } = useParams();
- const [meta, setMeta] = useState({
- current_page: 1,
- per_page: 10,
- total: 0,
- last_page: 0,
- });
- const [provider, setProvider] = useState(null);
- const [importedUsers, setImportedUsers] = useState([]);
- const [cache, setCache] = useState(false);
- const [isLoading, setIsLoading] = useState(true);
- const [error, setError] = useState(false);
+ const auth = useAuth();
+ const mapUserModal = useRef(null);
+ const importedUsersModal = useRef(null);
+ const importAllUsersModal = useRef(null);
+ const [displayToast, setDisplayToast] = useState(false);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [usersToImport, setUsersToImport] = useState([]);
+ const [userToMap, setUserToMap] = useState(null);
+ const [perPage, setPerPage] = useState(10);
+ const [currentPage, setCurrentPage] = useState(1);
+ const { providerId } = useParams();
+ const [meta, setMeta] = useState({
+ current_page: 1,
+ per_page: 10,
+ total: 0,
+ last_page: 0
+ });
+ const [provider, setProvider] = useState(null);
+ const [importedUsers, setImportedUsers] = useState([]);
+ const [cache, setCache] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(false);
- const [toast, setToast] = useState({
- state: ToastState.null,
- message: "",
- reset: () => {},
- });
- const { data, mutate } = useSWR>(
- `/api/actions/provider-platforms/${providerId}/get-users?page=${currentPage}&per_page=${perPage}&clear_cache=${cache}`,
- );
+ const [toast, setToast] = useState({
+ state: ToastState.null,
+ message: '',
+ reset: () => {}
+ });
+ const { data, mutate } = useSWR>(
+ `/api/actions/provider-platforms/${providerId}/get-users?page=${currentPage}&per_page=${perPage}&clear_cache=${cache}`
+ );
- const changePage = (page: number) => {
- setCurrentPage(page);
- };
+ const changePage = (page: number) => {
+ setCurrentPage(page);
+ };
- const handleChangeUsersPerPage = (
- e: React.ChangeEvent,
- ) => {
- setPerPage(parseInt(e.target.value));
- setCurrentPage(1); // Reset to the first page when changing per page
- };
+ const handleChangeUsersPerPage = (
+ e: React.ChangeEvent
+ ) => {
+ setPerPage(parseInt(e.target.value));
+ setCurrentPage(1); // Reset to the first page when changing per page
+ };
- const handleRefetch = () => {
- setCache(true);
- mutate();
- };
+ const handleRefetch = () => {
+ setCache(true);
+ mutate();
+ };
- const showToast = (message: string, state: ToastState) => {
- setToast({
- state,
- message,
- reset: () => {
+ const showToast = (message: string, state: ToastState) => {
setToast({
- state: ToastState.success,
- message: "",
- reset: () => {
- setDisplayToast(false);
- },
+ state,
+ message,
+ reset: () => {
+ setToast({
+ state: ToastState.success,
+ message: '',
+ reset: () => {
+ setDisplayToast(false);
+ }
+ });
+ }
});
- },
- });
- setDisplayToast(true);
- };
+ setDisplayToast(true);
+ };
- async function handleImportAllPrograms() {
- try {
- let resp = await axios.post(
- `/api/actions/provider-platforms/${providerId}/import-programs`,
- );
- if (resp.status != 200) {
- showToast(
- "error importing all or some programs, please try again later",
- ToastState.error,
- );
- return;
- } else {
- showToast(
- "Programs imported successfully from provider",
- ToastState.success,
- );
- return;
- }
- } catch (err: any) {
- showToast(
- "error importing all or some programs, please try again later",
- ToastState.error,
- );
- return;
+ async function handleImportAllPrograms() {
+ try {
+ let resp = await axios.post(
+ `/api/actions/provider-platforms/${providerId}/import-programs`
+ );
+ if (resp.status != 200) {
+ showToast(
+ 'error importing all or some programs, please try again later',
+ ToastState.error
+ );
+ return;
+ } else {
+ showToast(
+ 'Programs imported successfully from provider',
+ ToastState.success
+ );
+ return;
+ }
+ } catch (err: any) {
+ showToast(
+ 'error importing all or some programs, please try again later',
+ ToastState.error
+ );
+ return;
+ }
}
- }
- async function handleImportAllUsers() {
- try {
- let res = await axios.post(
- `/api/actions/provider-platforms/${providerId}/import-users`,
- );
- if (res.status === 200) {
- showToast(
- "Users imported successfully, please check for accounts not created",
- ToastState.success,
- );
- window.location.reload();
- }
- } catch (error: any) {
- setError(true);
- showToast("Failed to import users", ToastState.error);
+ async function handleImportAllUsers() {
+ try {
+ let res = await axios.post(
+ `/api/actions/provider-platforms/${providerId}/import-users`
+ );
+ if (res.status === 200) {
+ showToast(
+ 'Users imported successfully, please check for accounts not created',
+ ToastState.success
+ );
+ window.location.reload();
+ }
+ } catch (error: any) {
+ setError(true);
+ showToast('Failed to import users', ToastState.error);
+ }
}
- }
- async function handleImportSelectedUsers() {
- try {
- let res = await axios.post(
- `/api/provider-platforms/${providerId}/users/import`,
- { users: usersToImport },
- );
- if (res.status === 200) {
- showToast(res.data.message, ToastState.success);
- console.log(res.data.data);
- setImportedUsers(res.data.data);
- importedUsersModal.current?.showModal();
- setUsersToImport([]);
- mutate();
- return;
- }
- } catch (err: any) {
- setUsersToImport([]);
- showToast(
- "error importing users, please check accounts",
- ToastState.error,
- );
+ async function handleImportSelectedUsers() {
+ try {
+ let res = await axios.post(
+ `/api/provider-platforms/${providerId}/users/import`,
+ { users: usersToImport }
+ );
+ if (res.status === 200) {
+ showToast(res.data.message, ToastState.success);
+ console.log(res.data.data);
+ setImportedUsers(res.data.data);
+ importedUsersModal.current?.showModal();
+ setUsersToImport([]);
+ mutate();
+ return;
+ }
+ } catch (err: any) {
+ setUsersToImport([]);
+ showToast(
+ 'error importing users, please check accounts',
+ ToastState.error
+ );
+ }
}
- }
-
- function handleSubmitMapUser(msg: string, toastState: ToastState) {
- showToast(msg, toastState);
- mapUserModal.current?.close();
- }
- function handleCloseImportedUsers() {
- importedUsersModal.current?.close();
- setImportedUsers([]);
- return;
- }
+ function handleSubmitMapUser(msg: string, toastState: ToastState) {
+ showToast(msg, toastState);
+ mapUserModal.current?.close();
+ }
- function handleCloseMapUser() {
- mapUserModal.current?.close();
- setUserToMap(null);
- }
+ function handleCloseImportedUsers() {
+ importedUsersModal.current?.close();
+ setImportedUsers([]);
+ return;
+ }
- async function handleMapUser(user: ProviderUser) {
- setUserToMap(user);
- mapUserModal.current?.showModal();
- }
+ function handleCloseMapUser() {
+ mapUserModal.current?.close();
+ setUserToMap(null);
+ }
- function handleAddImportUser(user: ProviderUser) {
- if (usersToImport.includes(user)) {
- setUsersToImport(usersToImport.filter((u) => u !== user));
- } else {
- setUsersToImport([...usersToImport, user]);
+ async function handleMapUser(user: ProviderUser) {
+ setUserToMap(user);
+ mapUserModal.current?.showModal();
}
- }
- useEffect(() => {
- if (data) {
- setMeta(data.meta);
- setCache(false);
+ function handleAddImportUser(user: ProviderUser) {
+ if (usersToImport.includes(user)) {
+ setUsersToImport(usersToImport.filter((u) => u !== user));
+ } else {
+ setUsersToImport([...usersToImport, user]);
+ }
}
- }, [data]);
- useEffect(() => {
- const getData = async () => {
- try {
- const res = await axios.get(`/api/provider-platforms/${providerId}`);
- if (res.status === 200) {
- setProvider(res.data.data);
- setIsLoading(false);
+ useEffect(() => {
+ if (data) {
+ setMeta(data.meta);
+ setCache(false);
}
- } catch (error: any) {
- showToast("Failed to fetch provider users", ToastState.error);
- }
- };
- getData();
- }, [providerId]);
+ }, [data]);
+
+ useEffect(() => {
+ const getData = async () => {
+ try {
+ const res = await axios.get(
+ `/api/provider-platforms/${providerId}`
+ );
+ if (res.status === 200) {
+ setProvider(res.data.data);
+ setIsLoading(false);
+ }
+ } catch (error: any) {
+ showToast('Failed to fetch provider users', ToastState.error);
+ }
+ };
+ getData();
+ }, [providerId]);
- console.log(provider);
+ console.log(provider);
- return (
-
- importAllUsersModal.current?.close()}
- onSuccess={handleImportAllUsers}
- />
- }
- />
- {displayToast &&
- );
+ importAllUsersModal.current?.close()}
+ onSuccess={handleImportAllUsers}
+ />
+ }
+ />
+ {displayToast && );
- const [categoryToDelete, setCategoryToDelete] = useState(null);
- const addCategoryModal = useRef(null);
- const deleteCategoryModal = useRef(null);
+ const [categoryList, setCategoryList] = useState(Array);
+ const [categoryToDelete, setCategoryToDelete] = useState(
+ null
+ );
+ const addCategoryModal = useRef(null);
+ const deleteCategoryModal = useRef(null);
- const [toast, setToast] = useState({
- state: ToastState.null,
- message: "",
- });
+ const [toast, setToast] = useState({
+ state: ToastState.null,
+ message: ''
+ });
- const draggedItem = useRef(null);
- const [draggedOverItem, setDraggedOverItem] = useState(null);
- const dragOverItem = useDebounceValue(draggedOverItem, 100);
+ const draggedItem = useRef(null);
+ const [draggedOverItem, setDraggedOverItem] = useState(null);
+ const dragOverItem = useDebounceValue(draggedOverItem, 100);
- useEffect(() => {
- if (data !== undefined) {
- const updatedData = data.data.map(
- (category: Resource) =>
- ({
- ...category,
- id: Math.random(),
- }) as Resource,
- );
- setCategoryList(updatedData);
- }
- }, [data]);
-
- const MemoizedCategoryList = useMemo(() => {
- if (error) return
- addCategory(title)} />
- }
- ref={addCategoryModal}
- />
- setCategoryToDelete(null)}
- onSuccess={() => {
- deleteCategory(categoryToDelete),
- deleteCategoryModal.current?.close();
- }}
- />
- }
- ref={deleteCategoryModal}
- />
- {/* Toasts */}
- {toast.state !== ToastState.null && (
- setToast({ state: ToastState.null, message: "" })}
- />
- )}
-
- );
+ return (
+
+ addCategory(title)}
+ />
+ }
+ ref={addCategoryModal}
+ />
+ setCategoryToDelete(null)}
+ onSuccess={() => {
+ deleteCategory(categoryToDelete),
+ deleteCategoryModal.current?.close();
+ }}
+ />
+ }
+ ref={deleteCategoryModal}
+ />
+ {/* Toasts */}
+ {toast.state !== ToastState.null && (
+
+ setToast({ state: ToastState.null, message: '' })
+ }
+ />
+ )}
+
+ );
}
diff --git a/frontend/src/Pages/StudentDashboard.tsx b/frontend/src/Pages/StudentDashboard.tsx
index 327e535f..f503ca78 100644
--- a/frontend/src/Pages/StudentDashboard.tsx
+++ b/frontend/src/Pages/StudentDashboard.tsx
@@ -1,158 +1,191 @@
-import CourseCard from "@/Components/EnrolledCourseCard";
-import CurrentlyEnrolledClass from "@/Components/CurrentlyEnrolledClass";
-import { useAuth } from "@/AuthContext";
-import useSWR from "swr";
-import { ServerResponse } from "@/common";
-import convertSeconds from "@/Components/ConvertSeconds";
-import ResourcesSideBar from "@/Components/ResourcesSideBar";
-import WeekActivityChart from "@/Components/WeeklyActivity";
-import Error from "./Error";
-import { useNavigate } from "react-router-dom";
+import CourseCard from '@/Components/EnrolledCourseCard';
+import CurrentlyEnrolledClass from '@/Components/CurrentlyEnrolledClass';
+import { useAuth } from '@/AuthContext';
+import useSWR from 'swr';
+import { ServerResponse } from '@/common';
+import convertSeconds from '@/Components/ConvertSeconds';
+import ResourcesSideBar from '@/Components/ResourcesSideBar';
+import WeekActivityChart from '@/Components/WeeklyActivity';
+import Error from './Error';
+import { useNavigate } from 'react-router-dom';
import {
- AcademicCapIcon,
- ArrowRightIcon,
- BuildingStorefrontIcon,
-} from "@heroicons/react/24/outline";
+ AcademicCapIcon,
+ ArrowRightIcon,
+ BuildingStorefrontIcon
+} from '@heroicons/react/24/outline';
export default function StudentDashboard() {
- const { user } = useAuth();
- const navigate = useNavigate();
- const { data, error, isLoading } = useSWR>(
- `/api/users/${user.id}/student-dashboard`,
- );
-
- if (isLoading) return ;
- if (error) return >(
+ `/api/users/${user.id}/student-dashboard`
);
- };
- const PopularCoursesCard = () => {
- return (
-
My Progress
- {data && ( - <> -
-
+
-
- );
+
+ );
}
diff --git a/frontend/src/Pages/ProviderPlatformManagement.tsx b/frontend/src/Pages/ProviderPlatformManagement.tsx
index 0bb8e322..e702ba57 100644
--- a/frontend/src/Pages/ProviderPlatformManagement.tsx
+++ b/frontend/src/Pages/ProviderPlatformManagement.tsx
@@ -1,259 +1,270 @@
-import PageNav from "@/Components/PageNav";
-import ProviderCard from "@/Components/ProviderCard";
-import AddProviderForm from "@/Components/forms/AddProviderForm";
-import EditProviderForm from "@/Components/forms/EditProviderForm";
-import Modal, { ModalType } from "@/Components/Modal";
-import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import { OidcClient, ProviderPlatform, ServerResponse } from "@/common";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
-import { useRef, useState } from "react";
-import useSWR from "swr";
-import Toast, { ToastState } from "@/Components/Toast";
-import { useAuth } from "../AuthContext";
-import RegisterOidcClientForm from "@/Components/forms/RegisterOidcClientForm";
-import NewOidcClientNotification from "@/Components/NewOidcClientNotification";
-import axios from "axios";
+import PageNav from '@/Components/PageNav';
+import ProviderCard from '@/Components/ProviderCard';
+import AddProviderForm from '@/Components/forms/AddProviderForm';
+import EditProviderForm from '@/Components/forms/EditProviderForm';
+import Modal, { ModalType } from '@/Components/Modal';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import { OidcClient, ProviderPlatform, ServerResponse } from '@/common';
+import { PlusCircleIcon } from '@heroicons/react/24/outline';
+import { useRef, useState } from 'react';
+import useSWR from 'swr';
+import Toast, { ToastState } from '@/Components/Toast';
+import { useAuth } from '../AuthContext';
+import RegisterOidcClientForm from '@/Components/forms/RegisterOidcClientForm';
+import NewOidcClientNotification from '@/Components/NewOidcClientNotification';
+import axios from 'axios';
interface ToastProps {
- state: ToastState;
- message: string;
+ state: ToastState;
+ message: string;
}
export default function ProviderPlatformManagement() {
- const { user } = useAuth();
- const addProviderModal = useRef
-
-
-
+ return (
+
+
- My Progress
+ {data && ( + <> +
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ All Courses
+ {/* dropdown will go here */} +| + Course Name + | +Status | +Grade | ++ Hours Spent + | +
|---|---|---|---|
| + { + course.program_name + } + | +
+ {course.course_progress ==
+ 100 ? (
+ |
+ + {course?.grade || + '-'} + | ++ {courseTotalTime.number + + ' ' + + courseTotalTime.label} + | +
+
+
+
+
+
+
+ Certificates Earned
+ {/* dropdown will go here */} +| + Certificate + | ++ Date Recieved + | +
|---|---|
| + { + certificate.program_name + } + | ++ {new Date( + certificate.created_at.split( + 'T' + )[0] + ).toLocaleDateString( + 'en-US' + )} + | +
-
-
- )}
-
-
-
-
-
-
-
- All Courses
- {/* dropdown will go here */} -| Course Name | -Status | -Grade | -Hours Spent | -
|---|---|---|---|
| {course.program_name} | -
- {course.course_progress == 100 ? (
- |
- {course?.grade || "-"} | -- {courseTotalTime.number + - " " + - courseTotalTime.label} - | -
-
-
-
-
-
-
- Certificates Earned
- {/* dropdown will go here */} -| Certificate | -Date Recieved | -
|---|---|
| {certificate.program_name} | -- {new Date( - certificate.created_at.split("T")[0], - ).toLocaleDateString("en-US")} - | -
-
-
-
-
- {/* Modals */}
- Provider Platforms
-
-
- {/* TO DO: this is where SEARCH and SORT will go */}
-
- | Name | -Registered | -Status | -Actions | -
|---|---|---|---|
| No provider platforms | -
+
+
+
+
+ {/* Modals */}
+ Provider Platforms
+
+
+
+ {/* TO DO: this is where SEARCH and SORT will go */}
+
+
+ | Name | +Registered | +Status | +Actions | +
|---|---|---|---|
| No provider platforms | +
-
- {provider && (
-
- {
- setSearchTerm(e.target.value);
- setCurrentPage(1);
- }}
- />
-
-
-
- importAllUsersModal.current?.showModal()}
- disabled={!provider}
- >
- Import All Users
-
- handleImportAllPrograms()}
- disabled={!provider}
- >
- Import Programs from Provider
-
- handleImportSelectedUsers()}
- disabled={usersToImport.length === 0}
- >
- Import Selected Users
-
-
-
-
-
-
-
- | Name | -Username | -Import | -Associate | -|
|---|---|---|---|---|
| {user.name_first + " " + user.name_last} | -{user.username} | -{user.email} | -
-
-
-
-
-
- |
-
-
-
-
- |
-
-
- {error && (
- Failed to load users.
- )}
- {!isLoading && !error && data && data.meta.total === 0 && (
- No results
- )}
-
- per page:
-
- {!isLoading && data && ( - + return ( +
+
- - {!isLoading && data && ( - + return ( +
+
+ {provider && (
+
+ {
+ setSearchTerm(e.target.value);
+ setCurrentPage(1);
+ }}
+ />
+
+
+
+ importAllUsersModal.current?.showModal()}
+ disabled={!provider}
+ >
+ Import All Users
+
+ handleImportAllPrograms()}
+ disabled={!provider}
+ >
+ Import Programs from Provider
+
+ handleImportSelectedUsers()}
+ disabled={usersToImport.length === 0}
+ >
+ Import Selected Users
+
+
+
+
+
+
+
+ | Name | +Username | +Import | +Associate | +|
|---|---|---|---|---|
| + {user.name_first + + ' ' + + user.name_last} + | +{user.username} | +{user.email} | +
+
+
+
+
+
+ |
+
+
+
+
+ |
+
+
+ {error && (
+
+ Failed to load users.
+
+ )}
+ {!isLoading && !error && data && data.meta.total === 0 && (
+ No results
+ )}
+
+ per page:
+
+ {!isLoading && data && ( + + )} +
+ + {!isLoading && data && ( + + )} +
failed to load
;
- if (isLoading) return loading...
;
- return categoryList.map((category, index) => {
- return (
-
-
- );
- });
- }, [categoryList, dragOverItem]);
+ useEffect(() => {
+ if (data !== undefined) {
+ const updatedData = data.data.map(
+ (category: Resource) =>
+ ({
+ ...category,
+ id: Math.random()
+ }) as Resource
+ );
+ setCategoryList(updatedData);
+ }
+ }, [data]);
- function addCategory(newCategoryTitle: string) {
- const newCategory = {
- id: Math.random(),
- name: newCategoryTitle,
- links: [],
- rank: categoryList.length + 1,
- };
- setCategoryList([...categoryList, newCategory]);
- addCategoryModal.current?.close();
- }
+ const MemoizedCategoryList = useMemo(() => {
+ if (error) return
-
- {index == categoryList.length - 1 ? (
- {
- e.preventDefault(), setDraggedOverItem(index);
- }}
- onDragLeave={(e) => {
- e.preventDefault(), setDraggedOverItem(null);
- }}
- onDrop={(e) => {
- e.preventDefault(), draggedItem.current == null;
- }}
- onDragStart={() => (draggedItem.current = index)}
- onDragEnd={(e) => {
- e.preventDefault();
- if (dragOverItem[0] == null) setDraggedOverItem(-1);
- else handleSort();
- }}
- >
-
-
- {
- deleteCategoryModal.current?.showModal(),
- setCategoryToDelete(category.id);
- }}
- />
-
-
-
- {
- e.preventDefault(), setDraggedOverItem(index + 1);
- }}
- onDragLeave={(e) => {
- e.preventDefault(), setDraggedOverItem(null);
- }}
- onDrop={(e) => {
- e.preventDefault(), draggedItem.current == null;
- }}
- >
- ) : null}
- failed to load
;
+ if (isLoading) return loading...
;
+ return categoryList.map((category, index) => {
+ return (
+
+
+ );
+ });
+ }, [categoryList, dragOverItem]);
- function deleteCategory(id: number | null) {
- if (categoryToDelete == null) return;
- const newCategories = categoryList.filter((category) => category.id !== id);
- setCategoryList(newCategories);
- }
+ function addCategory(newCategoryTitle: string) {
+ const newCategory = {
+ id: Math.random(),
+ name: newCategoryTitle,
+ links: [],
+ rank: categoryList.length + 1
+ };
+ setCategoryList([...categoryList, newCategory]);
+ addCategoryModal.current?.close();
+ }
- function addLink(category: Category, newTitle: string, newURL: string) {
- const newLink: CategoryLink = {};
- newLink[newTitle] = newURL;
- const newCategoryList = categoryList.map((c, _) => {
- if (c == category) {
- // add link to the category
- c.links.push(newLink);
- return c;
- } else return c;
- });
- setCategoryList(newCategoryList);
- }
+ function deleteCategory(id: number | null) {
+ if (categoryToDelete == null) return;
+ const newCategories = categoryList.filter(
+ (category) => category.id !== id
+ );
+ setCategoryList(newCategories);
+ }
- function deleteLink(category: Category, activeLinkToDelete: CategoryLink) {
- const newCategoryList = categoryList.map((c, _) => {
- if (c == category) {
- // delete link of the category
- c.links = c.links.filter((link) => link !== activeLinkToDelete);
- return c;
- } else return c;
- });
- setCategoryList(newCategoryList);
- }
+ function addLink(category: Category, newTitle: string, newURL: string) {
+ const newLink: CategoryLink = {};
+ newLink[newTitle] = newURL;
+ const newCategoryList = categoryList.map((c, _) => {
+ if (c == category) {
+ // add link to the category
+ c.links.push(newLink);
+ return c;
+ } else return c;
+ });
+ setCategoryList(newCategoryList);
+ }
- function moveLink(
- category: Category,
- linkIndex: number,
- direction: "up" | "down",
- ) {
- let index: number;
- if (direction == "up") {
- if (linkIndex == 0) return;
- index = linkIndex - 1;
+ function deleteLink(category: Category, activeLinkToDelete: CategoryLink) {
+ const newCategoryList = categoryList.map((c, _) => {
+ if (c == category) {
+ // delete link of the category
+ c.links = c.links.filter((link) => link !== activeLinkToDelete);
+ return c;
+ } else return c;
+ });
+ setCategoryList(newCategoryList);
}
- if (direction == "down") {
- if (linkIndex == category.links.length - 1) return;
- index = linkIndex + 1;
+
+ function moveLink(
+ category: Category,
+ linkIndex: number,
+ direction: 'up' | 'down'
+ ) {
+ let index: number;
+ if (direction == 'up') {
+ if (linkIndex == 0) return;
+ index = linkIndex - 1;
+ }
+ if (direction == 'down') {
+ if (linkIndex == category.links.length - 1) return;
+ index = linkIndex + 1;
+ }
+ const newCategoryList = categoryList.map((c, _) => {
+ if (c == category) {
+ const linksArray = c.links;
+ const temp = linksArray[index];
+ linksArray[index] = linksArray[linkIndex];
+ linksArray[linkIndex] = temp;
+ c.links = linksArray;
+ return c;
+ } else return c;
+ });
+ setCategoryList(newCategoryList);
}
- const newCategoryList = categoryList.map((c, _) => {
- if (c == category) {
- const linksArray = c.links;
- const temp = linksArray[index];
- linksArray[index] = linksArray[linkIndex];
- linksArray[linkIndex] = temp;
- c.links = linksArray;
- return c;
- } else return c;
- });
- setCategoryList(newCategoryList);
- }
- function updateLink(category: Category, linkIndex: number, newLinkPair: any) {
- categoryList.map((c, _) => {
- if (c == category) {
- category.links[linkIndex] = newLinkPair;
- return c;
- } else return c;
- });
- }
+ function updateLink(
+ category: Category,
+ linkIndex: number,
+ newLinkPair: any
+ ) {
+ categoryList.map((c, _) => {
+ if (c == category) {
+ category.links[linkIndex] = newLinkPair;
+ return c;
+ } else return c;
+ });
+ }
- function handleSort() {
- if (draggedItem.current == null || dragOverItem == null) return;
+ function handleSort() {
+ if (draggedItem.current == null || dragOverItem == null) return;
- const insertAtIndex = dragOverItem;
- // if dragged item is higher in the list, then should subtract a number from where it needs to be placed
- if (draggedItem.current < dragOverItem[0]!)
- insertAtIndex[0] = insertAtIndex[0]! - 1;
+ const insertAtIndex = dragOverItem;
+ // if dragged item is higher in the list, then should subtract a number from where it needs to be placed
+ if (draggedItem.current < dragOverItem[0]!)
+ insertAtIndex[0] = insertAtIndex[0]! - 1;
- //duplicate items
- const newCategoryList = [...categoryList];
+ //duplicate items
+ const newCategoryList = [...categoryList];
- //remove and save the dragged item content
- const draggedItemContent = newCategoryList.splice(
- draggedItem.current,
- 1,
- )[0];
+ //remove and save the dragged item content
+ const draggedItemContent = newCategoryList.splice(
+ draggedItem.current,
+ 1
+ )[0];
- if (insertAtIndex[0] == categoryList.length)
- newCategoryList.push(draggedItemContent);
- else newCategoryList.splice(insertAtIndex[0]!, 0, draggedItemContent);
+ if (insertAtIndex[0] == categoryList.length)
+ newCategoryList.push(draggedItemContent);
+ else newCategoryList.splice(insertAtIndex[0]!, 0, draggedItemContent);
- //update the actual array
- setCategoryList(newCategoryList);
+ //update the actual array
+ setCategoryList(newCategoryList);
- draggedItem.current = null;
- setDraggedOverItem(null);
- }
+ draggedItem.current = null;
+ setDraggedOverItem(null);
+ }
- async function updateFinalState(e: any) {
- setToast({ state: ToastState.null, message: "" });
- e.preventDefault();
- const newCategoryList = categoryList.map((c, i) => {
- c.rank = i + 1;
- c.id = i;
- return c;
- });
- try {
- const response = await axios.put("/api/left-menu", newCategoryList);
- // check response is okay, and give notification
- if (response.status !== 201) {
- // show error
- setToast({
- state: ToastState.error,
- message: "Error Saving Categories",
- });
- } else {
- mutate();
- // show success
- setToast({
- state: ToastState.success,
- message: "Categories Saved!",
+ async function updateFinalState(e: any) {
+ setToast({ state: ToastState.null, message: '' });
+ e.preventDefault();
+ const newCategoryList = categoryList.map((c, i) => {
+ c.rank = i + 1;
+ c.id = i;
+ return c;
});
- }
- } catch (err: any) {
- console.log(err);
- if (err.response.status == 422) {
- setToast({
- state: ToastState.error,
- message: "All categories must have associated links",
- });
- } else {
- // show general error
- setToast({
- state: ToastState.error,
- message: "Error Saving Categories",
- });
- }
+ try {
+ const response = await axios.put('/api/left-menu', newCategoryList);
+ // check response is okay, and give notification
+ if (response.status !== 201) {
+ // show error
+ setToast({
+ state: ToastState.error,
+ message: 'Error Saving Categories'
+ });
+ } else {
+ mutate();
+ // show success
+ setToast({
+ state: ToastState.success,
+ message: 'Categories Saved!'
+ });
+ }
+ } catch (err: any) {
+ console.log(err);
+ if (err.response.status == 422) {
+ setToast({
+ state: ToastState.error,
+ message: 'All categories must have associated links'
+ });
+ } else {
+ // show general error
+ setToast({
+ state: ToastState.error,
+ message: 'Error Saving Categories'
+ });
+ }
+ }
}
- }
- return (
-
+
+ {index == categoryList.length - 1 ? (
+ {
+ e.preventDefault(), setDraggedOverItem(index);
+ }}
+ onDragLeave={(e) => {
+ e.preventDefault(), setDraggedOverItem(null);
+ }}
+ onDrop={(e) => {
+ e.preventDefault(), draggedItem.current == null;
+ }}
+ onDragStart={() => (draggedItem.current = index)}
+ onDragEnd={(e) => {
+ e.preventDefault();
+ if (dragOverItem[0] == null)
+ setDraggedOverItem(-1);
+ else handleSort();
+ }}
+ >
+
+
+ {
+ deleteCategoryModal.current?.showModal(),
+ setCategoryToDelete(category.id);
+ }}
+ />
+
+
+
+ {
+ e.preventDefault(),
+ setDraggedOverItem(index + 1);
+ }}
+ onDragLeave={(e) => {
+ e.preventDefault(), setDraggedOverItem(null);
+ }}
+ onDrop={(e) => {
+ e.preventDefault(), draggedItem.current == null;
+ }}
+ >
+ ) : null}
+
-
- {/* Modals */}
-
-
-
-
-
-
- {MemoizedCategoryList}
-
+
+ {/* Modals */}
+
+
+
+
+
+
+ {MemoizedCategoryList}
+
-
-
-
+ const { user } = useAuth();
+ const navigate = useNavigate();
+ const { data, error, isLoading } = useSWR
-
- Explore Course Catalog
-- Looking for more content to engage with? Browse courses offered at - your facility. -
- navigate(`/course-catalog`)} - > - Explore courses -
-
- );
- };
+ if (isLoading) return ;
+ if (error) return
-
- Popular Courses on UnlockEd
--
- {data.top_programs.map((name: string) => {
- return (
-
-
-
- {name}
-
- );
- })}
-
-
+
+
+ {!isLoading && !error && data.data.length != 0 && (
+
+
+
-
+ Hi, {user.name_first}!
-Pick Up Where You Left Off
-
-
-
- {data?.recent_programs.map((course, index) => {
- return
-
- ;
+ const userActivityData = data as PaginatedResponse;
- const handleChange = (newSearch: string) => {
- setSearchTerm(newSearch);
- setPageQuery(1);
- };
+ const handleChange = (newSearch: string) => {
+ setSearchTerm(newSearch);
+ setPageQuery(1);
+ };
- return (
-
-
+ );
}
diff --git a/frontend/src/Pages/Users.tsx b/frontend/src/Pages/Users.tsx
index 3c8cb10f..4b7355b9 100644
--- a/frontend/src/Pages/Users.tsx
+++ b/frontend/src/Pages/Users.tsx
@@ -1,323 +1,352 @@
-import { useRef, useState } from "react";
-import useSWR from "swr";
-import axios from "axios";
+import { useRef, useState } from 'react';
+import useSWR from 'swr';
+import axios from 'axios';
-import AuthenticatedLayout from "../Layouts/AuthenticatedLayout";
+import AuthenticatedLayout from '../Layouts/AuthenticatedLayout';
import {
- ArrowPathRoundedSquareIcon,
- PencilIcon,
- TrashIcon,
- UserPlusIcon,
-} from "@heroicons/react/20/solid";
-import { DEFAULT_ADMIN_ID, PaginatedResponse, User } from "../common";
-import PageNav from "../Components/PageNav";
-import AddUserForm from "../Components/forms/AddUserForm";
-import EditUserForm from "../Components/forms/EditUserForm";
-import Toast, { ToastState } from "../Components/Toast";
-import Modal, { ModalType } from "../Components/Modal";
-import DeleteForm from "../Components/DeleteForm";
-import ResetPasswordForm from "../Components/forms/ResetPasswordForm";
-import ShowTempPasswordForm from "../Components/forms/ShowTempPasswordForm";
-import DropdownControl from "@/Components/inputs/DropdownControl";
-import SearchBar from "../Components/inputs/SearchBar";
-import { useAuth } from "../AuthContext";
-import { useDebounceValue } from "usehooks-ts";
-import Pagination from "@/Components/Pagination";
+ ArrowPathRoundedSquareIcon,
+ PencilIcon,
+ TrashIcon,
+ UserPlusIcon
+} from '@heroicons/react/20/solid';
+import { DEFAULT_ADMIN_ID, PaginatedResponse, User } from '../common';
+import PageNav from '../Components/PageNav';
+import AddUserForm from '../Components/forms/AddUserForm';
+import EditUserForm from '../Components/forms/EditUserForm';
+import Toast, { ToastState } from '../Components/Toast';
+import Modal, { ModalType } from '../Components/Modal';
+import DeleteForm from '../Components/DeleteForm';
+import ResetPasswordForm from '../Components/forms/ResetPasswordForm';
+import ShowTempPasswordForm from '../Components/forms/ShowTempPasswordForm';
+import DropdownControl from '@/Components/inputs/DropdownControl';
+import SearchBar from '../Components/inputs/SearchBar';
+import { useAuth } from '../AuthContext';
+import { useDebounceValue } from 'usehooks-ts';
+import Pagination from '@/Components/Pagination';
export default function Users() {
- const auth = useAuth();
- const addUserModal = useRef(null);
- const editUserModal = useRef(null);
- const resetUserPasswordModal = useRef(null);
- const deleteUserModal = useRef(null);
- const [displayToast, setDisplayToast] = useState(false);
- const [targetUser, setTargetUser] = useState(null);
- const [tempPassword, setTempPassword] = useState("");
- const showUserPassword = useRef(null);
- const [toast, setToast] = useState({
- state: ToastState.null,
- message: "",
- reset: () => {},
- });
+ const auth = useAuth();
+ const addUserModal = useRef(null);
+ const editUserModal = useRef(null);
+ const resetUserPasswordModal = useRef(null);
+ const deleteUserModal = useRef(null);
+ const [displayToast, setDisplayToast] = useState(false);
+ const [targetUser, setTargetUser] = useState(null);
+ const [tempPassword, setTempPassword] = useState('');
+ const showUserPassword = useRef(null);
+ const [toast, setToast] = useState({
+ state: ToastState.null,
+ message: '',
+ reset: () => {}
+ });
- const [searchTerm, setSearchTerm] = useState("");
- const searchQuery = useDebounceValue(searchTerm, 300);
- const [pageQuery, setPageQuery] = useState(1);
- const [sortQuery, setSortQuery] = useState("created_at DESC");
- const { data, mutate, error, isLoading } = useSWR(
- `/api/users?search=${searchQuery[0]}&page=${pageQuery}&order_by=${sortQuery}`,
- );
- const userData = data as PaginatedResponse;
- const showToast = (message: string, state: ToastState) => {
- setToast({
- state,
- message,
- reset: () => {
+ const [searchTerm, setSearchTerm] = useState('');
+ const searchQuery = useDebounceValue(searchTerm, 300);
+ const [pageQuery, setPageQuery] = useState(1);
+ const [sortQuery, setSortQuery] = useState('created_at DESC');
+ const { data, mutate, error, isLoading } = useSWR(
+ `/api/users?search=${searchQuery[0]}&page=${pageQuery}&order_by=${sortQuery}`
+ );
+ const userData = data as PaginatedResponse;
+ const showToast = (message: string, state: ToastState) => {
setToast({
- state: ToastState.success,
- message: "",
- reset: () => {
- setDisplayToast(false);
- },
+ state,
+ message,
+ reset: () => {
+ setToast({
+ state: ToastState.success,
+ message: '',
+ reset: () => {
+ setDisplayToast(false);
+ }
+ });
+ }
});
- },
- });
- setDisplayToast(true);
- };
-
- function resetModal() {
- setTimeout(() => {
- setTargetUser(null);
- }, 200);
- }
+ setDisplayToast(true);
+ };
- const deleteUser = async () => {
- if (targetUser?.id === DEFAULT_ADMIN_ID) {
- showToast(
- "This is the primary administrator and cannot be deleted",
- ToastState.error,
- );
- return;
+ function resetModal() {
+ setTimeout(() => {
+ setTargetUser(null);
+ }, 200);
}
- try {
- const response = await axios.delete("/api/users/" + targetUser?.id);
- const toastType =
- response.status == 204 ? ToastState.success : ToastState.error;
- const message =
- response.status == 204
- ? "User deleted successfully"
- : response.statusText;
- deleteUserModal.current?.close();
- showToast(message, toastType);
- resetModal();
- mutate();
- return;
- } catch (err: any) {
- showToast("Unable to delete user, please try again", ToastState.error);
- return;
- }
- };
- const onAddUserSuccess = (pswd = "", msg: string, type: ToastState) => {
- showToast(msg, type);
- setTempPassword(pswd);
- addUserModal.current?.close();
- showUserPassword.current?.showModal();
- mutate();
- };
+ const deleteUser = async () => {
+ if (targetUser?.id === DEFAULT_ADMIN_ID) {
+ showToast(
+ 'This is the primary administrator and cannot be deleted',
+ ToastState.error
+ );
+ return;
+ }
+ try {
+ const response = await axios.delete('/api/users/' + targetUser?.id);
+ const toastType =
+ response.status == 204 ? ToastState.success : ToastState.error;
+ const message =
+ response.status == 204
+ ? 'User deleted successfully'
+ : response.statusText;
+ deleteUserModal.current?.close();
+ showToast(message, toastType);
+ resetModal();
+ mutate();
+ return;
+ } catch (err: any) {
+ showToast(
+ 'Unable to delete user, please try again',
+ ToastState.error
+ );
+ return;
+ }
+ };
- const hanldleEditUser = () => {
- editUserModal.current?.close();
- resetModal();
- mutate();
- };
+ const onAddUserSuccess = (pswd = '', msg: string, type: ToastState) => {
+ showToast(msg, type);
+ setTempPassword(pswd);
+ addUserModal.current?.close();
+ showUserPassword.current?.showModal();
+ mutate();
+ };
- const handleDeleteUserCancel = () => {
- deleteUserModal.current?.close();
- resetModal();
- };
+ const hanldleEditUser = () => {
+ editUserModal.current?.close();
+ resetModal();
+ mutate();
+ };
- const handleResetPasswordCancel = (msg: string, err: boolean) => {
- const state = err ? ToastState.error : ToastState.success;
- if (msg === "" && !err) {
- resetUserPasswordModal.current?.close();
- resetModal();
- return;
- }
- showToast(msg, state);
- resetModal();
- };
+ const handleDeleteUserCancel = () => {
+ deleteUserModal.current?.close();
+ resetModal();
+ };
- const handleDisplayTempPassword = (psw: string) => {
- setTempPassword(psw);
- resetUserPasswordModal.current?.close();
- showUserPassword.current?.showModal();
- showToast("Password Successfully Reset", ToastState.success);
- };
+ const handleResetPasswordCancel = (msg: string, err: boolean) => {
+ const state = err ? ToastState.error : ToastState.success;
+ if (msg === '' && !err) {
+ resetUserPasswordModal.current?.close();
+ resetModal();
+ return;
+ }
+ showToast(msg, state);
+ resetModal();
+ };
- const handleShowPasswordClose = () => {
- showUserPassword.current?.close();
- setTempPassword("");
- resetModal();
- };
+ const handleDisplayTempPassword = (psw: string) => {
+ setTempPassword(psw);
+ resetUserPasswordModal.current?.close();
+ showUserPassword.current?.showModal();
+ showToast('Password Successfully Reset', ToastState.success);
+ };
- const handleChange = (newSearch: string) => {
- setSearchTerm(newSearch);
- setPageQuery(1);
- };
+ const handleShowPasswordClose = () => {
+ showUserPassword.current?.close();
+ setTempPassword('');
+ resetModal();
+ };
- return (
-
-
-
-
- My Activity
-
-
- Learning Time
-
- {/* TO DO: caption needs to be added */}
-
-
-
+ const ExploreCourseCatalogCard = () => {
+ return (
+
- | Course Name | -Hours Spent | -
|---|---|
| {course.name} | -- {totalTime.number + " " + totalTime.label} - | -
+
+
+
-
+
+ Explore Course Catalog +
++ Looking for more content to engage with? Browse courses + offered at your facility. +
+ navigate(`/course-catalog`)} + > + Explore courses +Currently Enrolled Classes
-
- {!error && !isLoading && (
-
- );
+ );
}
diff --git a/frontend/src/Pages/UserActivity.tsx b/frontend/src/Pages/UserActivity.tsx
index 3475f343..f2dfebac 100644
--- a/frontend/src/Pages/UserActivity.tsx
+++ b/frontend/src/Pages/UserActivity.tsx
@@ -1,116 +1,134 @@
-import PageNav from "../Components/PageNav";
-import Pagination from "../Components/Pagination";
-import AuthenticatedLayout from "../Layouts/AuthenticatedLayout";
-import DropdownControl from "@/Components/inputs/DropdownControl";
-import SearchBar from "../Components/inputs/SearchBar";
-import { Activity, PaginatedResponse } from "../common";
-import { useState } from "react";
-import useSWR from "swr";
+import PageNav from '../Components/PageNav';
+import Pagination from '../Components/Pagination';
+import AuthenticatedLayout from '../Layouts/AuthenticatedLayout';
+import DropdownControl from '@/Components/inputs/DropdownControl';
+import SearchBar from '../Components/inputs/SearchBar';
+import { Activity, PaginatedResponse } from '../common';
+import { useState } from 'react';
+import useSWR from 'swr';
// import { useDebounceValue } from "usehooks-ts";
-import { useAuth } from "../AuthContext";
+import { useAuth } from '../AuthContext';
export default function UserActivity() {
- const [searchTerm, setSearchTerm] = useState("");
- // const searchQuery = useDebounceValue(searchTerm, 300);
- const { user } = useAuth();
- // TO DO: come back and figure out pagequery
- const [pageQuery, setPageQuery] = useState(1);
- pageQuery;
+ const [searchTerm, setSearchTerm] = useState('');
+ // const searchQuery = useDebounceValue(searchTerm, 300);
+ const { user } = useAuth();
+ // TO DO: come back and figure out pagequery
+ const [pageQuery, setPageQuery] = useState(1);
+ pageQuery;
- const [sortQuery, setSortQuery] = useState("user_id DESC");
+ const [sortQuery, setSortQuery] = useState('user_id DESC');
- const { data, error, isLoading } = useSWR(
- `/api/users/activity-log?sort=${sortQuery}&page=${pageQuery}&search=${searchTerm}`,
- );
+ const { data, error, isLoading } = useSWR(
+ `/api/users/activity-log?sort=${sortQuery}&page=${pageQuery}&search=${searchTerm}`
+ );
- const userActivityData = data as PaginatedResponse
- {data.enrollments ? (
- data?.enrollments?.map((course: any) => {
- return (
-
-
- - You are currently not enrolled in any courses. -
- )} + ); + }; + + const PopularCoursesCard = () => { + return ( +
+
- )}
+ );
+ };
+
+ return (
+
+
+ Popular Courses on UnlockEd +
+-
+ {data.top_programs.map((name: string) => {
+ return (
+
-
+
+ {name}
+
+ );
+ })}
+
+
-
+
+
+ Hi, {user.name_first}!
+Pick Up Where You Left Off
+
+
+
+ {data?.recent_programs.map((course, index) => {
+ return (
+
+
+
+
+
+ My Activity
+
+
+ Learning Time
+
+ {/* TO DO: caption needs to be added */}
+
+
+
+
+ | + Course Name + | ++ Hours Spent + | +
|---|---|
| + {course.name} + | ++ {totalTime.number + + ' ' + + totalTime.label} + | +
Currently Enrolled Classes
+
+ {!error && !isLoading && (
+
+
+ {data.enrollments ? (
+ data?.enrollments?.map((course: any) => {
+ return (
+
+ )}
+ + You are currently not enrolled in any + courses. +
+ )} +
-
-
-
+ {!isLoading && !error && data.data.length != 0 && (
+
+
-
-
-
- | - User - | -Browser | -URL | -Time | -||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| - {activityInstance.user_name_first + - " " + - activityInstance.user_name_last} - | -{activityInstance.browser_name} | -- - {activityInstance.clicked_url} - - | -
- {dateTime.toLocaleString("en-US")}
- {/*
+
+
-
- );
+
+
+
+
+
|
+
-
-
-
- {!isLoading && !error && data.data.length != 0 && (
-
+ />
+
-
-
-
+ const handleChange = (newSearch: string) => {
+ setSearchTerm(newSearch);
+ setPageQuery(1);
+ };
-
-
-
- | - Name - | -Username | -Role | -Last Updated | -Actions | -
|---|---|---|---|---|
| - {user.name_first} {user.name_last} - | -{user.username} | -{user.role} | -- - | -
-
-
-
-
-
-
-
+
+
-
+
- |
-
No user defined!
- )
- }
- />
-
+
+
+ | + Name + | +Username | +Role | +Last Updated | +Actions | +
|---|---|---|---|---|
| + {user.name_first} {user.name_last} + | +{user.username} | +{user.role} | ++ + | +
+
+
+
+
+
+
+
+
+ |
+
No user defined!
+ )
+ }
+ />
+
-
+ return (
+
+ {children} ;
+ return {children} ;
}
export default function App() {
- const router = createBrowserRouter([
- {
- path: "/",
- element: Loading...} />;
+ return (
+ Loading...} />
+ );
}
diff --git a/frontend/src/bootstrap.ts b/frontend/src/bootstrap.ts
index 52a85a36..5e986159 100644
--- a/frontend/src/bootstrap.ts
+++ b/frontend/src/bootstrap.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from 'axios';
axios.defaults.withCredentials = true;
-axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios = axios;
diff --git a/frontend/src/common.ts b/frontend/src/common.ts
index f625f474..e4cab285 100644
--- a/frontend/src/common.ts
+++ b/frontend/src/common.ts
@@ -1,192 +1,192 @@
export enum UserRole {
- Admin = "admin",
- Student = "student",
+ Admin = 'admin',
+ Student = 'student'
}
export const DEFAULT_ADMIN_ID = 1;
export interface User {
- id: number;
- name_first: string;
- name_last: string;
- username: string;
- role: string;
- email: string;
- [key: string]: any;
+ id: number;
+ name_first: string;
+ name_last: string;
+ username: string;
+ role: string;
+ email: string;
+ [key: string]: any;
}
export interface UserWithMappings {
- User: User;
- logins: Array;
+ User: User;
+ logins: Array;
}
export interface ProviderUser {
- username: string;
- name_last: string;
- name_first: string;
- email: string;
- external_user_id: string;
- external_username: string;
+ username: string;
+ name_last: string;
+ name_first: string;
+ email: string;
+ external_user_id: string;
+ external_username: string;
}
export interface UserImports {
- username: string;
- temp_password: string;
- error?: string;
+ username: string;
+ temp_password: string;
+ error?: string;
}
export interface ProviderMapping {
- id: number;
- provider_platform_id: number;
- user_id: number;
- external_user_id: string;
- external_login_id: string;
- external_username: string;
- created_at: Date;
- updated_at: Date;
+ id: number;
+ provider_platform_id: number;
+ user_id: number;
+ external_user_id: string;
+ external_login_id: string;
+ external_username: string;
+ created_at: Date;
+ updated_at: Date;
}
export interface PaginatedResponse {
- message: string;
- data: Array;
- meta: PaginationMeta;
+ message: string;
+ data: Array;
+ meta: PaginationMeta;
}
export interface PaginationMeta {
- total: number;
- current_page: number;
- last_page: number;
- per_page: number;
+ total: number;
+ current_page: number;
+ last_page: number;
+ per_page: number;
}
export interface ServerResponse {
- [key: string]: any;
- message: string;
- data: Array;
+ [key: string]: any;
+ message: string;
+ data: Array;
}
export interface Category {
- id: number;
- name: string;
- links: Array;
- rank: number;
+ id: number;
+ name: string;
+ links: Array;
+ rank: number;
}
export interface CategoryLink {
- [linkName: string]: string;
+ [linkName: string]: string;
}
export interface OidcClient {
- client_id: string;
- client_secret: string;
- scopes: string;
- auth_url: string;
- token_url: string;
+ client_id: string;
+ client_secret: string;
+ scopes: string;
+ auth_url: string;
+ token_url: string;
}
export interface Activity {
- browser_name: string;
- clicked_url: string;
- created_at: string;
- device: string;
- id: number;
- platform: string;
- updated_at: Date;
- user_name_first: string;
- user_name_last: string;
+ browser_name: string;
+ clicked_url: string;
+ created_at: string;
+ device: string;
+ id: number;
+ platform: string;
+ updated_at: Date;
+ user_name_first: string;
+ user_name_last: string;
}
export interface Program {
- id: number;
- provider_platform_id: number;
- name: string;
- description: string;
- external_id: string;
- thumbnail_url: string;
- is_public: boolean;
- external_url: string;
- created_at: Date;
- updated_at: Date;
+ id: number;
+ provider_platform_id: number;
+ name: string;
+ description: string;
+ external_id: string;
+ thumbnail_url: string;
+ is_public: boolean;
+ external_url: string;
+ created_at: Date;
+ updated_at: Date;
}
export interface CourseCatalogue {
- key: [number, string, boolean];
- program_id: number;
- thumbnail_url: string;
- program_name: string;
- provider_name: string;
- external_url: string;
- program_type: string;
- description: string;
- is_favorited: boolean;
- outcome_types: string;
+ key: [number, string, boolean];
+ program_id: number;
+ thumbnail_url: string;
+ program_name: string;
+ provider_name: string;
+ external_url: string;
+ program_type: string;
+ description: string;
+ is_favorited: boolean;
+ outcome_types: string;
}
export interface Milestone {
- id: number;
- program_id: number;
- type: string;
- external_url: string;
- description: string;
- external_id: Date;
- created_at: Date;
- updated_at: Date;
+ id: number;
+ program_id: number;
+ type: string;
+ external_url: string;
+ description: string;
+ external_id: Date;
+ created_at: Date;
+ updated_at: Date;
}
export interface ProviderPlatform {
- access_key: string;
- account_id: string;
- base_url: string;
- description: string;
- icon_url: string;
- id: number;
- name: string;
- state: ProviderPlatformState;
- type: ProviderPlatformType;
- oidc_id: number;
- [key: string | ProviderPlatformState | ProviderPlatformType]: any;
+ access_key: string;
+ account_id: string;
+ base_url: string;
+ description: string;
+ icon_url: string;
+ id: number;
+ name: string;
+ state: ProviderPlatformState;
+ type: ProviderPlatformType;
+ oidc_id: number;
+ [key: string | ProviderPlatformState | ProviderPlatformType]: any;
}
export enum ProviderPlatformState {
- ENABLED = "enabled",
- DISABLED = "disabled",
- ARCHIVED = "archived",
+ ENABLED = 'enabled',
+ DISABLED = 'disabled',
+ ARCHIVED = 'archived'
}
export enum ProviderPlatformType {
- CANVAS_CLOUD = "canvas_cloud",
- CANVAS_OSS = "canvas_oss",
- KOLIBRI = "kolibri",
+ CANVAS_CLOUD = 'canvas_cloud',
+ CANVAS_OSS = 'canvas_oss',
+ KOLIBRI = 'kolibri'
}
export interface AdminDashboardJoin {
- monthly_activity: RecentActivity[];
- weekly_active_users: number;
- avg_daily_activity: number;
- total_weekly_activity: number;
- program_milestones: ProgramMilestones[];
- top_program_activity: ProgramActivity[];
- facility_name: string;
+ monthly_activity: RecentActivity[];
+ weekly_active_users: number;
+ avg_daily_activity: number;
+ total_weekly_activity: number;
+ program_milestones: ProgramMilestones[];
+ top_program_activity: ProgramActivity[];
+ facility_name: string;
}
export interface ProgramMilestones {
- name: string;
- milestones: number;
+ name: string;
+ milestones: number;
}
export interface ProgramActivity {
- program_name: string;
- hours_engaged: number;
+ program_name: string;
+ hours_engaged: number;
}
export interface RecentActivity {
- date: string;
- delta: number;
+ date: string;
+ delta: number;
}
export interface Link {
- [name: string]: string;
+ [name: string]: string;
}
export interface Resource {
- name: string;
- links: Array;
- rank: number;
+ name: string;
+ links: Array;
+ rank: number;
}
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 9b76ba1b..82be1198 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -3,77 +3,77 @@
@tailwind utilities;
@layer base {
- h1 {
- @apply text-2xl text-header-text font-lexend font-semibold;
- }
- h2 {
- @apply text-base text-header-text font-lexend font-semibold;
- }
- h3 {
- @apply text-base text-header-text font-lexend font-semibold;
- }
- p {
- @apply text-body-text font-inter font-medium;
- }
- body {
- @apply text-body-text font-inter font-medium;
- }
+ h1 {
+ @apply text-2xl text-header-text font-lexend font-semibold;
+ }
+ h2 {
+ @apply text-base text-header-text font-lexend font-semibold;
+ }
+ h3 {
+ @apply text-base text-header-text font-lexend font-semibold;
+ }
+ p {
+ @apply text-body-text font-inter font-medium;
+ }
+ body {
+ @apply text-body-text font-inter font-medium;
+ }
}
@layer components {
- .body {
- @apply text-sm;
- }
- .body-small {
- @apply text-xs;
- }
- .card {
- @apply shadow-md rounded-lg border border-black border-opacity-[10%] bg-base-teal;
- }
- .card-h-padding {
- @apply mt-4 ml-4;
- }
- .catalog-pill {
- @apply text-xs px-3 py-1 rounded-2xl flex-grow-0 mx-2;
- }
- .table-2 {
- @apply w-full;
- }
- .table-2 thead tr {
- @apply grid grid-flow-col auto-cols-max justify-between border border-x-0 border-t-0 mt-2;
- }
- .table-2 th {
- @apply body text-grey-4 font-medium;
- }
- .table-2 tbody {
- @apply flex flex-col gap-4 mt-4;
- }
- .table-2 tbody tr {
- @apply grid grid-flow-col auto-cols-max justify-between mr-3;
- }
- .table-2 td {
- @apply body-small my-auto;
- }
- .button {
- @apply bg-teal-3 body text-white py-3 px-3 flex flex-row gap-3 rounded-lg;
- }
+ .body {
+ @apply text-sm;
+ }
+ .body-small {
+ @apply text-xs;
+ }
+ .card {
+ @apply shadow-md rounded-lg border border-black border-opacity-[10%] bg-base-teal;
+ }
+ .card-h-padding {
+ @apply mt-4 ml-4;
+ }
+ .catalog-pill {
+ @apply text-xs px-3 py-1 rounded-2xl flex-grow-0 mx-2;
+ }
+ .table-2 {
+ @apply w-full;
+ }
+ .table-2 thead tr {
+ @apply grid grid-flow-col auto-cols-max justify-between border border-x-0 border-t-0 mt-2;
+ }
+ .table-2 th {
+ @apply body text-grey-4 font-medium;
+ }
+ .table-2 tbody {
+ @apply flex flex-col gap-4 mt-4;
+ }
+ .table-2 tbody tr {
+ @apply grid grid-flow-col auto-cols-max justify-between mr-3;
+ }
+ .table-2 td {
+ @apply body-small my-auto;
+ }
+ .button {
+ @apply bg-teal-3 body text-white py-3 px-3 flex flex-row gap-3 rounded-lg;
+ }
}
@layer utilities {
- .font-lexend {
- font-family: "Lexend", sans-serif;
- }
- .font-inter {
- font-family: "Inter", sans-serif;
- }
- /* for Chrome, Safari and Opera */
- .scrollbar::-webkit-scrollbar {
- scrollbar-width: thin;
- scrollbar-color: var(--grey-2) transparent;
- }
- /* for IE, Edge and Firefox */
- .scrollbar {
- scrollbar-width: thin;
- scrollbar-color: var(--grey-2) transparent;
- }
+ .font-lexend {
+ font-family: 'Lexend', sans-serif;
+ }
+ .font-inter {
+ font-family: 'Inter', sans-serif;
+ }
+ /* for Chrome, Safari and Opera */
+ .scrollbar::-webkit-scrollbar {
+ scrollbar-width: thin;
+ scrollbar-color: var(--grey-2) transparent;
+ }
+ /* for IE, Edge and Firefox */
+ .scrollbar {
+ scrollbar-width: thin;
+ scrollbar-color: var(--grey-2) transparent;
+ }
}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 441559ec..85bd5bca 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./app";
-import "./css/app.css";
-import { SWRConfig } from "swr";
-import { ThemeProvider } from "./Components/ThemeContext";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app';
+import './css/app.css';
+import { SWRConfig } from 'swr';
+import { ThemeProvider } from './Components/ThemeContext';
-ReactDOM.createRoot(document.getElementById("root")!).render(
-
- window.axios.get(url).then((res) => res.data),
- }}
- >
-
-
-
- ,
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ window.axios.get(url).then((res) => res.data)
+ }}
+ >
+
+
+
+
);
diff --git a/frontend/src/types/global.d.ts b/frontend/src/types/global.d.ts
index 5fea1de6..29996e66 100644
--- a/frontend/src/types/global.d.ts
+++ b/frontend/src/types/global.d.ts
@@ -1,11 +1,11 @@
-import { AxiosInstance } from "axios";
+import { AxiosInstance } from 'axios';
declare global {
- interface Window {
- axios: AxiosInstance;
- }
+ interface Window {
+ axios: AxiosInstance;
+ }
- interface HTMLDialogElement {
- showModal: () => void;
- }
+ interface HTMLDialogElement {
+ showModal: () => void;
+ }
}
diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts
index 709ea1d7..69caf43c 100644
--- a/frontend/src/types/index.d.ts
+++ b/frontend/src/types/index.d.ts
@@ -1,23 +1,23 @@
export enum UserRole {
- Admin = "admin",
- Student = "student",
+ Admin = 'admin',
+ Student = 'student'
}
export interface User {
- created_at: any;
- id: number;
- name_first: string;
- name_last: string;
- username: string;
- role: string;
- email: string;
- password_reset: boolean;
+ created_at: any;
+ id: number;
+ name_first: string;
+ name_last: string;
+ username: string;
+ role: string;
+ email: string;
+ password_reset: boolean;
}
export type PageProps<
- T extends Record = Record,
+ T extends Record = Record
> = T & {
- auth: {
- user: User;
- };
+ auth: {
+ user: User;
+ };
};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6f6e48b0..1e44f6ae 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,103 +1,103 @@
export default {
- content: ["./src/**/*.tsx"],
+ content: ['./src/**/*.tsx'],
- daisyui: {
- themes: [
- {
- light: {
- primary: "#14b8a6",
- secondary: "#2dd4bf",
- accent: "#d97706",
- neutral: "#4d5360",
- "base-100": "#f3f4f6",
- info: "#0ea5e9",
- success: "#22c55e",
- warning: "#e97356",
- error: "#d95566",
+ daisyui: {
+ themes: [
+ {
+ light: {
+ primary: '#14b8a6',
+ secondary: '#2dd4bf',
+ accent: '#d97706',
+ neutral: '#4d5360',
+ 'base-100': '#f3f4f6',
+ info: '#0ea5e9',
+ success: '#22c55e',
+ warning: '#e97356',
+ error: '#d95566',
- "--teal-1": "#D7F4F1",
- "--teal-2": "#B0DFDA",
- "--teal-3": "#18ABA0",
- "--teal-4": "#005952",
- "--teal-5": "#002E2A",
- "--base-teal": "#FFFFFF",
- "--background": "#F9FBFB",
- "--inner-background": "#FFFFFF",
- "--dark-yellow": "#EA9B00",
- "--primary-yellow": "#FDC601",
- "--pale-yellow": "#18ABA0",
- "--grey-1": "#ECECEC",
- "--grey-2": "#CCCCCC",
- "--grey-3": "#999999",
- "--grey-4": "#737373",
- "--body-text": "#222222",
- "--header-text": "#121212",
- "--fallback-b1": "#F9FBFB",
- },
- dark: {
- primary: "#14b8a6",
- secondary: "#2dd4bf",
- accent: "#ebaf24",
- neutral: "#7d8390",
- "base-100": "#1f2937",
- info: "#0ea5e9",
- success: "#22c55e",
- warning: "#e97356",
- error: "#d95566",
+ '--teal-1': '#D7F4F1',
+ '--teal-2': '#B0DFDA',
+ '--teal-3': '#18ABA0',
+ '--teal-4': '#005952',
+ '--teal-5': '#002E2A',
+ '--base-teal': '#FFFFFF',
+ '--background': '#F9FBFB',
+ '--inner-background': '#FFFFFF',
+ '--dark-yellow': '#EA9B00',
+ '--primary-yellow': '#FDC601',
+ '--pale-yellow': '#18ABA0',
+ '--grey-1': '#ECECEC',
+ '--grey-2': '#CCCCCC',
+ '--grey-3': '#999999',
+ '--grey-4': '#737373',
+ '--body-text': '#222222',
+ '--header-text': '#121212',
+ '--fallback-b1': '#F9FBFB'
+ },
+ dark: {
+ primary: '#14b8a6',
+ secondary: '#2dd4bf',
+ accent: '#ebaf24',
+ neutral: '#7d8390',
+ 'base-100': '#1f2937',
+ info: '#0ea5e9',
+ success: '#22c55e',
+ warning: '#e97356',
+ error: '#d95566',
- "--teal-1": "#11554E",
- "--teal-2": "#13746C",
- "--teal-3": "#14958A",
- "--teal-4": "#61BAB2",
- "--teal-5": "#B0DFDA",
- "--base-teal": "#103531",
- "--background": "#0F2926",
- "--inner-background": "#1A3F3B",
- "--dark-yellow": "#EA9B00",
- "--primary-yellow": "#FDC601",
- "--pale-yellow": "#18ABA0",
- "--grey-1": "#737373",
- "--grey-2": "#999999",
- "--grey-3": "#CCCCCC",
- "--grey-4": "#ECECEC",
- "--body-text": "#EEEEEE",
- "--header-text": "#CCCCCC",
- "--fallback-b1": "#0F2926",
- },
- },
- ],
- },
+ '--teal-1': '#11554E',
+ '--teal-2': '#13746C',
+ '--teal-3': '#14958A',
+ '--teal-4': '#61BAB2',
+ '--teal-5': '#B0DFDA',
+ '--base-teal': '#103531',
+ '--background': '#0F2926',
+ '--inner-background': '#1A3F3B',
+ '--dark-yellow': '#EA9B00',
+ '--primary-yellow': '#FDC601',
+ '--pale-yellow': '#18ABA0',
+ '--grey-1': '#737373',
+ '--grey-2': '#999999',
+ '--grey-3': '#CCCCCC',
+ '--grey-4': '#ECECEC',
+ '--body-text': '#EEEEEE',
+ '--header-text': '#CCCCCC',
+ '--fallback-b1': '#0F2926'
+ }
+ }
+ ]
+ },
- theme: {
- extend: {
- fontFamily: {
- lexend: ["Lexend", "sans-serif"],
- },
- colors: {
- "teal-1": "var(--teal-1)",
- "teal-2": "var(--teal-2)",
- "teal-3": "var(--teal-3)",
- "teal-4": "var(--teal-4)",
- "teal-5": "var(--teal-5)",
- "base-teal": "var(--base-teal)",
- background: "var(--background)",
- "inner-background": "var(--inner-background)",
- "dark-yellow": "var(--dark-yellow)",
- "primary-yellow": "var(--primary-yellow)",
- "pale-yellow": "var(--pale-yellow)",
- "grey-1": "var(--grey-1)",
- "grey-2": "var(--grey-2)",
- "grey-3": "var(--grey-3)",
- "grey-4": "var(--grey-4)",
- "body-text": "var(--body-text)",
- "header-text": "var(--header-text)",
- },
+ theme: {
+ extend: {
+ fontFamily: {
+ lexend: ['Lexend', 'sans-serif']
+ },
+ colors: {
+ 'teal-1': 'var(--teal-1)',
+ 'teal-2': 'var(--teal-2)',
+ 'teal-3': 'var(--teal-3)',
+ 'teal-4': 'var(--teal-4)',
+ 'teal-5': 'var(--teal-5)',
+ 'base-teal': 'var(--base-teal)',
+ background: 'var(--background)',
+ 'inner-background': 'var(--inner-background)',
+ 'dark-yellow': 'var(--dark-yellow)',
+ 'primary-yellow': 'var(--primary-yellow)',
+ 'pale-yellow': 'var(--pale-yellow)',
+ 'grey-1': 'var(--grey-1)',
+ 'grey-2': 'var(--grey-2)',
+ 'grey-3': 'var(--grey-3)',
+ 'grey-4': 'var(--grey-4)',
+ 'body-text': 'var(--body-text)',
+ 'header-text': 'var(--header-text)'
+ }
+ }
},
- },
- plugins: [
- require("@tailwindcss/forms"),
- require("@tailwindcss/typography"),
- require("daisyui"),
- ],
+ plugins: [
+ require('@tailwindcss/forms'),
+ require('@tailwindcss/typography'),
+ require('daisyui')
+ ]
};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index f9c684b9..9ec261fd 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,26 +1,26 @@
{
- "compilerOptions": {
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
- "module": "ESNext",
- "skipLibCheck": true,
- "baseUrl": ".",
- "paths": {
- "@": ["src"],
- "@/*": ["src/*"]
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "baseUrl": ".",
+ "paths": {
+ "@": ["src"],
+ "@/*": ["src/*"]
+ },
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
},
- /* Bundler mode */
- "moduleResolution": "bundler",
- "allowImportingTsExtensions": true,
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx",
- /* Linting */
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
- },
- "include": ["src/**/*"]
+ "include": ["src/**/*"]
}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d755054e..afcdb09e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,27 +1,27 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "path";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
- resolve: {
- alias: {
- "@": path.resolve(__dirname, "src"),
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, 'src')
+ }
},
- },
- server: {
- host: "0.0.0.0",
- port: 5173,
- proxy: {
- "/api": {
- target: "http://127.0.0.1",
- changeOrigin: true,
- },
- "/self-service": {
- target: "http://127.0.0.1",
- changeOrigin: true,
- },
- },
- },
+ server: {
+ host: '0.0.0.0',
+ port: 5173,
+ proxy: {
+ '/api': {
+ target: 'http://127.0.0.1',
+ changeOrigin: true
+ },
+ '/self-service': {
+ target: 'http://127.0.0.1',
+ changeOrigin: true
+ }
+ }
+ }
});
+
-
+
+
+
+ -
+ {!isLoggedIn ? (
+
- + + Log in + + + ) : ( +
- + Dashboard + + )} +
-
- );
+ );
}
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index 1f24c583..fe2a942c 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -1,102 +1,104 @@
-import "@/bootstrap";
-import "@/css/app.css";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import Welcome from "@/Pages/Welcome";
-import Dashboard from "@/Pages/Dashboard";
-import Login from "@/Pages/Auth/Login";
-import Users from "@/Pages/Users";
-import UserActivity from "@/Pages/UserActivity";
-import ResetPassword from "@/Pages/Auth/ResetPassword";
-import ProviderPlatformManagement from "./Pages/ProviderPlatformManagement";
-import { AuthProvider } from "./AuthContext";
-import Consent from "./Pages/Auth/Consent";
-import MyCourses from "./Pages/MyCourses";
-import MyProgress from "./Pages/MyProgress";
-import CourseCatalog from "./Pages/CourseCatalog";
-import ProviderUserManagement from "./Pages/ProviderUserManagement";
-import Error from "./Pages/Error";
-import ResourcesManagement from "./Pages/ResourcesManagement";
+import '@/bootstrap';
+import '@/css/app.css';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import Welcome from '@/Pages/Welcome';
+import Dashboard from '@/Pages/Dashboard';
+import Login from '@/Pages/Auth/Login';
+import Users from '@/Pages/Users';
+import UserActivity from '@/Pages/UserActivity';
+import ResetPassword from '@/Pages/Auth/ResetPassword';
+import ProviderPlatformManagement from './Pages/ProviderPlatformManagement';
+import { AuthProvider } from './AuthContext';
+import Consent from './Pages/Auth/Consent';
+import MyCourses from './Pages/MyCourses';
+import MyProgress from './Pages/MyProgress';
+import CourseCatalog from './Pages/CourseCatalog';
+import ProviderUserManagement from './Pages/ProviderUserManagement';
+import Error from './Pages/Error';
+import ResourcesManagement from './Pages/ResourcesManagement';
function WithAuth({ children }) {
- return
-
- Built from the inside out...
+
+
-
+
Built from the inside out...
-- Our mission is to make education accessible to all justice-impacted - people, and to ensure that their educational progress is recorded - and recognized by institutions allowing for a faster and more - equitable re-entry process. -
++ Our mission is to make education accessible to all + justice-impacted people, and to ensure that their + educational progress is recorded and recognized by + institutions allowing for a faster and more equitable + re-entry process. +
-
- 
-
- Version 1 of UnlockEd was built inside without the help of the
- internet.
-
-
+
+
+
+ Version 1 of UnlockEd was built inside without the
+ help of the internet.
+
+
- -
-
-
- - --- --- Young Beginnings -- Co-Founders Jessica Hicklin and Chris Santillan met at Potosi - Correctional Center before both of their 18th birthdays. They - were sentenced to life without parole and told they would die - behind bars. -
-
- -
-
-- --- --- Education Against the Odds -- Despite residing in a facility without access to formal - education for over a quarter of a century, they were determined - to make a positive impact upon their own lives and upon those - with whom they lived and worked with in their community. They - both maximized their circumstances, spending years tutoring - others to pass their GED/Hi-Set exams and organizing victim - empathy and anger management courses for the community. -
-
- -
-
-- --- --- Coding for Change -- With limited resources, Jessica and Chris both taught themselves - how to code without the internet. They dreamed of a day when - they could create a solution for ways to track rehabilitation - and educational programs on the inside. -
-
- -
-
-- --- --- Establishing Unlocked Labs -- Their lives took a turn when a Supreme Court declared life - sentences for juveniles unconstitutional. In 2017, Jessica and - Chris shared their aspirations of reimagining education within - the correctional system with Haley Shoaf. Released in early - 2022, they teamed up with Haley, who helped them expand upon - their vision, to form Unlocked Labs, a non-profit dedicated to - consulting and developing products addressing challenges within - the justice system. -
-
- -
-
-- --- --- UnlockED: A Vision Realized +- Teaming up with external partners, they developed UnlockEd, a - non-profit, open source education access and program management - system providing free education to incarcerated individuals - across the country, fulfilling a long time dream, and bringing - the project full circle. --
+
-
+ + +++ +++ Young Beginnings ++ Co-Founders Jessica Hicklin and Chris Santillan + met at Potosi Correctional Center before both of + their 18th birthdays. They were sentenced to + life without parole and told they would die + behind bars. +
+
+ -
+
++ +++ +++ Education Against the Odds ++ Despite residing in a facility without access to + formal education for over a quarter of a + century, they were determined to make a positive + impact upon their own lives and upon those with + whom they lived and worked with in their + community. They both maximized their + circumstances, spending years tutoring others to + pass their GED/Hi-Set exams and organizing + victim empathy and anger management courses for + the community. +
+
+ -
+
++ +++ +++ Coding for Change ++ With limited resources, Jessica and Chris both + taught themselves how to code without the + internet. They dreamed of a day when they could + create a solution for ways to track + rehabilitation and educational programs on the + inside. +
+
+ -
+
++ +++ +++ Establishing Unlocked Labs ++ Their lives took a turn when a Supreme Court + declared life sentences for juveniles + unconstitutional. In 2017, Jessica and Chris + shared their aspirations of reimagining + education within the correctional system with + Haley Shoaf. Released in early 2022, they teamed + up with Haley, who helped them expand upon their + vision, to form Unlocked Labs, a non-profit + dedicated to consulting and developing products + addressing challenges within the justice system. +
+
+ -
+
++ +++ +++ UnlockED: A Vision Realized ++ Teaming up with external partners, they + developed UnlockEd, a non-profit, open source + education access and program management system + providing free education to incarcerated + individuals across the country, fulfilling a + long time dream, and bringing the project full + circle. +
+
- -
+