diff --git a/src/contents/components/TaskList.tsx b/src/contents/components/TaskList.tsx index e158abb..64cb1c9 100644 --- a/src/contents/components/TaskList.tsx +++ b/src/contents/components/TaskList.tsx @@ -28,6 +28,7 @@ import { defaultSaves } from "../util/settings"; import type { Saves } from "../util/settings"; import { OriginalTaskModal } from "./originalTaskModal"; import { MAX_HIDDEN_TASKS } from "~/constants"; +import { fetchTasks } from "~contents/tasks"; const getTaskColor = ( task: Task, @@ -109,6 +110,7 @@ type TaskTableProps = { width: number; rowsPerPage: number; addHiddenTaskId: (id: string) => void; + isLoading: boolean; }; const TaskTable = (props: TaskTableProps) => { const { @@ -122,6 +124,7 @@ const TaskTable = (props: TaskTableProps) => { width, rowsPerPage, addHiddenTaskId, + isLoading, } = props; const [page, setPage] = useState(0); @@ -146,6 +149,15 @@ const TaskTable = (props: TaskTableProps) => { [addHiddenTaskId], ); + if (isLoading) + return ( + + + Loading... + + + ); + return ( <> {tasklist.length > displayTaskList.length ? ( @@ -260,6 +272,8 @@ export const TaskList = (props: Props) => { const [rowsPerPage, setRowsPerPage] = useState(5); const [hiddenTaskIdList, setHiddenTaskIdList] = useState([]); + const [isLoading, setIsLoading] = useState(false); + const [isOpenAddModal, setIsOpenAddModal] = useState(false); const toggleOpen = useCallback(() => { @@ -276,42 +290,44 @@ export const TaskList = (props: Props) => { save(); }, [isRelativeTime]); - useEffect(() => { - const fetchTasklist = async () => { - const currentData = (await chrome.storage.local.get(defaultSaves)) as Saves; - setSubjects(currentData.settings.notifySurveySubjects); - setFormatStr(currentData.settings.deadlineFormat); - setIsRelativeTime(currentData.settings.deadlineMode === "relative"); - setHighlightTask(currentData.settings.highlightTask); - setLastUpdate(new Date(currentData.scombzData.lastTaskFetchUnixTime ?? 0)); - setRowsPerPage(currentData.settings.taskListRowsPerPage); + const fetchTasklistFromStorage = async () => { + const currentData = (await chrome.storage.local.get(defaultSaves)) as Saves; + setSubjects(currentData.settings.notifySurveySubjects); + setFormatStr(currentData.settings.deadlineFormat); + setIsRelativeTime(currentData.settings.deadlineMode === "relative"); + setHighlightTask(currentData.settings.highlightTask); + setLastUpdate(new Date(currentData.scombzData.lastTaskFetchUnixTime ?? 0)); + setRowsPerPage(currentData.settings.taskListRowsPerPage); - const normalTaskList = currentData.scombzData.tasklist; + const normalTaskList = currentData.scombzData.tasklist; - const notifySurveySubjectsName = currentData.settings.notifySurveySubjects.map((subject) => subject.name); - const allSurveyList = currentData.scombzData.surveyList; - const surveyList = allSurveyList.filter((task) => notifySurveySubjectsName.includes(task.course)); + const notifySurveySubjectsName = currentData.settings.notifySurveySubjects.map((subject) => subject.name); + const allSurveyList = currentData.scombzData.surveyList; + const surveyList = allSurveyList.filter((task) => notifySurveySubjectsName.includes(task.course)); - const originalTasklist = currentData.scombzData.originalTasklist; + const originalTasklist = currentData.scombzData.originalTasklist; - const now = new Date(); + const now = new Date(); - const combinedTaskList = [...normalTaskList, ...surveyList, ...originalTasklist] - .map((task) => { - return { ...task, deadlineDate: new Date(task.deadline) }; - }) - .filter((task) => task.deadlineDate >= now) - .filter((task) => !currentData.settings.hiddenTaskIdList.includes(task.id)); + const combinedTaskList = [...normalTaskList, ...surveyList, ...originalTasklist] + .map((task) => { + return { ...task, deadlineDate: new Date(task.deadline) }; + }) + .filter((task) => task.deadlineDate >= now) + .filter((task) => !currentData.settings.hiddenTaskIdList.includes(task.id)); - combinedTaskList.sort((x, y) => { - const [a, b] = [x.deadlineDate, y.deadlineDate]; - return a.getTime() - b.getTime(); - }); + combinedTaskList.sort((x, y) => { + const [a, b] = [x.deadlineDate, y.deadlineDate]; + return a.getTime() - b.getTime(); + }); - setTasklist(combinedTaskList); - setHiddenTaskIdList(currentData.settings.hiddenTaskIdList); - }; - fetchTasklist(); + setTasklist(combinedTaskList); + setHiddenTaskIdList(currentData.settings.hiddenTaskIdList); + return; + }; + + useEffect(() => { + fetchTasklistFromStorage(); setNowDate(new Date()); setInterval(() => { setNowDate(new Date()); @@ -343,6 +359,19 @@ export const TaskList = (props: Props) => { [hiddenTaskIdList], ); + const reloadTasklist = useCallback(() => { + const fetching = async () => { + await fetchTasks(true); + await fetchTasklistFromStorage(); + setIsLoading(false); + }; + + if (isLoading) return; + setIsLoading(true); + + fetching(); + }, []); + if (width < 540) { return <>; } @@ -374,7 +403,19 @@ export const TaskList = (props: Props) => { {chrome.i18n.getMessage("taskList")} - + ({chrome.i18n.getMessage("taskListLastUpdate")}: {format(lastUpdate, "MM/dd HH:mm")}) @@ -402,6 +443,7 @@ export const TaskList = (props: Props) => { width, rowsPerPage, addHiddenTaskId, + isLoading, }} /> diff --git a/src/contents/tasks.ts b/src/contents/tasks.ts index 912b4be..7e53f9f 100644 --- a/src/contents/tasks.ts +++ b/src/contents/tasks.ts @@ -15,7 +15,7 @@ if (location.href === "https://scombz.shibaura-it.ac.jp/lms/task") { } // タスクを取得 -const fetchTasks = async () => { +export const fetchTasks = async (forceExecute?: boolean) => { // TOPページを除外する if (location.href.startsWith("https://scombz.shibaura-it.ac.jp/login")) { return; @@ -23,7 +23,7 @@ const fetchTasks = async () => { const now = new Date(); const currentData = (await chrome.storage.local.get(defaultSaves)) as Saves; const lastTaskFetch = new Date(currentData.scombzData.lastTaskFetchUnixTime); - if (differenceInMinutes(now, lastTaskFetch) >= FETCH_INTERVAL) { + if (forceExecute || differenceInMinutes(now, lastTaskFetch) >= FETCH_INTERVAL) { console.log("fetch tasks"); currentData.scombzData.lastTaskFetchUnixTime = now.getTime(); chrome.storage.local.set(currentData);