Skip to content

Commit

Permalink
added prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@khanghy2130
khanghy2130 committed Mar 8, 2024
1 parent 271ddee commit 1bbc171
Show file tree
Hide file tree
Showing 8 changed files with 547 additions and 334 deletions.
4 changes: 4 additions & 0 deletions .prettierrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"tabWidth": 4,
"plugins": ["prettier-plugin-tailwindcss"]
}
115 changes: 91 additions & 24 deletions app/components/SpinnerSVG.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,91 @@

type Props = {
size: number;
};

export default function SidePanel({size} : Props){
return <svg className={`h-${size} w-${size}`} viewBox="0 0 24 24">
<rect width="6" height="14" x="1" y="4" fill="currentColor">
<animate id="svgSpinnersBarsScaleFade0" fill="freeze" attributeName="y" begin="0;svgSpinnersBarsScaleFade1.end-0.25s" dur="0.75s" values="1;5"/>
<animate fill="freeze" attributeName="height" begin="0;svgSpinnersBarsScaleFade1.end-0.25s" dur="0.75s" values="22;14"/>
<animate fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsScaleFade1.end-0.25s" dur="0.75s" values="1;.2"/>
</rect>
<rect width="6" height="14" x="9" y="4" fill="currentColor" opacity=".4">
<animate fill="freeze" attributeName="y" begin="svgSpinnersBarsScaleFade0.begin+0.15s" dur="0.75s" values="1;5"/>
<animate fill="freeze" attributeName="height" begin="svgSpinnersBarsScaleFade0.begin+0.15s" dur="0.75s" values="22;14"/>
<animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsScaleFade0.begin+0.15s" dur="0.75s" values="1;.2"/>
</rect>
<rect width="6" height="14" x="17" y="4" fill="currentColor" opacity=".3">
<animate id="svgSpinnersBarsScaleFade1" fill="freeze" attributeName="y" begin="svgSpinnersBarsScaleFade0.begin+0.3s" dur="0.75s" values="1;5"/>
<animate fill="freeze" attributeName="height" begin="svgSpinnersBarsScaleFade0.begin+0.3s" dur="0.75s" values="22;14"/>
<animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsScaleFade0.begin+0.3s" dur="0.75s" values="1;.2"/>
</rect>
</svg>;
}
export default function SidePanel() {
return (
<svg viewBox="0 0 24 24">
<rect width="6" height="14" x="1" y="4" fill="currentColor">
<animate
id="svgSpinnersBarsScaleFade0"
fill="freeze"
attributeName="y"
begin="0;svgSpinnersBarsScaleFade1.end-0.25s"
dur="0.75s"
values="1;5"
/>
<animate
fill="freeze"
attributeName="height"
begin="0;svgSpinnersBarsScaleFade1.end-0.25s"
dur="0.75s"
values="22;14"
/>
<animate
fill="freeze"
attributeName="opacity"
begin="0;svgSpinnersBarsScaleFade1.end-0.25s"
dur="0.75s"
values="1;.2"
/>
</rect>
<rect
width="6"
height="14"
x="9"
y="4"
fill="currentColor"
opacity=".4"
>
<animate
fill="freeze"
attributeName="y"
begin="svgSpinnersBarsScaleFade0.begin+0.15s"
dur="0.75s"
values="1;5"
/>
<animate
fill="freeze"
attributeName="height"
begin="svgSpinnersBarsScaleFade0.begin+0.15s"
dur="0.75s"
values="22;14"
/>
<animate
fill="freeze"
attributeName="opacity"
begin="svgSpinnersBarsScaleFade0.begin+0.15s"
dur="0.75s"
values="1;.2"
/>
</rect>
<rect
width="6"
height="14"
x="17"
y="4"
fill="currentColor"
opacity=".3"
>
<animate
id="svgSpinnersBarsScaleFade1"
fill="freeze"
attributeName="y"
begin="svgSpinnersBarsScaleFade0.begin+0.3s"
dur="0.75s"
values="1;5"
/>
<animate
fill="freeze"
attributeName="height"
begin="svgSpinnersBarsScaleFade0.begin+0.3s"
dur="0.75s"
values="22;14"
/>
<animate
fill="freeze"
attributeName="opacity"
begin="svgSpinnersBarsScaleFade0.begin+0.3s"
dur="0.75s"
values="1;.2"
/>
</rect>
</svg>
);
}
197 changes: 100 additions & 97 deletions app/root.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,129 @@

import type { LinksFunction, LoaderFunction } from "@remix-run/node";
import type { User } from "@supabase/supabase-js";
import { Database } from "database.types";

import { json } from "@remix-run/node";
import {
Links,
Meta,
Outlet,
Scripts,
useLoaderData,
useRevalidator
Links,
Meta,
Outlet,
Scripts,
useLoaderData,
useRevalidator,
} from "@remix-run/react";
import { useState, useEffect } from "react";
import { createBrowserClient } from '@supabase/ssr'
import { createBrowserClient } from "@supabase/ssr";
import { useLocation } from "@remix-run/react";


import stylesheet from "~/tailwind.css";
import { ThemeProvider, useTheme, ThemeType } from '~/utils/Navbar/ThemeProvider';
import { getThemeSession } from './utils/Navbar/theme.server';

import {
ThemeProvider,
useTheme,
ThemeType,
} from "~/utils/Navbar/ThemeProvider";
import { getThemeSession } from "./utils/Navbar/theme.server";

import Navbar from "./components/Navbar";
import SidePanel from "./components/SidePanel";




export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
{ rel: "stylesheet", href: stylesheet },
];

export type LoaderData = {
theme: ThemeType | null;
env: { [key: string]: string }
theme: ThemeType | null;
env: { [key: string]: string };
};

export const loader: LoaderFunction = async ({ request }) => {
const themeSession = await getThemeSession(request);

const data: LoaderData = {
theme: themeSession.getTheme(),
env: {
SUPABASE_URL: process.env.SUPABASE_URL!,
SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
}
};
const themeSession = await getThemeSession(request);

return json(data)
}
const data: LoaderData = {
theme: themeSession.getTheme(),
env: {
SUPABASE_URL: process.env.SUPABASE_URL!,
SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
},
};

return json(data);
};

function App() {
const { env } = useLoaderData<LoaderFunction>()
const [supabase] = useState(() =>
createBrowserClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
)
const [user, setUser] = useState<undefined | User>(undefined);

// recalls loaders when authentication state changes
const revalidator = useRevalidator();
useEffect(() => {
const {
data: { subscription }
} = supabase.auth.onAuthStateChange((event, session) => {
revalidator.revalidate();
if (event === "SIGNED_IN") {
setUser(session?.user);
} else if (event === "SIGNED_OUT"){
setUser(undefined);
}
})

return () => {
subscription.unsubscribe()
}
}, [supabase /*, revalidator*/])


const [theme] = useTheme();
const [sidePanelIsShown, setSidePanelIsShown] = useState<boolean>(false);


// hide for specific routes
const location = useLocation();
const routesToHideNavigation = ['/login', '/signup']; ///// add homepage
const shouldHideNavigation = routesToHideNavigation.includes(location.pathname);



return (
<html lang="en" className={theme ?? ""}>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{shouldHideNavigation ? null : <>
<Navbar setSidePanelIsShown={setSidePanelIsShown} />
<SidePanel user={user} supabase={supabase}
sidePanelIsShown={sidePanelIsShown}
setSidePanelIsShown={setSidePanelIsShown} />
</>}

{/* space for navbar above main page content */}
<div className="pt-24">
<Outlet context={{ supabase, user }} />
</div>
<Scripts />
</body>
</html>
);
const { env } = useLoaderData<LoaderFunction>();
const [supabase] = useState(() =>
createBrowserClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY),
);
const [user, setUser] = useState<undefined | User>(undefined);

// recalls loaders when authentication state changes
const revalidator = useRevalidator();
useEffect(() => {
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((event, session) => {
revalidator.revalidate();
if (event === "SIGNED_IN") {
setUser(session?.user);
} else if (event === "SIGNED_OUT") {
setUser(undefined);
}
});

return () => {
subscription.unsubscribe();
};
}, [supabase /*, revalidator*/]);

const [theme] = useTheme();
const [sidePanelIsShown, setSidePanelIsShown] = useState<boolean>(false);

// hide for specific routes
const location = useLocation();
const routesToHideNavigation = ["/login", "/signup"]; ///// add homepage
const shouldHideNavigation = routesToHideNavigation.includes(
location.pathname,
);

return (
<html lang="en" className={theme ?? ""}>
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<Meta />
<Links />
</head>
<body>
{shouldHideNavigation ? null : (
<>
<Navbar setSidePanelIsShown={setSidePanelIsShown} />
<SidePanel
user={user}
supabase={supabase}
sidePanelIsShown={sidePanelIsShown}
setSidePanelIsShown={setSidePanelIsShown}
/>
</>
)}

{/* space for navbar above main page content */}
<div className="pt-24">
<Outlet context={{ supabase, user }} />
</div>
<Scripts />
</body>
</html>
);
}

export default function AppWithProviders() {
const data = useLoaderData<LoaderData>();
return (
<ThemeProvider specifiedTheme={data.theme}>
<App />
</ThemeProvider>
);
}
const data = useLoaderData<LoaderData>();
return (
<ThemeProvider specifiedTheme={data.theme}>
<App />
</ThemeProvider>
);
}
Loading

0 comments on commit 1bbc171

Please sign in to comment.