feat: settings page (#260)
* feat: setup settings page boilerplate * feat: split view into halves * feat: add preview for Customization Options section * feat: add OptionStore logic and LD icon * feat: add courseStatusChips functionality * feat: migrate experimental settings to proper settings * feat: center Preview children and add className override * feat: add GitHub stats * feat: open GitHub user profile onclick * feat: get user GitHub stats * feat: refactor into useGitHubStats hook * feat: toggle GitHub stats when the user presses the 'S' key * chore: update title * fix: remove extra file * feat: refactor and add DialogProvider * fix: import * test: this commit has issues * fix: no schedule bug * fix: longhorn developers icon not rendering in prod builds * feat(pr-review): fix UI and comment out experimental code * chore: run lint and prettier * feat: add responsive design * feat: use @octokit/rest and fix GitHub stats
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
|
||||
import { Status } from '@shared/types/Course';
|
||||
import { enableCourseRefreshing, enableCourseStatusChips } from '@shared/util/experimental';
|
||||
import { Button } from '@views/components/common/Button';
|
||||
import CourseStatus from '@views/components/common/CourseStatus';
|
||||
import Divider from '@views/components/common/Divider';
|
||||
@@ -9,7 +9,7 @@ import Text from '@views/components/common/Text/Text';
|
||||
import useSchedules from '@views/hooks/useSchedules';
|
||||
import { getUpdatedAtDateTimeString } from '@views/lib/getUpdatedAtDateTimeString';
|
||||
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import MenuIcon from '~icons/material-symbols/menu';
|
||||
import RefreshIcon from '~icons/material-symbols/refresh';
|
||||
@@ -32,8 +32,33 @@ interface CalendarHeaderProps {
|
||||
* @returns The JSX element representing the calendar header.
|
||||
*/
|
||||
export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps): JSX.Element {
|
||||
const [enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
|
||||
const [enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
|
||||
|
||||
const [activeSchedule] = useSchedules();
|
||||
|
||||
useEffect(() => {
|
||||
initSettings().then(({ enableCourseStatusChips, enableDataRefreshing }) => {
|
||||
setEnableCourseStatusChips(enableCourseStatusChips);
|
||||
setEnableDataRefreshing(enableDataRefreshing);
|
||||
});
|
||||
|
||||
const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => {
|
||||
setEnableCourseStatusChips(newValue);
|
||||
// console.log('enableCourseStatusChips', newValue);
|
||||
});
|
||||
|
||||
const l2 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
|
||||
setEnableDataRefreshing(newValue);
|
||||
// console.log('enableDataRefreshing', newValue);
|
||||
});
|
||||
|
||||
return () => {
|
||||
OptionsStore.removeListener(l1);
|
||||
OptionsStore.removeListener(l2);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-5 overflow-x-auto overflow-y-hidden border-b border-ut-offwhite px-7 py-4 md:overflow-x-hidden'>
|
||||
<Button
|
||||
@@ -51,7 +76,7 @@ export default function CalendarHeader({ onSidebarToggle }: CalendarHeaderProps)
|
||||
totalHours={activeSchedule.hours}
|
||||
totalCourses={activeSchedule.courses.length}
|
||||
/>
|
||||
{enableCourseRefreshing && (
|
||||
{enableDataRefreshing && (
|
||||
<div className='flex items-center gap-1 screenshot:hidden'>
|
||||
<Text variant='mini' className='text-nowrap text-ut-gray font-normal!'>
|
||||
DATA LAST UPDATED: {getUpdatedAtDateTimeString(activeSchedule.updatedAt)}
|
||||
|
||||
Reference in New Issue
Block a user