From 81e1ccee05dde4a30e95bdffab36d0e5a70ea8ec Mon Sep 17 00:00:00 2001 From: Lorezz Date: Tue, 10 Sep 2024 15:47:16 +0200 Subject: [PATCH] wip login and logout states --- src/components/layout/Header.tsx | 28 ++++++++++++++++-- src/lib/api.ts | 29 ++++++++++++------ src/lib/auth.ts | 39 +++++++++++++++++++++++++ src/lib/store.ts | 50 -------------------------------- src/lib/storeState.ts | 50 ++++++++++++++++++++++++++++++++ src/pages/GenerateDataPage.tsx | 2 +- src/pages/Home.tsx | 23 +++++++++++++-- src/pages/LoadDataPage.tsx | 2 +- src/pages/ShowChartPage.tsx | 6 +++- src/sharedTypes.ts | 2 ++ 10 files changed, 163 insertions(+), 68 deletions(-) create mode 100644 src/lib/auth.ts delete mode 100644 src/lib/store.ts create mode 100644 src/lib/storeState.ts diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index f603f4e..c28fbef 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,4 +1,20 @@ +import React, { useEffect, useState } from "react"; +import * as auth from "../../lib/auth"; + export default function Header() { + const logged = auth.useAuth(); + + // useEffect(() => { + // if (!logged) { + // window.location.href = "/enter"; + // } + // }, [logged]); + + function logoutAndRedir() { + auth.logout(); + // window.location.href = "/enter"; + } + return (
@@ -70,9 +86,15 @@ export default function Header() {
- - Sign In / Up - + {!logged ? ( + + Sign In / Up + + ) : ( + + )}
); diff --git a/src/lib/api.ts b/src/lib/api.ts index 94eb21e..108b9aa 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -1,3 +1,4 @@ +import * as auth from "./auth"; const SERVER_URL = import.meta.env.VITE_SERVER_URL; export async function upsertChart( @@ -11,7 +12,7 @@ export async function upsertChart( }, id?: string ) { - const token = sessionStorage.getItem("token"); + const token = auth.getAuth(); if (!token) return null; const url = id ? `${SERVER_URL}/charts/${id}` : `${SERVER_URL}/charts/`; @@ -29,6 +30,11 @@ export async function upsertChart( body: payload, }); console.log("upsertChart", response.status); + + if (response.status === 401) { + return auth.logout(); + } + if (response.status === 200) { const data = await response.json(); return data; @@ -37,7 +43,7 @@ export async function upsertChart( } export async function deleteChart(id: string) { - const token = sessionStorage.getItem("token"); + const token = auth.getAuth(); if (!token) return null; const response = await fetch(`${SERVER_URL}/charts/${id}`, { @@ -48,6 +54,9 @@ export async function deleteChart(id: string) { }, }); console.log("deleteChart", response.status); + if (response.status === 401) { + return auth.logout(); + } if (response.status === 200) { const data = await response.json(); return data; @@ -56,7 +65,7 @@ export async function deleteChart(id: string) { } export async function getCharts() { - const token = sessionStorage.getItem("token"); + const token = auth.getAuth(); if (!token) return null; const response = await fetch(`${SERVER_URL}/charts`, { method: "GET", @@ -65,6 +74,11 @@ export async function getCharts() { Authorization: `Bearer ${token}`, }, }); + + console.log("getCharts", response.status); + if (response.status === 401) { + return auth.logout(); + } if (response.status === 200) { const data = await response.json(); return data; @@ -91,11 +105,8 @@ export async function login({ }); if (response.status === 200) { const data = await response.json(); - if (rememberMe) { - console.log("remember me!"); - // localStorage.setItem("token", data.token); - } - sessionStorage.setItem("token", data.accessToken); + + auth.saveAuth(data.accessToken, rememberMe || false); return true; } else { const data = await response.json(); @@ -121,7 +132,7 @@ export async function register({ }); if (response.status === 200) { const data = await response.json(); - sessionStorage.setItem("token", data.accessToken); + auth.saveAuth(data.accessToken, false); return true; } else { const data = await response.json(); diff --git a/src/lib/auth.ts b/src/lib/auth.ts new file mode 100644 index 0000000..b88c0b5 --- /dev/null +++ b/src/lib/auth.ts @@ -0,0 +1,39 @@ +import { useEffect, useState } from "react"; + +function getItem(name: string) { + return sessionStorage.getItem(name) || localStorage.getItem(name); +} + +export function isAuth() { + const token = getItem("token"); + return token ? true : false; +} + +export function getAuth() { + return getItem("token"); +} + +export function saveAuth(token: string, remember: boolean) { + if (remember) { + localStorage.setItem("token", token); + } else { + sessionStorage.setItem("token", token); + } +} + +export function logout() { + localStorage.removeItem("token"); + sessionStorage.removeItem("token"); + try { + window.location.reload(); + } catch (error) {} +} + +export function useAuth() { + const item = getItem("token"); + const [auth, setAuth] = useState(isAuth()); + useEffect(() => { + setAuth(isAuth()); + }, [item]); + return auth; +} diff --git a/src/lib/store.ts b/src/lib/store.ts deleted file mode 100644 index df1285c..0000000 --- a/src/lib/store.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { create } from "zustand"; -import { persist } from "zustand/middleware"; -import { defaultConfig } from "./constants"; -import { MatrixType, StoreStateType } from "../types"; -// import { immer } from 'zustand/middleware/immer'; - -const useStoreState = create()( - persist( - (set) => ({ - data: null, - chart: "bar", - config: defaultConfig, - rawData: null, - description: "", - publish: false, - name: "", - id: null, - setId: (value: string) => set(() => ({ id: value })), - setName: (value: string) => set(() => ({ name: value })), - setConfig: (value: object) => set(() => ({ config: value })), - setChart: (value: string) => set(() => ({ chart: value })), - setRawData: (value: any) => set(() => ({ rawData: value })), - setData: (value: MatrixType | null) => set(() => ({ data: value })), - loadItem: (value: any) => - set((state) => ({ - chart: value.chart, - config: value.config, - rawData: null, - data: value.data, - description: value.description, - publish: value.publish, - name: value.name, - id: value.id, - })), - resetItem: () => - set(() => ({ - id: null, - name: "", - description: "", - chart: "bar", - data: null, - config: defaultConfig, - rawData: null, - publish: true, - })), - }), - { name: "ChartsStore" } - ) -); -export default useStoreState; diff --git a/src/lib/storeState.ts b/src/lib/storeState.ts new file mode 100644 index 0000000..8a846ac --- /dev/null +++ b/src/lib/storeState.ts @@ -0,0 +1,50 @@ +import { create } from "zustand"; +import { persist } from "zustand/middleware"; +import { defaultConfig } from "./constants"; +import { MatrixType, StoreStateType } from "../types"; +// import { immer } from 'zustand/middleware/immer'; + +const useStoreState = create()( + // persist( + (set) => ({ + data: null, + chart: "bar", + config: defaultConfig, + rawData: null, + description: "", + publish: false, + name: "", + id: null, + setId: (value: string) => set(() => ({ id: value })), + setName: (value: string) => set(() => ({ name: value })), + setConfig: (value: object) => set(() => ({ config: value })), + setChart: (value: string) => set(() => ({ chart: value })), + setRawData: (value: any) => set(() => ({ rawData: value })), + setData: (value: MatrixType | null) => set(() => ({ data: value })), + loadItem: (value: any) => + set((state) => ({ + chart: value.chart, + config: value.config, + rawData: null, + data: value.data, + description: value.description, + publish: value.publish, + name: value.name, + id: value.id, + })), + resetItem: () => + set(() => ({ + id: null, + name: "", + description: "", + chart: "bar", + data: null, + config: defaultConfig, + rawData: null, + publish: true, + })), + }) + // { name: "persistedStore" } + // ) +); +export default useStoreState; diff --git a/src/pages/GenerateDataPage.tsx b/src/pages/GenerateDataPage.tsx index d38f439..987ea85 100644 --- a/src/pages/GenerateDataPage.tsx +++ b/src/pages/GenerateDataPage.tsx @@ -2,7 +2,7 @@ import { useEffect } from "react"; import { getAvailablePalettes, getPalette, transposeData } from "../lib/utils"; import DataTable from "../components/DataTable"; -import useStoreState from "../lib/store"; +import useStoreState from "../lib/storeState"; import GenerateRandomData from "../components/GenerateRandomData"; import { downloadCSV, dataToCSV } from "../lib/downloadUtils"; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ae9229c..686de15 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,7 +3,7 @@ import DataTable from "../components/DataTable"; import RenderChart from "../components/RenderChart"; import useChartsStoreState from "../lib/chartListStore"; -import useStoreState from "../lib/store"; +import useStoreState from "../lib/storeState"; import CSVUpload from "../components/CSVUpload"; import SelectChart from "../components/SelectChart"; import ChartOptions from "../components/ChartOptions"; @@ -14,6 +14,7 @@ import { dataToCSV, downloadCSV } from "../lib/downloadUtils"; import ChartSave from "../components/ChartSave"; import { useEffect } from "react"; import * as api from "../lib/api"; +import * as auth from "../lib/auth"; function Home() { const [state, send] = useMachine(stepMachine); @@ -44,6 +45,9 @@ function Home() { } useEffect(() => { + if (!auth.isAuth()) { + window.location.href = "/enter"; + } fetchCharts(); }, []); @@ -210,10 +214,23 @@ function Home() { >
{item.name}
- - {item.id} + + {item.publish ? "public" : "private"}
+ {item.publish && ( + + view + + )}