feat: LHD birthday (#717)
* chore: add tsparticles/react * fix: imports and lint issues * fix: imports and format * feat: refactor settings and add LHD birthday celebration * chore: lint and format
This commit is contained in:
Diego Perez
GitHub
@@ -27,7 +27,7 @@ export function CalendarSchedules() {
|
||||
|
||||
return (
|
||||
<div className='min-w-full w-0 flex flex-col items-center gap-y-spacing-2'>
|
||||
<div className='m0 w-full flex justify-between items-center'>
|
||||
<div className='m0 w-full flex items-center justify-between'>
|
||||
<Text variant='h3' className='text-nowrap text-theme-black'>
|
||||
MY SCHEDULES
|
||||
</Text>
|
||||
|
||||
197
src/views/components/settings/AdvancedSettings.tsx
Normal file
197
src/views/components/settings/AdvancedSettings.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import { Trash } from '@phosphor-icons/react';
|
||||
import { OptionsStore } from '@shared/storage/OptionsStore';
|
||||
import MIMEType from '@shared/types/MIMEType';
|
||||
import type { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import { handleExportJson } from '@views/components/calendar/utils';
|
||||
import { Button } from '@views/components/common/Button';
|
||||
import Divider from '@views/components/common/Divider';
|
||||
import SwitchButton from '@views/components/common/SwitchButton';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import FileUpload from '../common/FileUpload';
|
||||
import { DISPLAY_PREVIEWS, PREVIEW_SECTION_DIV_CLASSNAME } from './constants';
|
||||
import Preview from './Preview';
|
||||
|
||||
interface AdvancedSettingsProps {
|
||||
highlightConflicts: boolean;
|
||||
setHighlightConflicts: (value: boolean) => void;
|
||||
loadAllCourses: boolean;
|
||||
setLoadAllCourses: (value: boolean) => void;
|
||||
increaseScheduleLimit: boolean;
|
||||
setIncreaseScheduleLimit: (value: boolean) => void;
|
||||
calendarNewTab: boolean;
|
||||
setCalendarNewTab: (value: boolean) => void;
|
||||
activeSchedule: UserSchedule;
|
||||
handleEraseAll: () => void;
|
||||
handleImportClick: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Settings section component for advanced settings
|
||||
*/
|
||||
export const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
|
||||
highlightConflicts,
|
||||
setHighlightConflicts,
|
||||
loadAllCourses,
|
||||
setLoadAllCourses,
|
||||
increaseScheduleLimit,
|
||||
setIncreaseScheduleLimit,
|
||||
calendarNewTab,
|
||||
setCalendarNewTab,
|
||||
activeSchedule,
|
||||
handleEraseAll,
|
||||
handleImportClick,
|
||||
}) => (
|
||||
<section className='mb-8'>
|
||||
<h2 className='mb-4 text-xl text-ut-black font-semibold'>ADVANCED SETTINGS</h2>
|
||||
<div className='flex space-x-4'>
|
||||
<div className={PREVIEW_SECTION_DIV_CLASSNAME}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Export Current Schedule
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>Backup your active schedule to a portable file</p>
|
||||
</div>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='ut-burntorange'
|
||||
onClick={() => handleExportJson(activeSchedule.id)}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Import Schedule
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>Import from a schedule file</p>
|
||||
</div>
|
||||
<FileUpload
|
||||
variant='filled'
|
||||
color='ut-burntorange'
|
||||
onChange={handleImportClick}
|
||||
accept={MIMEType.JSON}
|
||||
>
|
||||
Import Schedule
|
||||
</FileUpload>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Course Conflict Highlight
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Adds a red strikethrough to courses that have conflicting times.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={highlightConflicts}
|
||||
onChange={() => {
|
||||
setHighlightConflicts(!highlightConflicts);
|
||||
OptionsStore.set('enableHighlightConflicts', !highlightConflicts);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Load All Courses in Course Schedule
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Loads all courses in the Course Schedule site by scrolling, instead of using next/prev page
|
||||
buttons.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={loadAllCourses}
|
||||
onChange={() => {
|
||||
setLoadAllCourses(!loadAllCourses);
|
||||
OptionsStore.set('enableScrollToLoad', !loadAllCourses);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Allow more than 10 schedules
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Allow bypassing the 10-schedule limit. Intended for advisors or staff who need to create
|
||||
many schedules on behalf of students.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={increaseScheduleLimit}
|
||||
onChange={() => {
|
||||
setIncreaseScheduleLimit(!increaseScheduleLimit);
|
||||
OptionsStore.set('allowMoreSchedules', !increaseScheduleLimit);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Always Open Calendar in New Tab
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Always opens the calendar view in a new tab when navigating to the calendar page. May
|
||||
prevent issues where the calendar refuses to open.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={calendarNewTab}
|
||||
onChange={() => {
|
||||
setCalendarNewTab(!calendarNewTab);
|
||||
OptionsStore.set('alwaysOpenCalendarInNewTab', !calendarNewTab);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Reset All Data
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>Erases all schedules and courses you have.</p>
|
||||
</div>
|
||||
<Button variant='outline' color='theme-red' icon={Trash} onClick={handleEraseAll}>
|
||||
Erase All
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{DISPLAY_PREVIEWS && (
|
||||
<Preview>
|
||||
<Text
|
||||
variant='h2-course'
|
||||
className={clsx('text-center text-theme-red font-normal', {
|
||||
'line-through': highlightConflicts,
|
||||
})}
|
||||
>
|
||||
01234 MWF 10:00 AM - 11:00 AM UTC 1.234
|
||||
</Text>
|
||||
</Preview>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
54
src/views/components/settings/ContributorCard.tsx
Normal file
54
src/views/components/settings/ContributorCard.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
import React from 'react';
|
||||
|
||||
interface ContributorCardProps {
|
||||
name: string;
|
||||
githubUsername: string;
|
||||
roles: string[];
|
||||
stats?: {
|
||||
commits: number;
|
||||
linesAdded: number;
|
||||
linesDeleted: number;
|
||||
mergedPRs?: number;
|
||||
};
|
||||
showStats: boolean;
|
||||
includeMergedPRs: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* GitHub contributor card component
|
||||
*/
|
||||
export const ContributorCard: React.FC<ContributorCardProps> = ({
|
||||
name,
|
||||
githubUsername,
|
||||
roles,
|
||||
stats,
|
||||
showStats,
|
||||
includeMergedPRs,
|
||||
}) => (
|
||||
<div className='border border-gray-300 rounded bg-ut-gray/10 p-4'>
|
||||
<Text
|
||||
variant='p'
|
||||
className='text-ut-burntorange font-semibold hover:cursor-pointer'
|
||||
onClick={() => window.open(`https://github.com/${githubUsername}`, '_blank')}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
{roles.map(role => (
|
||||
<p key={`${githubUsername}-${role}`} className='text-sm text-gray-600'>
|
||||
{role}
|
||||
</p>
|
||||
))}
|
||||
{showStats && stats && (
|
||||
<div className='mt-2'>
|
||||
<p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
|
||||
{includeMergedPRs && stats.mergedPRs !== undefined && (
|
||||
<p className='text-xs'>Merged PRs: {stats.mergedPRs}</p>
|
||||
)}
|
||||
<p className='text-xs'>Commits: {stats.commits}</p>
|
||||
<p className='text-xs text-ut-green'>{stats.linesAdded}++</p>
|
||||
<p className='text-xs text-theme-red'>{stats.linesDeleted}--</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -1,115 +1,68 @@
|
||||
// import addCourse from '@pages/background/lib/addCourse';
|
||||
// Pages
|
||||
import { addCourseByURL } from '@pages/background/lib/addCourseByURL';
|
||||
import { deleteAllSchedules } from '@pages/background/lib/deleteSchedule';
|
||||
import importSchedule from '@pages/background/lib/importSchedule';
|
||||
import { CalendarDots, Trash } from '@phosphor-icons/react';
|
||||
import { CalendarDots } from '@phosphor-icons/react';
|
||||
// Shared
|
||||
import { background } from '@shared/messages';
|
||||
import { DevStore } from '@shared/storage/DevStore';
|
||||
import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
|
||||
import { CRX_PAGES } from '@shared/types/CRXPages';
|
||||
import MIMEType from '@shared/types/MIMEType';
|
||||
// import { addCourseByUrl } from '@shared/util/courseUtils';
|
||||
// import { getCourseColors } from '@shared/util/colors';
|
||||
// import CalendarCourseCell from '@views/components/calendar/CalendarCourseCell';
|
||||
import Particles from '@tsparticles/react';
|
||||
import { Button } from '@views/components/common/Button';
|
||||
import { usePrompt } from '@views/components/common/DialogProvider/DialogProvider';
|
||||
// Views
|
||||
import Divider from '@views/components/common/Divider';
|
||||
import { LargeLogo } from '@views/components/common/LogoIcon';
|
||||
// import PopupCourseBlock from '@views/components/common/PopupCourseBlock';
|
||||
import SwitchButton from '@views/components/common/SwitchButton';
|
||||
import Text from '@views/components/common/Text/Text';
|
||||
// Hooks
|
||||
import useChangelog from '@views/hooks/useChangelog';
|
||||
import useSchedules from '@views/hooks/useSchedules';
|
||||
// import { CourseCatalogScraper } from '@views/lib/CourseCatalogScraper';
|
||||
// import getCourseTableRows from '@views/lib/getCourseTableRows';
|
||||
import { GitHubStatsService, LONGHORN_DEVELOPERS_ADMINS, LONGHORN_DEVELOPERS_SWE } from '@views/lib/getGitHubStats';
|
||||
// import { SiteSupport } from '@views/lib/getSiteSupport';
|
||||
import clsx from 'clsx';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
// Misc
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
|
||||
// Icons
|
||||
import IconoirGitFork from '~icons/iconoir/git-fork';
|
||||
|
||||
import { handleExportJson } from '../calendar/utils';
|
||||
// import { ExampleCourse } from 'src/stories/components/ConflictsWithWarning.stories';;
|
||||
import FileUpload from '../common/FileUpload';
|
||||
import { useMigrationDialog } from '../common/MigrationDialog';
|
||||
// import RefreshIcon from '~icons/material-symbols/refresh';
|
||||
import { AdvancedSettings } from './AdvancedSettings';
|
||||
import { DEV_MODE_CLICK_TARGET, INCLUDE_MERGED_PRS, STATS_TOGGLE_KEY } from './constants';
|
||||
import { ContributorCard } from './ContributorCard';
|
||||
import DevMode from './DevMode';
|
||||
import Preview from './Preview';
|
||||
import { useBirthdayCelebration } from './useBirthdayCelebration';
|
||||
import { useDevMode } from './useDevMode';
|
||||
|
||||
const manifest = chrome.runtime.getManifest();
|
||||
|
||||
const gitHubStatsService = new GitHubStatsService();
|
||||
const includeMergedPRs = false;
|
||||
|
||||
const DISPLAY_PREVIEWS = false;
|
||||
const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
|
||||
|
||||
/**
|
||||
* Custom hook for enabling developer mode.
|
||||
*
|
||||
* @param targetCount - The target count to activate developer mode.
|
||||
* @returns A tuple containing a boolean indicating if developer mode is active and a function to increment the count.
|
||||
*/
|
||||
const useDevMode = (targetCount: number): [boolean, () => void] => {
|
||||
const [count, setCount] = useState(0);
|
||||
const [active, setActive] = useState(false);
|
||||
const [lastClick, setLastClick] = useState(0);
|
||||
|
||||
const incrementCount = useCallback(() => {
|
||||
const now = Date.now();
|
||||
if (now - lastClick < 500) {
|
||||
setCount(prevCount => {
|
||||
const newCount = prevCount + 1;
|
||||
if (newCount === targetCount) {
|
||||
setActive(true);
|
||||
}
|
||||
return newCount;
|
||||
});
|
||||
} else {
|
||||
setCount(1);
|
||||
}
|
||||
setLastClick(now);
|
||||
}, [lastClick, targetCount]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setCount(0), 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [count]);
|
||||
|
||||
return [active, incrementCount];
|
||||
};
|
||||
|
||||
/**
|
||||
* Component for managing user settings and preferences.
|
||||
* Main Settings Component for managing user settings and preferences.
|
||||
*
|
||||
* @returns The Settings component.
|
||||
*/
|
||||
export default function Settings(): JSX.Element {
|
||||
const [_enableCourseStatusChips, setEnableCourseStatusChips] = useState<boolean>(false);
|
||||
// const [_showTimeLocation, setShowTimeLocation] = useState<boolean>(false);
|
||||
const [highlightConflicts, setHighlightConflicts] = useState<boolean>(false);
|
||||
const [loadAllCourses, setLoadAllCourses] = useState<boolean>(false);
|
||||
const [_enableDataRefreshing, setEnableDataRefreshing] = useState<boolean>(false);
|
||||
const [calendarNewTab, setCalendarNewTab] = useState<boolean>(false);
|
||||
const [increaseScheduleLimit, setIncreaseScheduleLimit] = useState<boolean>(false);
|
||||
const gitHubStatsService = useMemo(() => new GitHubStatsService(), []);
|
||||
|
||||
const showMigrationDialog = useMigrationDialog();
|
||||
|
||||
// Toggle GitHub stats when the user presses the 'S' key
|
||||
const [showGitHubStats, setShowGitHubStats] = useState<boolean>(false);
|
||||
// State
|
||||
const [highlightConflicts, setHighlightConflicts] = useState(false);
|
||||
const [loadAllCourses, setLoadAllCourses] = useState(false);
|
||||
const [calendarNewTab, setCalendarNewTab] = useState(false);
|
||||
const [increaseScheduleLimit, setIncreaseScheduleLimit] = useState(false);
|
||||
const [showGitHubStats, setShowGitHubStats] = useState(false);
|
||||
const [githubStats, setGitHubStats] = useState<Awaited<
|
||||
ReturnType<typeof gitHubStatsService.fetchGitHubStats>
|
||||
> | null>(null);
|
||||
const [isDeveloper, setIsDeveloper] = useState(false);
|
||||
|
||||
const [activeSchedule] = useSchedules();
|
||||
// const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
|
||||
|
||||
const [isDeveloper, setIsDeveloper] = useState<boolean>(false);
|
||||
|
||||
const showDialog = usePrompt();
|
||||
const handleChangelogOnClick = useChangelog();
|
||||
const showMigrationDialog = useMigrationDialog();
|
||||
|
||||
const [devMode, toggleDevMode] = useDevMode(DEV_MODE_CLICK_TARGET);
|
||||
const { showParticles, particlesInit, particlesOptions, triggerCelebration, isBirthday } = useBirthdayCelebration();
|
||||
|
||||
// Initialize settings and listeners
|
||||
useEffect(() => {
|
||||
const fetchGitHubStats = async () => {
|
||||
try {
|
||||
@@ -121,19 +74,10 @@ export default function Settings(): JSX.Element {
|
||||
};
|
||||
|
||||
const initAndSetSettings = async () => {
|
||||
const {
|
||||
enableCourseStatusChips,
|
||||
enableHighlightConflicts,
|
||||
enableScrollToLoad,
|
||||
enableDataRefreshing,
|
||||
alwaysOpenCalendarInNewTab,
|
||||
allowMoreSchedules,
|
||||
} = await initSettings();
|
||||
setEnableCourseStatusChips(enableCourseStatusChips);
|
||||
// setShowTimeLocation(enableTimeAndLocationInPopup);
|
||||
const { enableHighlightConflicts, enableScrollToLoad, alwaysOpenCalendarInNewTab, allowMoreSchedules } =
|
||||
await initSettings();
|
||||
setHighlightConflicts(enableHighlightConflicts);
|
||||
setLoadAllCourses(enableScrollToLoad);
|
||||
setEnableDataRefreshing(enableDataRefreshing);
|
||||
setCalendarNewTab(alwaysOpenCalendarInNewTab);
|
||||
setIncreaseScheduleLimit(allowMoreSchedules);
|
||||
};
|
||||
@@ -143,79 +87,50 @@ export default function Settings(): JSX.Element {
|
||||
setIsDeveloper(isDev);
|
||||
};
|
||||
|
||||
const handleKeyPress = (event: KeyboardEvent) => {
|
||||
if (event.key === STATS_TOGGLE_KEY || event.key === STATS_TOGGLE_KEY.toUpperCase()) {
|
||||
setShowGitHubStats(prev => !prev);
|
||||
}
|
||||
};
|
||||
|
||||
// Listeners
|
||||
const ds_l1 = DevStore.listen('isDeveloper', async ({ newValue }) => {
|
||||
setIsDeveloper(newValue);
|
||||
});
|
||||
|
||||
const l1 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
|
||||
setHighlightConflicts(newValue);
|
||||
});
|
||||
|
||||
const l2 = OptionsStore.listen('enableScrollToLoad', async ({ newValue }) => {
|
||||
setLoadAllCourses(newValue);
|
||||
});
|
||||
|
||||
const l3 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
|
||||
setCalendarNewTab(newValue);
|
||||
});
|
||||
|
||||
const l4 = OptionsStore.listen('allowMoreSchedules', async ({ newValue }) => {
|
||||
setIncreaseScheduleLimit(newValue);
|
||||
});
|
||||
|
||||
window.addEventListener('keydown', handleKeyPress);
|
||||
|
||||
initDS();
|
||||
fetchGitHubStats();
|
||||
initAndSetSettings();
|
||||
|
||||
const handleKeyPress = (event: KeyboardEvent) => {
|
||||
if (event.key === 'S' || event.key === 's') {
|
||||
setShowGitHubStats(prev => !prev);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyPress);
|
||||
|
||||
// Listen for changes in the settings
|
||||
const l1 = OptionsStore.listen('enableCourseStatusChips', async ({ newValue }) => {
|
||||
setEnableCourseStatusChips(newValue);
|
||||
// console.log('enableCourseStatusChips', newValue);
|
||||
});
|
||||
|
||||
// const l2 = OptionsStore.listen('enableTimeAndLocationInPopup', async ({ newValue }) => {
|
||||
// setShowTimeLocation(newValue);
|
||||
// // console.log('enableTimeAndLocationInPopup', newValue);
|
||||
// });
|
||||
|
||||
const l2 = OptionsStore.listen('enableHighlightConflicts', async ({ newValue }) => {
|
||||
setHighlightConflicts(newValue);
|
||||
// console.log('enableHighlightConflicts', newValue);
|
||||
});
|
||||
|
||||
const l3 = OptionsStore.listen('enableScrollToLoad', async ({ newValue }) => {
|
||||
setLoadAllCourses(newValue);
|
||||
// console.log('enableScrollToLoad', newValue);
|
||||
});
|
||||
|
||||
const l4 = OptionsStore.listen('enableDataRefreshing', async ({ newValue }) => {
|
||||
setEnableDataRefreshing(newValue);
|
||||
// console.log('enableDataRefreshing', newValue);
|
||||
});
|
||||
|
||||
const l5 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
|
||||
setCalendarNewTab(newValue);
|
||||
// console.log('alwaysOpenCalendarInNewTab', newValue);
|
||||
});
|
||||
|
||||
const l6 = OptionsStore.listen('alwaysOpenCalendarInNewTab', async ({ newValue }) => {
|
||||
setCalendarNewTab(newValue);
|
||||
// console.log('alwaysOpenCalendarInNewTab', newValue);
|
||||
});
|
||||
|
||||
const l7 = OptionsStore.listen('allowMoreSchedules', async ({ newValue }) => {
|
||||
setIncreaseScheduleLimit(newValue);
|
||||
});
|
||||
|
||||
// Remove listeners when the component is unmounted
|
||||
return () => {
|
||||
OptionsStore.removeListener(l1);
|
||||
OptionsStore.removeListener(l2);
|
||||
OptionsStore.removeListener(l3);
|
||||
OptionsStore.removeListener(l4);
|
||||
OptionsStore.removeListener(l5);
|
||||
OptionsStore.removeListener(l6);
|
||||
OptionsStore.removeListener(l7);
|
||||
|
||||
DevStore.removeListener(ds_l1);
|
||||
|
||||
window.removeEventListener('keydown', handleKeyPress);
|
||||
};
|
||||
}, []);
|
||||
}, [gitHubStatsService]);
|
||||
|
||||
const handleEraseAll = () => {
|
||||
const handleEraseAll = useCallback(() => {
|
||||
showDialog({
|
||||
title: 'Erase All Course/Schedule Data',
|
||||
description: (
|
||||
@@ -242,9 +157,9 @@ export default function Settings(): JSX.Element {
|
||||
</Button>
|
||||
),
|
||||
});
|
||||
};
|
||||
}, [showDialog]);
|
||||
|
||||
const handleImportClick = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const handleImportClick = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
@@ -257,16 +172,30 @@ export default function Settings(): JSX.Element {
|
||||
console.error('Error importing schedule:', error);
|
||||
alert('Failed to import schedule. Make sure the file is a valid .json format.');
|
||||
}
|
||||
};
|
||||
// const handleAddCourseByLink = async () => {
|
||||
// // todo: Use a proper modal instead of a prompt
|
||||
// const link: string | null = prompt('Enter course link');
|
||||
// // Exit if the user cancels the prompt
|
||||
// if (link === null) return;
|
||||
// await addCourseByUrl(link, activeSchedule);
|
||||
// };
|
||||
}, []);
|
||||
|
||||
const [devMode, toggleDevMode] = useDevMode(10);
|
||||
const sortedContributors = useMemo(() => {
|
||||
if (!githubStats) return LONGHORN_DEVELOPERS_SWE;
|
||||
return [...LONGHORN_DEVELOPERS_SWE].sort(
|
||||
(a, b) =>
|
||||
(githubStats.userGitHubStats[b.githubUsername]?.commits ?? 0) -
|
||||
(githubStats.userGitHubStats[a.githubUsername]?.commits ?? 0)
|
||||
);
|
||||
}, [githubStats]);
|
||||
|
||||
const additionalContributors = useMemo(() => {
|
||||
if (!githubStats) return [];
|
||||
return Object.keys(githubStats.userGitHubStats)
|
||||
.filter(
|
||||
username =>
|
||||
!LONGHORN_DEVELOPERS_ADMINS.some(admin => admin.githubUsername === username) &&
|
||||
!LONGHORN_DEVELOPERS_SWE.some(swe => swe.githubUsername === username)
|
||||
)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(githubStats.userGitHubStats[b]?.commits ?? 0) - (githubStats.userGitHubStats[a]?.commits ?? 0)
|
||||
);
|
||||
}, [githubStats]);
|
||||
|
||||
if (devMode) {
|
||||
DevStore.set('isDeveloper', true);
|
||||
@@ -274,13 +203,32 @@ export default function Settings(): JSX.Element {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='relative'>
|
||||
{particlesInit && showParticles && (
|
||||
<Particles
|
||||
id='birthday-particles'
|
||||
options={particlesOptions}
|
||||
className='pointer-events-none absolute inset-0 z-50'
|
||||
/>
|
||||
)}
|
||||
|
||||
<header 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'>
|
||||
<LargeLogo />
|
||||
<Divider className='mx-2 self-center md:mx-4' size='2.5rem' orientation='vertical' />
|
||||
<Text variant='h1' className='flex-1 text-ut-burntorange normal-case!'>
|
||||
Settings and Credits
|
||||
</Text>
|
||||
<div className='flex flex-1 items-center gap-2'>
|
||||
<Text variant='h1' className='text-ut-burntorange normal-case'>
|
||||
Settings and Credits
|
||||
</Text>
|
||||
{isBirthday && (
|
||||
<span
|
||||
onClick={triggerCelebration}
|
||||
className='cursor-pointer px-4 text-sm text-ut-burntorange transition-transform hover:scale-110'
|
||||
title='Click to celebrate!'
|
||||
>
|
||||
🎉 Happy Birthday LHD! 🎉
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className='hidden flex-row items-center justify-end gap-6 screenshot:hidden lg:flex'>
|
||||
<Button variant='minimal' color='theme-black' onClick={handleChangelogOnClick}>
|
||||
<IconoirGitFork className='h-6 w-6 text-ut-gray' />
|
||||
@@ -301,238 +249,19 @@ export default function Settings(): JSX.Element {
|
||||
|
||||
<div className='p-6 lg:flex'>
|
||||
<div className='mr-4 lg:w-1/2 xl:w-xl'>
|
||||
{/* <section className='mb-8'>
|
||||
<h2 className='mb-4 text-xl text-ut-black font-semibold'>CUSTOMIZATION OPTIONS</h2>
|
||||
<div className='flex space-x-4'>
|
||||
<div className='w-1/2 space-y-4'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<h3 className='text-ut-burntorange font-semibold'>Show Course Status</h3>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Shows an indicator for waitlisted, cancelled, and closed courses.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={enableCourseStatusChips}
|
||||
onChange={() => {
|
||||
setEnableCourseStatusChips(!enableCourseStatusChips);
|
||||
OptionsStore.set('enableCourseStatusChips', !enableCourseStatusChips);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<h3 className='text-ut-burntorange font-semibold'>
|
||||
Show Time & Location in Popup
|
||||
</h3>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Shows the course's time and location in the extension's popup.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={showTimeLocation}
|
||||
onChange={() => {
|
||||
setShowTimeLocation(!showTimeLocation);
|
||||
OptionsStore.set('enableTimeAndLocationInPopup', !showTimeLocation);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{DISPLAY_PREVIEWS && (
|
||||
<Preview>
|
||||
<CalendarCourseCell
|
||||
colors={getCourseColors('orange')}
|
||||
courseDeptAndInstr={ExampleCourse.department}
|
||||
className={ExampleCourse.number}
|
||||
status={ExampleCourse.status}
|
||||
timeAndLocation={ExampleCourse.schedule.meetings[0]!.getTimeString({
|
||||
separator: '-',
|
||||
})}
|
||||
/>
|
||||
<PopupCourseBlock colors={getCourseColors('orange')} course={ExampleCourse} />
|
||||
</Preview>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' /> */}
|
||||
|
||||
<section className='mb-8'>
|
||||
<h2 className='mb-4 text-xl text-ut-black font-semibold'>ADVANCED SETTINGS</h2>
|
||||
<div className='flex space-x-4'>
|
||||
<div className={PREVIEW_SECTION_DIV_CLASSNAME}>
|
||||
{/* <div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<h3 className='text-ut-burntorange font-semibold'>Refresh Data</h3>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Refreshes waitlist, course status, and other info with the latest data from
|
||||
UT's site.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='ut-black'
|
||||
icon={RefreshIcon}
|
||||
onClick={() => console.log('Refresh clicked')}
|
||||
disabled={!enableDataRefreshing}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' /> */}
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Export Current Schedule
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Backup your active schedule to a portable file
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant='outline'
|
||||
color='ut-burntorange'
|
||||
onClick={() => handleExportJson(activeSchedule.id)}
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Import Schedule
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>Import from a schedule file</p>
|
||||
</div>
|
||||
<FileUpload
|
||||
variant='filled'
|
||||
color='ut-burntorange'
|
||||
onChange={handleImportClick}
|
||||
accept={MIMEType.JSON}
|
||||
>
|
||||
Import Schedule
|
||||
</FileUpload>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Course Conflict Highlight
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Adds a red strikethrough to courses that have conflicting times.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={highlightConflicts}
|
||||
onChange={() => {
|
||||
setHighlightConflicts(!highlightConflicts);
|
||||
OptionsStore.set('enableHighlightConflicts', !highlightConflicts);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Load All Courses in Course Schedule
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Loads all courses in the Course Schedule site by scrolling, instead of using
|
||||
next/prev page buttons.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={loadAllCourses}
|
||||
onChange={() => {
|
||||
setLoadAllCourses(!loadAllCourses);
|
||||
OptionsStore.set('enableScrollToLoad', !loadAllCourses);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Allow more than 10 schedules
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Allow bypassing the 10-schedule limit. Intended for advisors or staff who
|
||||
need to create many schedules on behalf of students.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={increaseScheduleLimit}
|
||||
onChange={() => {
|
||||
setIncreaseScheduleLimit(!increaseScheduleLimit);
|
||||
OptionsStore.set('allowMoreSchedules', !increaseScheduleLimit);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Always Open Calendar in New Tab
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Always opens the calendar view in a new tab when navigating to the calendar
|
||||
page. May prevent issues where the calendar refuses to open.
|
||||
</p>
|
||||
</div>
|
||||
<SwitchButton
|
||||
isChecked={calendarNewTab}
|
||||
onChange={() => {
|
||||
setCalendarNewTab(!calendarNewTab);
|
||||
OptionsStore.set('alwaysOpenCalendarInNewTab', !calendarNewTab);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<div className='flex items-center justify-between'>
|
||||
<div className='max-w-xs'>
|
||||
<Text variant='h4' className='text-ut-burntorange font-semibold'>
|
||||
Reset All Data
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>
|
||||
Erases all schedules and courses you have.
|
||||
</p>
|
||||
</div>
|
||||
<Button variant='outline' color='theme-red' icon={Trash} onClick={handleEraseAll}>
|
||||
Erase All
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{DISPLAY_PREVIEWS && (
|
||||
<Preview>
|
||||
<Text
|
||||
variant='h2-course'
|
||||
className={clsx('text-center text-theme-red !font-normal', {
|
||||
'line-through': highlightConflicts,
|
||||
})}
|
||||
>
|
||||
01234 MWF 10:00 AM - 11:00 AM UTC 1.234
|
||||
</Text>
|
||||
</Preview>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<AdvancedSettings
|
||||
highlightConflicts={highlightConflicts}
|
||||
setHighlightConflicts={setHighlightConflicts}
|
||||
loadAllCourses={loadAllCourses}
|
||||
setLoadAllCourses={setLoadAllCourses}
|
||||
increaseScheduleLimit={increaseScheduleLimit}
|
||||
setIncreaseScheduleLimit={setIncreaseScheduleLimit}
|
||||
calendarNewTab={calendarNewTab}
|
||||
setCalendarNewTab={setCalendarNewTab}
|
||||
activeSchedule={activeSchedule}
|
||||
handleEraseAll={handleEraseAll}
|
||||
handleImportClick={handleImportClick}
|
||||
/>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
@@ -593,17 +322,21 @@ export default function Settings(): JSX.Element {
|
||||
Open Debug Page
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<Button
|
||||
variant='filled'
|
||||
color='ut-black'
|
||||
onClick={() => addCourseByURL(activeSchedule)}
|
||||
>
|
||||
Add course by link
|
||||
</Button>
|
||||
<Button variant='filled' color='ut-burntorange' onClick={showMigrationDialog}>
|
||||
Show Migration Dialog
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider size='auto' orientation='horizontal' />
|
||||
|
||||
<Button variant='filled' color='ut-black' onClick={() => addCourseByURL(activeSchedule)}>
|
||||
Add course by link
|
||||
</Button>
|
||||
<Button variant='filled' color='ut-burntorange' onClick={showMigrationDialog}>
|
||||
Show Migration Dialog
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -616,144 +349,44 @@ export default function Settings(): JSX.Element {
|
||||
</h2>
|
||||
<div className='grid grid-cols-2 gap-4 2xl:grid-cols-4 md:grid-cols-3'>
|
||||
{LONGHORN_DEVELOPERS_ADMINS.map(admin => (
|
||||
<div
|
||||
<ContributorCard
|
||||
key={admin.githubUsername}
|
||||
className='border border-gray-300 rounded bg-ut-gray/10 p-4'
|
||||
>
|
||||
<Text
|
||||
variant='p'
|
||||
className='text-ut-burntorange font-semibold hover:cursor-pointer'
|
||||
onClick={() =>
|
||||
window.open(`https://github.com/${admin.githubUsername}`, '_blank')
|
||||
}
|
||||
>
|
||||
{admin.name}
|
||||
</Text>
|
||||
{admin.role.map(role => (
|
||||
<p key={admin.githubUsername} className='text-sm text-gray-600'>
|
||||
{role}
|
||||
</p>
|
||||
))}
|
||||
{showGitHubStats && githubStats && (
|
||||
<div className='mt-2'>
|
||||
<p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
|
||||
{includeMergedPRs && (
|
||||
<p className='text-xs'>
|
||||
Merged PRS:{' '}
|
||||
{githubStats.adminGitHubStats[admin.githubUsername]?.mergedPRs}
|
||||
</p>
|
||||
)}
|
||||
<p className='text-xs'>
|
||||
Commits: {githubStats.adminGitHubStats[admin.githubUsername]?.commits}
|
||||
</p>
|
||||
<p className='text-xs text-ut-green'>
|
||||
{githubStats.adminGitHubStats[admin.githubUsername]?.linesAdded} ++
|
||||
</p>
|
||||
<p className='text-xs text-theme-red'>
|
||||
{githubStats.adminGitHubStats[admin.githubUsername]?.linesDeleted} --
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
name={admin.name}
|
||||
githubUsername={admin.githubUsername}
|
||||
roles={admin.role}
|
||||
stats={githubStats?.adminGitHubStats[admin.githubUsername]}
|
||||
showStats={showGitHubStats}
|
||||
includeMergedPRs={INCLUDE_MERGED_PRS}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className='my-8'>
|
||||
<h2 className='mb-4 text-xl text-ut-black font-semibold'>UTRP CONTRIBUTORS</h2>
|
||||
<div className='grid grid-cols-2 gap-4 2xl:grid-cols-4 md:grid-cols-3 xl:grid-cols-3'>
|
||||
{LONGHORN_DEVELOPERS_SWE.sort(
|
||||
(a, b) =>
|
||||
(githubStats?.userGitHubStats[b.githubUsername]?.commits ?? 0) -
|
||||
(githubStats?.userGitHubStats[a.githubUsername]?.commits ?? 0)
|
||||
).map(swe => (
|
||||
<div
|
||||
{sortedContributors.map(swe => (
|
||||
<ContributorCard
|
||||
key={swe.githubUsername}
|
||||
className='border border-gray-300 rounded bg-ut-gray/10 p-4'
|
||||
>
|
||||
<Text
|
||||
variant='p'
|
||||
className='text-ut-burntorange font-semibold hover:cursor-pointer'
|
||||
onClick={() =>
|
||||
window.open(`https://github.com/${swe.githubUsername}`, '_blank')
|
||||
}
|
||||
>
|
||||
{swe.name}
|
||||
</Text>
|
||||
{swe.role.map(role => (
|
||||
<p key={swe.githubUsername} className='text-sm text-gray-600'>
|
||||
{role}
|
||||
</p>
|
||||
))}
|
||||
{showGitHubStats && githubStats && (
|
||||
<div className='mt-2'>
|
||||
<p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
|
||||
{includeMergedPRs && (
|
||||
<p className='text-xs'>
|
||||
Merged PRS:{' '}
|
||||
{githubStats.userGitHubStats[swe.githubUsername]?.mergedPRs}
|
||||
</p>
|
||||
)}
|
||||
<p className='text-xs'>
|
||||
Commits: {githubStats.userGitHubStats[swe.githubUsername]?.commits}
|
||||
</p>
|
||||
<p className='text-xs text-ut-green'>
|
||||
{githubStats.userGitHubStats[swe.githubUsername]?.linesAdded} ++
|
||||
</p>
|
||||
<p className='text-xs text-theme-red'>
|
||||
{githubStats.userGitHubStats[swe.githubUsername]?.linesDeleted} --
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
name={swe.name}
|
||||
githubUsername={swe.githubUsername}
|
||||
roles={swe.role}
|
||||
stats={githubStats?.userGitHubStats[swe.githubUsername]}
|
||||
showStats={showGitHubStats}
|
||||
includeMergedPRs={INCLUDE_MERGED_PRS}
|
||||
/>
|
||||
))}
|
||||
{additionalContributors.map(username => (
|
||||
<ContributorCard
|
||||
key={username}
|
||||
name={githubStats!.names[username] || username}
|
||||
githubUsername={username}
|
||||
roles={['Contributor']}
|
||||
stats={githubStats!.userGitHubStats[username]}
|
||||
showStats={showGitHubStats}
|
||||
includeMergedPRs={INCLUDE_MERGED_PRS}
|
||||
/>
|
||||
))}
|
||||
{githubStats &&
|
||||
Object.keys(githubStats.userGitHubStats)
|
||||
.filter(
|
||||
username =>
|
||||
!LONGHORN_DEVELOPERS_ADMINS.some(
|
||||
admin => admin.githubUsername === username
|
||||
) && !LONGHORN_DEVELOPERS_SWE.some(swe => swe.githubUsername === username)
|
||||
)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(githubStats.userGitHubStats[b]?.commits ?? 0) -
|
||||
(githubStats.userGitHubStats[a]?.commits ?? 0)
|
||||
)
|
||||
.map(username => (
|
||||
<div
|
||||
key={username}
|
||||
className='overflow-clip border border-gray-300 rounded bg-ut-gray/10 p-4'
|
||||
>
|
||||
<Text
|
||||
variant='p'
|
||||
className='text-ut-burntorange font-semibold hover:cursor-pointer'
|
||||
onClick={() => window.open(`https://github.com/${username}`, '_blank')}
|
||||
>
|
||||
{githubStats.names[username]}
|
||||
</Text>
|
||||
<p className='text-sm text-gray-600'>Contributor</p>
|
||||
{showGitHubStats && (
|
||||
<div className='mt-2'>
|
||||
<p className='text-xs text-gray-500'>GitHub Stats (UTRP repo):</p>
|
||||
{includeMergedPRs && (
|
||||
<p className='text-xs'>
|
||||
Merged PRs:{' '}
|
||||
{githubStats.userGitHubStats[username]?.mergedPRs}
|
||||
</p>
|
||||
)}
|
||||
<p className='text-xs'>
|
||||
Commits: {githubStats.userGitHubStats[username]?.commits}
|
||||
</p>
|
||||
<p className='text-xs text-ut-green'>
|
||||
{githubStats.userGitHubStats[username]?.linesAdded} ++
|
||||
</p>
|
||||
<p className='text-xs text-theme-red'>
|
||||
{githubStats.userGitHubStats[username]?.linesDeleted} --
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
13
src/views/components/settings/constants.ts
Normal file
13
src/views/components/settings/constants.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export const DISPLAY_PREVIEWS = false;
|
||||
export const PREVIEW_SECTION_DIV_CLASSNAME = DISPLAY_PREVIEWS ? 'w-1/2 space-y-4' : 'flex-grow space-y-4';
|
||||
|
||||
export const STATS_TOGGLE_KEY = 's';
|
||||
export const INCLUDE_MERGED_PRS = false;
|
||||
export const DEV_MODE_CLICK_TARGET = 5;
|
||||
export const DEV_MODE_CLICK_TIMEOUT = 5000;
|
||||
export const DEV_MODE_CLICK_INTERVAL = 500;
|
||||
|
||||
// LHD Birthday: January 9th, 2025
|
||||
export const LHD_BIRTHDAY = { month: 0, day: 9 };
|
||||
export const BIRTHDAY_CELEBRATION_DURATION = 5000;
|
||||
export const BIRTHDAY_CELEBRATION_DEBOUNCE = 2000;
|
||||
140
src/views/components/settings/useBirthdayCelebration.ts
Normal file
140
src/views/components/settings/useBirthdayCelebration.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
import type { Engine, ISourceOptions } from '@tsparticles/engine';
|
||||
import { initParticlesEngine } from '@tsparticles/react';
|
||||
import { loadSlim } from '@tsparticles/slim';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { BIRTHDAY_CELEBRATION_DEBOUNCE, BIRTHDAY_CELEBRATION_DURATION, LHD_BIRTHDAY } from './constants';
|
||||
|
||||
/**
|
||||
* Custom hook for birthday celebration particles
|
||||
*/
|
||||
export const useBirthdayCelebration = () => {
|
||||
const [showParticles, setShowParticles] = useState(false);
|
||||
const [particlesInit, setParticlesInit] = useState(false);
|
||||
const [lastCelebration, setLastCelebration] = useState(0);
|
||||
|
||||
const isBirthday = useMemo(() => {
|
||||
const today = new Date();
|
||||
return today.getMonth() === LHD_BIRTHDAY.month && today.getDate() === LHD_BIRTHDAY.day;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
initParticlesEngine(async (engine: Engine) => {
|
||||
await loadSlim(engine);
|
||||
}).then(() => {
|
||||
setParticlesInit(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const triggerCelebration = useCallback(() => {
|
||||
if (!isBirthday) return;
|
||||
|
||||
const now = Date.now();
|
||||
// Debounce: prevent triggering again within BIRTHDAY_CELEBRATION_DEBOUNCE ms
|
||||
if (now - lastCelebration < BIRTHDAY_CELEBRATION_DEBOUNCE) return;
|
||||
|
||||
setLastCelebration(now);
|
||||
setShowParticles(true);
|
||||
setTimeout(() => setShowParticles(false), BIRTHDAY_CELEBRATION_DURATION);
|
||||
}, [isBirthday, lastCelebration]);
|
||||
|
||||
const particlesOptions: ISourceOptions = useMemo(
|
||||
() => ({
|
||||
fullScreen: { enable: true, zIndex: 1 },
|
||||
particles: {
|
||||
color: { value: ['#BF5700', '#333F48', '#FFFFFF'] }, // UT colors
|
||||
move: {
|
||||
direction: 'bottom',
|
||||
enable: true,
|
||||
outModes: {
|
||||
default: 'out',
|
||||
},
|
||||
size: true,
|
||||
speed: {
|
||||
min: 1,
|
||||
max: 3,
|
||||
},
|
||||
},
|
||||
number: {
|
||||
value: 500,
|
||||
density: {
|
||||
enable: true,
|
||||
area: 800,
|
||||
},
|
||||
},
|
||||
opacity: {
|
||||
value: 1,
|
||||
animation: {
|
||||
enable: false,
|
||||
startValue: 'max',
|
||||
destroy: 'min',
|
||||
speed: 0.3,
|
||||
sync: true,
|
||||
},
|
||||
},
|
||||
rotate: {
|
||||
value: {
|
||||
min: 0,
|
||||
max: 360,
|
||||
},
|
||||
direction: 'random',
|
||||
move: true,
|
||||
animation: {
|
||||
enable: true,
|
||||
speed: 60,
|
||||
},
|
||||
},
|
||||
tilt: {
|
||||
direction: 'random',
|
||||
enable: true,
|
||||
move: true,
|
||||
value: {
|
||||
min: 0,
|
||||
max: 360,
|
||||
},
|
||||
animation: {
|
||||
enable: true,
|
||||
speed: 60,
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
type: ['circle', 'square'],
|
||||
options: {},
|
||||
},
|
||||
size: {
|
||||
value: {
|
||||
min: 2,
|
||||
max: 4,
|
||||
},
|
||||
},
|
||||
roll: {
|
||||
darken: {
|
||||
enable: true,
|
||||
value: 30,
|
||||
},
|
||||
enlighten: {
|
||||
enable: true,
|
||||
value: 30,
|
||||
},
|
||||
enable: true,
|
||||
speed: {
|
||||
min: 15,
|
||||
max: 25,
|
||||
},
|
||||
},
|
||||
wobble: {
|
||||
distance: 30,
|
||||
enable: true,
|
||||
move: true,
|
||||
speed: {
|
||||
min: -15,
|
||||
max: 15,
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return { showParticles, particlesInit, particlesOptions, triggerCelebration, isBirthday };
|
||||
};
|
||||
35
src/views/components/settings/useDevMode.ts
Normal file
35
src/views/components/settings/useDevMode.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { DEV_MODE_CLICK_INTERVAL, DEV_MODE_CLICK_TIMEOUT } from './constants';
|
||||
|
||||
/**
|
||||
* Custom hook for enabling developer mode via rapid clicking
|
||||
*/
|
||||
export const useDevMode = (targetCount: number): [boolean, () => void] => {
|
||||
const [count, setCount] = useState(0);
|
||||
const [active, setActive] = useState(false);
|
||||
const [lastClick, setLastClick] = useState(0);
|
||||
|
||||
const incrementCount = useCallback(() => {
|
||||
const now = Date.now();
|
||||
if (now - lastClick < DEV_MODE_CLICK_INTERVAL) {
|
||||
setCount(prevCount => {
|
||||
const newCount = prevCount + 1;
|
||||
if (newCount === targetCount) {
|
||||
setActive(true);
|
||||
}
|
||||
return newCount;
|
||||
});
|
||||
} else {
|
||||
setCount(1);
|
||||
}
|
||||
setLastClick(now);
|
||||
}, [lastClick, targetCount]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setCount(0), DEV_MODE_CLICK_TIMEOUT);
|
||||
return () => clearTimeout(timer);
|
||||
}, [count]);
|
||||
|
||||
return [active, incrementCount];
|
||||
};
|
||||
Reference in New Issue
Block a user