HyeonJun Jeon

[Modify] Save subjects in localForage

import React, { useReducer, useState } from "react";
import React, { useEffect, useReducer, useState } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import localforage from "localforage";
import Month from "../components/Month";
import Header from "../components/Header";
import Side from "../components/Side";
import { initTempSubjects } from "../utils/Test";
export const CalendarStateContext = React.createContext();
......@@ -12,8 +14,10 @@ const render = (subsObj, args) => {
case "CHECKED":
const sub = subsObj[args.code];
sub.selected = !sub.selected;
localStorage.setItem("S" + args.code, JSON.stringify(sub));
localforage.setItem(args.code, sub);
return { ...subsObj, [args.code]: sub };
case "INIT":
return args.subsObj;
default:
return subsObj;
}
......@@ -28,35 +32,20 @@ const Calendar = () => {
scope: "month",
date: new Date(),
});
const [subsObj, dispatch] = useReducer(render, {});
let subLst;
if (!localStorage.getItem("Subjects")) {
subLst = [];
let tcolors = [
"red",
"green",
"blue",
"orange",
"gold",
"aqua",
"chartreuse",
];
for (let i = 0; i < 7; i++) {
let code = i + 1;
let tsub = { name: "과목" + code, color: tcolors[i], selected: true };
subLst.push(code);
localStorage.setItem("S" + code, JSON.stringify(tsub));
useEffect(() => {
async function initSubsObj() {
if (!localStorage.getItem("Subjects")) await initTempSubjects();
const subCodeLst = JSON.parse(localStorage.getItem("Subjects"));
let tsubsObj = {};
for (const code of subCodeLst) {
tsubsObj[code] = await localforage.getItem(code);
}
dispatch({ type: "INIT", subsObj: tsubsObj });
}
localStorage.setItem("Subjects", JSON.stringify(subLst));
}
subLst = JSON.parse(localStorage.getItem("Subjects"));
let tsubsObj = {};
for (const code of subLst) {
tsubsObj[code] = JSON.parse(localStorage.getItem("S" + code));
}
const [subsObj, dispatch] = useReducer(render, tsubsObj);
initSubsObj();
}, []);
return (
<CalendarStateContext.Provider
......
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import localforage from "localforage";
import { initTempSubjects } from "../utils/Test";
const Debug = () => {
const [state, setState] = useState({ input: "", output: "" });
......@@ -13,8 +13,10 @@ const Debug = () => {
};
const handleSubmit = async (e) => {
await localforage.setItem("test", state.input);
const result = await localforage.getItem("test");
if (state.input === "init") await initTempSubjects();
const result = state.input;
setState({ ...state, output: result });
};
......
import localforage from "localforage";
const initTempSubjects = async () => {
let tcolors = [
"red",
"green",
"blue",
"orange",
"gold",
"aqua",
"chartreuse",
];
const subCodeLst = ["1", "2"];
const subObj = {
1: {
name: "과목A",
color: tcolors[0],
selected: true,
schedule: [
{ type: "zoom", category: "과목A", label: "", start: [9, 30] },
],
},
2: {
name: "과목B",
color: tcolors[1],
selected: true,
schedule: [
{
date: new Date(2022, 5, 3),
type: "ecampus",
category: "과목B",
label: "과제",
end: [23, 59],
},
],
},
};
await localforage.setItem("1", subObj["1"]);
await localforage.setItem("2", subObj["2"]);
for (let i = 2; i < 7; i++) {
let code = (i + 1).toString();
let tsub = {
date: new Date(2022, 5, 3),
name: "과목" + code,
color: tcolors[i],
selected: true,
schedule: [],
};
subCodeLst.push(code);
await localforage.setItem(code, tsub);
}
localStorage.setItem("Subjects", JSON.stringify(subCodeLst));
};
export { initTempSubjects };