Revert "Revert "Initialize supabase""

This reverts commit 112ec76.

frontend/package.json

@@ -22,6 +22,7 @@
 		"@mui/material": "^5.15.3",
 		"@react-hook/window-size": "^3.1.1",
 		"@reduxjs/toolkit": "^2.0.1",
+		"@supabase/supabase-js": "^2.39.3",
 		"@swc/helpers": "^0.5.3",
 		"@uiw/codemirror-theme-xcode": "^4.21.21",
 		"@uiw/codemirror-themes": "^4.21.21",

frontend/src/App.tsx

@@ -4,12 +4,14 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import "./App.css";
 import { Box, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import EditorLayout from "./components/layouts/EditorLayout";
 import EditorIndex from "./pages/editor/Index";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { selectConfig } from "./store/configSlice";
+import { createClient } from "@supabase/supabase-js";
+import { setClient } from "./store/supabaseSlice";
 
 const router = createBrowserRouter([
 	{
@@ -25,6 +27,7 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
+	const dispatch = useDispatch();
 	const config = useSelector(selectConfig);
 	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 	const theme = useMemo(() => {
@@ -37,6 +40,19 @@ function App() {
 		});
 	}, [config.theme, prefersDarkMode]);
 
+	useEffect(() => {
+		const supabase = createClient(
+			import.meta.env.VITE_SUPABASE_URL,
+			import.meta.env.VITE_SUPABASE_ANON
+		);
+
+		dispatch(setClient(supabase));
+
+		return () => {
+			dispatch(setClient(null));
+		};
+	}, [dispatch]);
+
 	return (
 		<ThemeProvider theme={theme}>
 			<CssBaseline />

frontend/src/store/store.ts

@@ -1,20 +1,23 @@
 import { configureStore } from "@reduxjs/toolkit";
 import editorSlice from "./editorSlice";
 import configSlice from "./configSlice";
+import supabaseSlice from "./supabaseSlice";
 
 export const store = configureStore({
 	reducer: {
 		editor: editorSlice,
 		config: configSlice,
+		supabase: supabaseSlice,
 	},
 	middleware: (getDefaultMiddleware) =>
 		getDefaultMiddleware({
 			serializableCheck: {
-				ignoredActions: ["editor/setDoc", "editor/setClient"],
-				ignoredPaths: ["editor.doc", "editor.client"],
+				ignoredActions: ["editor/setDoc", "editor/setClient", "supabase/setClient"],
+				ignoredPaths: ["editor.doc", "editor.client", "supabase.client"],
 			},
 			immutableCheck: {
-				ignoredPaths: ["editor.doc", "editor.client"],
+				ignoredActions: ["editor/setDoc", "editor/setClient", "supabase/setClient"],
+				ignoredPaths: ["editor.doc", "editor.client", "supabase.client"],
 			},
 		}),
 });

frontend/src/store/supabaseSlice.ts

@@ -0,0 +1,29 @@
+import { createSlice } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "./store";
+import { SupabaseClient } from "@supabase/supabase-js";
+import { Database } from "../../types/supabase";
+
+export interface SupabaseState {
+	client: SupabaseClient<Database, "public"> | null;
+}
+
+const initialState: SupabaseState = {
+	client: null,
+};
+
+export const supabaseSlice = createSlice({
+	name: "supabase",
+	initialState,
+	reducers: {
+		setClient: (state, action: PayloadAction<SupabaseClient<Database, "public"> | null>) => {
+			state.client = action.payload;
+		},
+	},
+});
+
+export const { setClient } = supabaseSlice.actions;
+
+export const selectSupabase = (state: RootState) => state.supabase;
+
+export default supabaseSlice.reducer;