titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abstract SettingsContext out

Browse Source
This commit is contained in:
1ilit 2024-03-09 22:39:46 +02:00
parent f3eb6d7c04
commit 6c0ebcf7bc
15 changed files with 210 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/App.jsx
View File

@ -4,39 +4,85 @@ import Survey from "./pages/Survey";
import BugReport from "./pages/BugReport";
import Shortcuts from "./pages/Shortcuts";
import Templates from "./pages/Templates";
import { useEffect } from "react";
import { useEffect, useLayoutEffect } from "react";
import LandingPage from "./pages/LandingPage";
import LayoutContextProvider from "./context/LayoutContext";
import SettingsContextProvider from "./context/SettingsContext";
import useSettings from "./hooks/useSettings";
const Wrapper = ({ children }) => {
function ThemedPage({ children }) {
const { setSettings } = useSettings();
useLayoutEffect(() => {
const theme = localStorage.getItem("theme");
if (theme === "dark") {
setSettings((prev) => ({ ...prev, mode: "dark" }));
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
} else {
setSettings((prev) => ({ ...prev, mode: "light" }));
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
}
}, [setSettings]);
return children;
}
function RestoreScroll() {
const location = useLocation();
useEffect(() => {
window.scroll(0, 0);
}, [location.pathname]);
return children;
};
return null;
}
function App() {
return (
<SettingsContextProvider>
<BrowserRouter>
<Wrapper>
<RestoreScroll />
<Routes>
<Route path="/" element={<LandingPage />} />
<Route
path="/editor"
element={
<LayoutContextProvider>
<ThemedPage>
<Editor />
</LayoutContextProvider>
</ThemedPage>
}
/>
<Route
path="/survey"
element={
<ThemedPage>
<Survey />
</ThemedPage>
}
/>
<Route
path="/shortcuts"
element={
<ThemedPage>
<Shortcuts />
</ThemedPage>
}
/>
<Route
path="/bug_report"
element={
<ThemedPage>
<BugReport />
</ThemedPage>
}
/>
<Route path="/survey" element={<Survey />} />
<Route path="/shortcuts" element={<Shortcuts />} />
<Route path="/bug_report" element={<BugReport />} />
<Route path="/templates" element={<Templates />} />
</Routes>
</Wrapper>
</BrowserRouter>
</SettingsContextProvider>
);
}

6
src/components/Area.jsx
View File

@ -16,19 +16,19 @@ import {
import {
AreaContext,
SelectContext,
SettingsContext,
StateContext,
TabContext,
UndoRedoContext,
} from "../pages/Editor";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
export default function Area(props) {
const [hovered, setHovered] = useState(false);
const [editField, setEditField] = useState({});
const { setState } = useContext(StateContext);
const {layout} = useLayout();
const { settings } = useContext(SettingsContext);
const { layout } = useLayout();
const { settings } = useSettings();
const { tab, setTab } = useContext(TabContext);
const { updateArea, deleteArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);

4
src/components/Canvas.jsx
View File

@ -6,7 +6,6 @@ import Relationship from "./Relationship";
import {
AreaContext,
NoteContext,
SettingsContext,
TableContext,
UndoRedoContext,
SelectContext,
@ -14,13 +13,14 @@ import {
} from "../pages/Editor";
import Note from "./Note";
import { Toast } from "@douyinfe/semi-ui";
import useSettings from "../hooks/useSettings";
export default function Canvas() {
const { tables, updateTable, relationships, addRelationship } =
useContext(TableContext);
const { areas, updateArea } = useContext(AreaContext);
const { notes, updateNote } = useContext(NoteContext);
const { settings } = useContext(SettingsContext);
const { settings } = useSettings();
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { transform, setTransform } = useContext(TransformContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);

4
src/components/ControlPanel.jsx
View File

@ -53,7 +53,6 @@ import {
NoteContext,
TransformContext,
SelectContext,
SettingsContext,
StateContext,
TabContext,
TableContext,
@ -73,6 +72,7 @@ import { Parser } from "node-sql-parser";
import Todo from "./Todo";
import { Thumbnail } from "./Thumbnail";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
export default function ControlPanel({
diagramId,
@ -124,7 +124,7 @@ export default function ControlPanel({
const [data, setData] = useState(null);
const { state, setState } = useContext(StateContext);
const { layout, setLayout } = useLayout();
const { settings, setSettings } = useContext(SettingsContext);
const { settings, setSettings } = useSettings();
const {
relationships,
tables,

5
src/components/Issues.jsx
View File

@ -1,10 +1,11 @@
import { useContext, useState, useEffect } from "react";
import { Collapse, Badge } from "@douyinfe/semi-ui";
import { SettingsContext, TableContext, TypeContext } from "../pages/Editor";
import { TableContext, TypeContext } from "../pages/Editor";
import { validateDiagram, arrayIsEqual } from "../utils";
import useSettings from "../hooks/useSettings";
export default function Issues() {
const { settings } = useContext(SettingsContext);
const { settings } = useSettings();
const { types } = useContext(TypeContext);
const { tables, relationships } = useContext(TableContext);
const [issues, setIssues] = useState([]);

6
src/components/Relationship.jsx
View File

@ -1,11 +1,11 @@
import { useContext, useRef, useState } from "react";
import { useRef, useState } from "react";
import { calcPath } from "../utils";
import { Cardinality } from "../data/data";
import { SettingsContext } from "../pages/Editor";
import useSettings from "../hooks/useSettings";
export default function Relationship(props) {
const [hovered, setHovered] = useState(false);
const { settings } = useContext(SettingsContext);
const { settings } = useSettings();
const pathRef = useRef();
let cardinalityStart = "1";

4
src/components/Sidebar.jsx
View File

@ -9,12 +9,12 @@ import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
import {
BotMessageContext,
MessageContext,
SettingsContext,
UndoRedoContext,
} from "../pages/Editor";
import Todo from "./Todo";
import Chat from "./Chat";
import DrawBot from "./DrawBot";
import useSettings from "../hooks/useSettings";
export default function Sidebar() {
const SidesheetType = {
@ -27,7 +27,7 @@ export default function Sidebar() {
};
const { undoStack } = useContext(UndoRedoContext);
const { messages } = useContext(MessageContext);
const { settings } = useContext(SettingsContext);
const { settings } = useSettings();
const { botMessages } = useContext(BotMessageContext);
const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
const [seen, setSeen] = useState(0);

4
src/components/Table.jsx
View File

@ -33,7 +33,6 @@ import {
} from "@douyinfe/semi-ui";
import {
SelectContext,
SettingsContext,
TabContext,
TableContext,
TypeContext,
@ -41,6 +40,7 @@ import {
} from "../pages/Editor";
import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings";
export default function Table(props) {
const [isHovered, setIsHovered] = useState(false);
@ -50,7 +50,7 @@ export default function Table(props) {
const { deleteTable, updateTable, updateField, setRelationships } =
useContext(TableContext);
const { tab, setTab } = useContext(TabContext);
const { settings } = useContext(SettingsContext);
const { settings } = useSettings();
const { types } = useContext(TypeContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext);

21
src/context/SettingsContext.jsx Normal file
View File

@ -0,0 +1,21 @@
import { createContext, useState } from "react";
export const SettingsContext = createContext(null);
export default function SettingsContextProvider({ children }) {
const [settings, setSettings] = useState({
strictMode: false,
showFieldSummary: true,
showGrid: true,
mode: "light",
autosave: true,
panning: true,
showCardinality: true,
});
return (
<SettingsContext.Provider value={{ settings, setSettings }}>
{children}
</SettingsContext.Provider>
);
}

7
src/hooks/useLayout.js
View File

@ -1,13 +1,6 @@
import { useContext } from "react";
import { LayoutContext } from "../context/LayoutContext";
/**
* Access layout state
*
* Layout includes: header, sidebar, toolbar, issues, fullscreen
*
* @returns `{ layout, setLayout }`
*/
export default function useLayout() {
return useContext(LayoutContext);
}

6
src/hooks/useSettings.js Normal file
View File

@ -0,0 +1,6 @@
import { useContext } from "react";
import { SettingsContext } from "../context/SettingsContext";
export default function useSettings() {
return useContext(SettingsContext);
}

14
src/pages/BugReport.jsx
View File

@ -136,19 +136,7 @@ export default function BugReport() {
const [theme, setTheme] = useState("");
useEffect(() => {
const t = localStorage.getItem("theme");
setTheme(t);
if (t === "dark") {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
} else {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
}
setTheme(localStorage.getItem("theme"));
document.title = "Report a bug | drawDB";
document.body.setAttribute("class", "theme");
}, [setTheme]);

53
src/pages/Editor.jsx
View File

@ -15,13 +15,13 @@ import { Divider, Tooltip } from "@douyinfe/semi-ui";
import { exitFullscreen } from "../utils";
import useLayout from "../hooks/useLayout";
import LayoutContextProvider from "../context/LayoutContext";
import useSettings from "../hooks/useSettings";
export const StateContext = createContext();
export const TableContext = createContext();
export const AreaContext = createContext();
export const TabContext = createContext();
export const NoteContext = createContext();
export const SettingsContext = createContext();
export const UndoRedoContext = createContext();
export const SelectContext = createContext();
export const TaskContext = createContext();
@ -52,15 +52,7 @@ function WorkSpace() {
const [width, setWidth] = useState(340);
const [tab, setTab] = useState(Tab.tables);
const { layout, setLayout } = useLayout();
const [settings, setSettings] = useState({
strictMode: false,
showFieldSummary: true,
showGrid: true,
mode: "light",
autosave: true,
panning: true,
showCardinality: true,
});
const { settings, setSettings } = useSettings();
const [transform, setTransform] = useState({
zoom: 1,
pan: { x: 0, y: 0 },
@ -94,8 +86,8 @@ function WorkSpace() {
{
id: prev.length,
name: `table_${prev.length}`,
x: -settings.pan.x,
y: -settings.pan.y,
x: -transform.pan.x,
y: -transform.pan.y,
fields: [
{
name: "id",
@ -211,8 +203,8 @@ function WorkSpace() {
{
id: prev.length,
name: `area_${prev.length}`,
x: -settings.pan.x,
y: -settings.pan.y,
x: -transform.pan.x,
y: -transform.pan.y,
width: 200,
height: 200,
color: defaultTableTheme,
@ -244,8 +236,8 @@ function WorkSpace() {
...prev,
{
id: prev.length,
x: -settings.pan.x,
y: -settings.pan.y,
x: -transform.pan.x,
y: -transform.pan.y,
title: `note_${prev.length}`,
content: "",
color: defaultNoteTheme,
@ -690,22 +682,7 @@ function WorkSpace() {
break;
}
}
const theme = localStorage.getItem("theme");
if (theme === "dark") {
setSettings((prev) => ({ ...prev, mode: "dark" }));
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
} else {
setSettings((prev) => ({ ...prev, mode: "light" }));
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
}
}, []);
}, [setSettings]);
return (
<StateContext.Provider value={{ state, setState }}>
@ -731,7 +708,6 @@ function WorkSpace() {
value={{ notes, setNotes, updateNote, addNote, deleteNote }}
>
<TabContext.Provider value={{ tab, setTab }}>
<SettingsContext.Provider value={{ settings, setSettings }}>
<UndoRedoContext.Provider
value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
>
@ -791,17 +767,11 @@ function WorkSpace() {
>
<i className="bi bi-dash-lg"></i>
</button>
<Divider
align="center"
layout="vertical"
/>
<Divider align="center" layout="vertical" />
<div className="px-3 py-2">
{parseInt(transform.zoom * 100)}%
</div>
<Divider
align="center"
layout="vertical"
/>
<Divider align="center" layout="vertical" />
<button
className="px-3 py-2"
onClick={() =>
@ -839,7 +809,6 @@ function WorkSpace() {
</TaskContext.Provider>
</SelectContext.Provider>
</UndoRedoContext.Provider>
</SettingsContext.Provider>
</TabContext.Provider>
</NoteContext.Provider>
</AreaContext.Provider>

14
src/pages/Shortcuts.jsx
View File

@ -76,19 +76,7 @@ export default function Shortcuts() {
};
useEffect(() => {
const t = localStorage.getItem("theme");
setTheme(t);
if (t === "dark") {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
} else {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
}
setTheme(localStorage.getItem("theme"));
document.title = "Shortcuts | drawDB";
document.body.setAttribute("class", "theme");
}, [setTheme]);

14
src/pages/Survey.jsx
View File

@ -239,19 +239,7 @@ export default function Survey() {
useEffect(() => window.scroll(0, 0));
useEffect(() => {
const t = localStorage.getItem("theme");
setTheme(t);
if (t === "dark") {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "dark");
}
} else {
const body = document.body;
if (body.hasAttribute("theme-mode")) {
body.setAttribute("theme-mode", "light");
}
}
setTheme(localStorage.getItem("theme"));
document.title = "Share you feedback | drawDB";
document.body.setAttribute("class", "theme");
}, [setTheme]);