Skip to content

Commit

Permalink
Merge pull request #614 from asuc-octo/no-classes
Browse files Browse the repository at this point in the history
Refactor toward router v6 and FCs
  • Loading branch information
mathhulk authored Sep 26, 2023
2 parents e8ea2a8 + 5430efd commit ddc5aba
Show file tree
Hide file tree
Showing 68 changed files with 2,017 additions and 2,502 deletions.
4 changes: 1 addition & 3 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@
"react-loading-skeleton": "^3.1.1",
"react-markdown": "^8.0.5",
"react-redux": "^7.2.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-router-dom": "^6.15.0",
"react-select": "^5.7.2",
"react-tooltip": "^5.7.2",
"react-window": "^1.8.5",
Expand All @@ -61,7 +60,6 @@
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5",
"@types/react-select": "^3.0.27",
"@types/react-window": "^1.8.2",
"@types/recharts": "^1.8.15",
Expand Down
142 changes: 60 additions & 82 deletions frontend/src/Routes.tsx
Original file line number Diff line number Diff line change
@@ -1,90 +1,68 @@
/*eslint max-len: ["error", { "code": 180 }]*/
import { lazy, Suspense } from 'react';
import { Switch, Route, RouteProps, Redirect } from 'react-router-dom';
import BTLoader from 'components/Common/BTLoader';
import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';

import Catalog from './app/Catalog';
import Landing from './views/Landing';
import Error from './views/Error/Error';
import Error from './views/Error';
import Layout from 'components/Common/Layout';

const Grades = lazy(() => import('./views/Grades/Grades'));
const Enrollment = lazy(() => import('./views/Enrollment/Enrollment'));
const About = lazy(() => import('./views/About'));
const Releases = lazy(() => import('./views/Releases/Releases'));
const Faq = lazy(() => import('./views/Faq'));
const Profile = lazy(() => import('./views/Profile/Profile'));
const Login = lazy(() => import('./views/Login/Login'));
const Logout = lazy(() => import('./views/Profile/Logout'));
const SchedulerOnboard = lazy(() => import('./views/Scheduler/SchedulerOnboard'));
const LocalScheduler = lazy(() => import('./views/Scheduler/LocalSchedulerPage'));
const RemoteScheduler = lazy(() => import('./views/Scheduler/RemoteSchedulerPage'));
const ViewSchedule = lazy(() => import('./views/Scheduler/ViewSchedule'));
const PrivacyPolicy = lazy(() => import('./views/Policies/PrivacyPolicy'));
const TermsOfService = lazy(() => import('./views/Policies/TermsOfService'));
const RedirectLink = lazy(() => import('./views/RedirectLink'));
const Apply = lazy(() => import('./views/Apply'));
const Grades = () => import('./app/Grades');
const Enrollment = () => import('./app/Enrollment');
const About = () => import('./views/About');
const Releases = () => import('./views/Releases');
const Faq = () => import('./views/Faq');
const Profile = () => import('./views/Profile');
const Login = () => import('./views/Login');
const Logout = () => import('./views/Logout');
const SchedulerOnboard = () => import('./app/Scheduler/SchedulerOnboard');
const LocalScheduler = () => import('./app/Scheduler/LocalSchedulerPage');
const RemoteScheduler = () => import('./app/Scheduler/RemoteSchedulerPage');
const ViewSchedule = () => import('./app/Scheduler/ViewSchedule');
const PrivacyPolicy = () => import('./views/PrivacyPolicy');
const TermsOfService = () => import('./views/TermsOfService');
const RedirectLink = () => import('./views/RedirectLink');
const Apply = () => import('./views/Apply');

const routes: Array<RouteProps> = [
{ path: '/landing', component: Landing },
{ path: '/catalog', component: Catalog, exact: false },
{ path: '/grades', component: Grades, exact: false },
{ path: '/enrollment', component: Enrollment, exact: false },
{ path: '/about', component: About },
{ path: '/releases', component: Releases },
{ path: '/faq', component: Faq },
{ path: '/profile', component: Profile },
{ path: '/oauth2callback', component: Login },
{ path: '/logout', component: Logout },
{ path: '/scheduler', component: SchedulerOnboard },
{ path: '/scheduler/new', component: LocalScheduler },
{ path: '/scheduler/:scheduleId', component: RemoteScheduler },
{ path: '/schedule/:scheduleId', component: ViewSchedule },
{ path: '/error', component: Error },
{ path: '/legal/privacy', component: PrivacyPolicy },
{ path: '/legal/terms', component: TermsOfService },
{ path: '/redirect', component: RedirectLink, exact: false },
{ path: '/apply', component: Apply, sensitive: false },
];
function ScheduleRedirect() {
const { scheduleId } = useParams();
return <Navigate to={`/schedule/${scheduleId}`} replace />;
}

const Routes = () => (
<Suspense
fallback={
<div className="viewport-app">
<BTLoader fill />
</div>
}
>
<Switch>
<Redirect from="/" to="/landing" exact />
<Redirect from="/s/:scheduleId" to="/schedule/:scheduleId" />
const router = createBrowserRouter([
{
element: <Layout />,
ErrorBoundary: Error,
children: [
{ path: '/', index: true, Component: Landing },
{ path: '/landing', element: <Navigate to="/" replace /> },
{ path: '/s/:scheduleId', Component: ScheduleRedirect },
{ path: '/grades/*', lazy: Grades },
{ path: '/enrollment/*', lazy: Enrollment },
{ path: '/about', lazy: About },
{ path: '/releases', lazy: Releases },
{ path: '/faq', lazy: Faq },
{ path: '/profile', lazy: Profile },
{ path: '/oauth2callback', lazy: Login },
{ path: '/logout', lazy: Logout },
{ path: '/scheduler', lazy: SchedulerOnboard },
{ path: '/scheduler/:scheduleId', lazy: RemoteScheduler },
{ path: '/schedule/:scheduleId', lazy: ViewSchedule },
{ path: '/error', Component: Error },
{ path: '/legal/privacy', lazy: PrivacyPolicy },
{ path: '/legal/terms', lazy: TermsOfService },
{ path: '/redirect', lazy: RedirectLink },
{ path: '/apply', lazy: Apply }
]
},
{
element: <Layout footer={false} />,
ErrorBoundary: Error,
children: [
{ path: '/catalog/:semester?/:abbreviation?/:courseNumber?', Component: Catalog },
{ path: '/scheduler/new', lazy: LocalScheduler }
]
}
]);

<Route path="/catalog/:semester?/:abbreviation?/:courseNumber?" exact={false}>
<Layout noFooter>
<Catalog />
</Layout>
</Route>

<Route>
<Layout>
<Switch>
{routes.map((route) => (
<Route
key={route.path as string}
path={route.path}
component={route.component}
exact={route.exact ?? true} // force exact=true unless specified false
sensitive={route.sensitive ?? true} // force sensitive=true unless specified false
/>
))}
<Route component={Error} />
</Switch>
</Layout>
</Route>

<Route component={Error} />
</Switch>
</Suspense>
);

export default Routes;
export default function Routes() {
return <RouterProvider router={router} />;
}
2 changes: 1 addition & 1 deletion frontend/src/app/Catalog/Catalog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import CatalogFilters from './CatalogFilters';
import CatalogList from './CatalogList';
import CatalogView from './CatalogView';
import { CourseFragment } from 'graphql';
import { useLocation } from 'react-router';
import { useLocation } from 'react-router-dom';

const { SORT_OPTIONS, INITIAL_FILTERS } = catalogService;

Expand Down
14 changes: 7 additions & 7 deletions frontend/src/app/Catalog/CatalogFilters/CatalogFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { CurrentFilters, FilterOption, SortOption, CatalogFilterKeys, CatalogSlu

import { useGetFiltersQuery } from 'graphql';
import BTLoader from 'components/Common/BTLoader';
import { useHistory, useParams } from 'react-router';
import { useNavigate, useParams } from 'react-router-dom';

import styles from './CatalogFilters.module.scss';
import { SortDown, SortUp } from 'iconoir-react';
Expand Down Expand Up @@ -52,7 +52,7 @@ const CatalogFilters = (props: CatalogFilterProps) => {
const { data, loading, error } = useGetFiltersQuery();
const [isOpen, setOpen] = useState(false);
const filters = useMemo(() => catalogService.processFilterData(data), [data]);
const history = useHistory();
const navigate = useNavigate();
const slug = useParams<CatalogSlug>();
const modalRef = useRef<HTMLDivElement>(null);

Expand Down Expand Up @@ -99,9 +99,9 @@ const CatalogFilters = (props: CatalogFilterProps) => {
semester
});

history.push({ pathname: `/catalog/${semester.value.name}` });
navigate({ pathname: `/catalog/${semester.value.name}` });
}
}, [filterList, history, setCurrentFilters, setSearchQuery, setSortQuery]);
}, [filterList, navigate, setCurrentFilters, setSearchQuery, setSortQuery]);

const handleFilterChange = (
newValue: FilterOption | readonly FilterOption[] | null,
Expand All @@ -115,7 +115,7 @@ const CatalogFilters = (props: CatalogFilterProps) => {

// Update the url slug if semester filter changes.
if (key === 'semester') {
history.push({
navigate({
pathname: `/catalog/${(newValue as FilterOption)?.value?.name}`
.concat(slug?.abbreviation ? `/${slug.abbreviation}` : '')
.concat(slug?.courseNumber ? `/${slug.courseNumber}` : ''),
Expand All @@ -131,7 +131,7 @@ const CatalogFilters = (props: CatalogFilterProps) => {
style={{ border: 'none', width: '100%' }}
value={searchQuery}
onChange={(e) => {
history.replace({ pathname: location.pathname, search: `q=${e.target.value}` });
navigate({ pathname: location.pathname, search: `q=${e.target.value}` });
setSearchQuery(e.target.value);
}}
type="search"
Expand All @@ -153,7 +153,7 @@ const CatalogFilters = (props: CatalogFilterProps) => {
<BTInput
value={searchQuery}
onChange={(e) => {
history.replace({ pathname: location.pathname, search: `q=${e.target.value}` });
navigate({ pathname: location.pathname, search: `q=${e.target.value}` });
setSearchQuery(e.target.value);
}}
type="search"
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/Catalog/CatalogList/CatalogList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CurrentFilters, FilterOption, SortOption } from '../types';
import { Dispatch, memo, SetStateAction, useEffect, useMemo } from 'react';
import useDimensions from 'react-cool-dimensions';
import styles from './CatalogList.module.scss';
import { useHistory } from 'react-router';
import { useNavigate } from 'react-router-dom';
import CatalogService from '../service';
import { sortByAttribute } from 'lib/courses/sorting';

Expand All @@ -27,7 +27,7 @@ const CatalogList = (props: CatalogListProps) => {
const { currentFilters, setCurrentCourse, selectedId, searchQuery, sortQuery, sortDir } = props;
const { observe, height } = useDimensions();
const [fetchCatalogList, { data, loading, called }] = useGetCoursesForFilterLazyQuery({});
const history = useHistory();
const navigate = useNavigate();

const courses = useMemo(() => {
if (!data)
Expand Down Expand Up @@ -66,7 +66,7 @@ const CatalogList = (props: CatalogListProps) => {

const handleCourseSelect = (course: CourseFragment) => {
setCurrentCourse(course);
history.push({
navigate({
pathname: `/catalog/${(currentFilters.semester as FilterOption)?.value?.name}/${
course.abbreviation
}/${course.courseNumber}`,
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/app/Catalog/CatalogView/CatalogView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import catalogService from '../service';
import { applyIndicatorPercent, applyIndicatorGrade, formatUnits } from 'utils/utils';
import { CourseFragment, PlaylistType, useGetCourseForNameLazyQuery } from 'graphql';
import { CurrentFilters } from 'app/Catalog/types';
import { useHistory, useParams } from 'react-router';
import { useNavigate, useParams } from 'react-router-dom';
import { sortSections } from 'utils/sections/sort';
import Skeleton from 'react-loading-skeleton';
import ReadMore from './ReadMore';
Expand All @@ -35,7 +35,7 @@ const CatalogView = (props: CatalogViewProps) => {

const [course, setCourse] = useState<CourseFragment | null>(coursePreview);
const [isOpen, setOpen] = useState(false);
const history = useHistory();
const navigate = useNavigate();

const legacyId = useSelector(
(state: any) =>
Expand Down Expand Up @@ -137,7 +137,7 @@ const CatalogView = (props: CatalogViewProps) => {
onClick={() => {
setCurrentCourse(null);
setCourse(null);
history.replace(`/catalog/${semester}`);
navigate(`/catalog/${semester}`, { replace: true });
}}
>
<BackArrow />
Expand Down Expand Up @@ -231,7 +231,7 @@ const CatalogView = (props: CatalogViewProps) => {
className={styles.pill}
key={req.id}
onClick={() =>
history.push(`/catalog/${req.name}/${course.abbreviation}/${course.courseNumber}`)
navigate(`/catalog/${req.name}/${course.abbreviation}/${course.courseNumber}`)
}
>
{req.name}
Expand Down
Loading

0 comments on commit ddc5aba

Please sign in to comment.