mirror of https://github.com/MaxLeiter/Drift
cookies fixes, hook improvement, more porting
Max Leiter
3 years ago
parent
95d1ef31ef
commit
cf7d89eb20
@ -1,67 +1,33 @@
|
|||||||
import styles from "@styles/Home.module.css"
|
|
||||||
import NewPost from "@components/new-post"
|
import NewPost from "@components/new-post"
|
||||||
import PageSeo from "@components/page-seo"
|
import { useRouter } from "next/navigation"
|
||||||
import { Page } from "@geist-ui/core/dist"
|
import { cookies } from "next/headers"
|
||||||
import Head from "next/head"
|
import { TOKEN_COOKIE_NAME } from "@lib/constants"
|
||||||
import { GetServerSideProps } from "next"
|
import { getPostWithFiles } from "app/prisma"
|
||||||
import { Post } from "@lib/types"
|
import { useRedirectIfNotAuthed } from "@lib/server/hooks/use-redirect-if-not-authed"
|
||||||
import cookie from "cookie"
|
const NewFromExisting = async ({
|
||||||
|
params
|
||||||
|
}: {
|
||||||
const NewFromExisting = async () => {
|
params: {
|
||||||
return (
|
id: string
|
||||||
// <Head>
|
}
|
||||||
// {/* TODO: solve this. */}
|
}) => {
|
||||||
// {/* eslint-disable-next-line @next/next/no-css-tags */}
|
const { id } = params
|
||||||
// <link rel="stylesheet" href="/css/react-datepicker.css" />
|
const router = useRouter()
|
||||||
// </Head>
|
const cookieList = cookies()
|
||||||
<NewPost initialPost={post} newPostParent={parentId} />
|
useRedirectIfNotAuthed()
|
||||||
)
|
const driftToken = cookieList.get(TOKEN_COOKIE_NAME)
|
||||||
|
|
||||||
|
if (!driftToken) {
|
||||||
|
return router.push("/signin")
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return router.push("/new")
|
||||||
|
}
|
||||||
|
|
||||||
|
const post = await getPostWithFiles(id)
|
||||||
|
|
||||||
|
return <NewPost initialPost={post} newPostParent={id} />
|
||||||
}
|
}
|
||||||
|
|
||||||
// export const getServerSideProps: GetServerSideProps = async ({
|
|
||||||
// req,
|
|
||||||
// params
|
|
||||||
// }) => {
|
|
||||||
// const id = params?.id
|
|
||||||
// const redirect = {
|
|
||||||
// redirect: {
|
|
||||||
// destination: "/new",
|
|
||||||
// permanent: false
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (!id) {
|
|
||||||
// return redirect
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const driftToken = cookie.parse(req.headers.cookie || "")[`drift-token`]
|
|
||||||
|
|
||||||
// const post = await fetch(`${process.env.API_URL}/posts/${id}`, {
|
|
||||||
// method: "GET",
|
|
||||||
// headers: {
|
|
||||||
// "Content-Type": "application/json",
|
|
||||||
// Authorization: `Bearer ${driftToken}`,
|
|
||||||
// "x-secret-key": process.env.SECRET_KEY || ""
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
|
|
||||||
// if (!post.ok) {
|
|
||||||
// return redirect
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const data = await post.json()
|
|
||||||
|
|
||||||
// if (!data) {
|
|
||||||
// return redirect
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return {
|
|
||||||
// props: {
|
|
||||||
// post: data,
|
|
||||||
// parentId: id
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
export default NewFromExisting
|
export default NewFromExisting
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
export default function NewLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
// useRedirectIfNotAuthed()
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
@ -1,10 +1,6 @@
|
|||||||
import NewPost from "@components/new-post"
|
import NewPost from "@components/new-post"
|
||||||
import '@styles/react-datepicker.css'
|
import '@styles/react-datepicker.css'
|
||||||
|
|
||||||
const New = () => {
|
const New = () => <NewPost />
|
||||||
return (
|
|
||||||
<NewPost />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default New
|
export default New
|
||||||
|
|||||||
@ -0,0 +1,34 @@
|
|||||||
|
import styles from "@styles/Home.module.css"
|
||||||
|
|
||||||
|
import MyPosts from "@components/my-posts"
|
||||||
|
import type { GetServerSideProps } from "next"
|
||||||
|
import { Post } from "@lib/types"
|
||||||
|
import { Page } from "@geist-ui/core/dist"
|
||||||
|
import { getCookie } from "cookies-next"
|
||||||
|
import { TOKEN_COOKIE_NAME } from "@lib/constants"
|
||||||
|
import { useRouter } from "next/navigation"
|
||||||
|
import { cookies } from "next/headers"
|
||||||
|
export default function Mine() {
|
||||||
|
const router = useRouter()
|
||||||
|
const driftToken = cookies().get(TOKEN_COOKIE_NAME)
|
||||||
|
if (!driftToken) {
|
||||||
|
return router.push("/signin")
|
||||||
|
}
|
||||||
|
|
||||||
|
// const posts = await fetch(process.env.API_URL + `/posts/mine`, {
|
||||||
|
// method: "GET",
|
||||||
|
// headers: {
|
||||||
|
// "Content-Type": "application/json",
|
||||||
|
// Authorization: `Bearer ${driftToken}`,
|
||||||
|
// "x-secret-key": process.env.SECRET_KEY || ""
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
if (!posts.ok) {
|
||||||
|
return router.push("/signin")
|
||||||
|
}
|
||||||
|
|
||||||
|
const { posts, error, hasMore } = await posts.json()
|
||||||
|
|
||||||
|
return <MyPosts morePosts={hasMore} error={error} posts={posts} />
|
||||||
|
}
|
||||||
@ -1,60 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import clsx from "clsx";
|
|
||||||
import type {
|
|
||||||
ChangeEventHandler,
|
|
||||||
FunctionComponent,
|
|
||||||
PropsWithChildren,
|
|
||||||
} from "react";
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
import React, { useContext, useState, createContext } from "react";
|
|
||||||
import { DEFAULT_THEME, Theme, THEME_COOKIE_NAME } from "./theme";
|
|
||||||
|
|
||||||
const ThemeContext = createContext<Theme | null>(null);
|
|
||||||
|
|
||||||
export function useTheme(): Theme {
|
|
||||||
return useContext(ThemeContext);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props extends PropsWithChildren {
|
|
||||||
defaultTheme: Theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ThemeClientContextProvider: FunctionComponent<Props> = ({
|
|
||||||
defaultTheme,
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const [theme, setTheme] = useState<Theme>(defaultTheme);
|
|
||||||
const onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
|
|
||||||
const value = e.target.value as Theme;
|
|
||||||
setTheme(value);
|
|
||||||
|
|
||||||
if (value === DEFAULT_THEME) {
|
|
||||||
Cookies.remove(THEME_COOKIE_NAME);
|
|
||||||
} else {
|
|
||||||
Cookies.set(THEME_COOKIE_NAME, value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onReset = () => {
|
|
||||||
setTheme(DEFAULT_THEME);
|
|
||||||
Cookies.remove(THEME_COOKIE_NAME);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={clsx(theme === "dark" && "dark")}>
|
|
||||||
<div className="mb-2">
|
|
||||||
<h2 className="mb-2 font-bold text-xl">Theme Switcher</h2>
|
|
||||||
<select value={theme} onChange={onChange} className="mr-2 inline-block">
|
|
||||||
<option value="light">Light</option>
|
|
||||||
<option value="dark">Dark</option>
|
|
||||||
</select>
|
|
||||||
<button className="bg-gray-300 p-2" onClick={onReset}>
|
|
||||||
Reset
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ThemeClientContextProvider;
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { FunctionComponent, PropsWithChildren } from "react";
|
|
||||||
import ThemeClientContextProvider from "./ThemeClientContextProvider";
|
|
||||||
import ThemeServerContextProvider, {
|
|
||||||
useServerTheme,
|
|
||||||
} from "./ThemeServerContextProvider";
|
|
||||||
|
|
||||||
const ThemeProviderWrapper: FunctionComponent<PropsWithChildren> = ({
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const theme = useServerTheme();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemeClientContextProvider defaultTheme={theme}>
|
|
||||||
{children}
|
|
||||||
</ThemeClientContextProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<ThemeServerContextProvider>
|
|
||||||
<ThemeProviderWrapper>{children}</ThemeProviderWrapper>
|
|
||||||
</ThemeServerContextProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ThemeProvider;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import type { FunctionComponent, PropsWithChildren } from "react";
|
|
||||||
// @ts-ignore -- createServerContext is not in @types/react atm
|
|
||||||
import { useContext, createServerContext } from "react";
|
|
||||||
import { cookies } from "next/headers";
|
|
||||||
import { Theme, THEME_COOKIE_NAME } from "./theme";
|
|
||||||
import { DEFAULT_THEME } from "./theme";
|
|
||||||
|
|
||||||
const ThemeContext = createServerContext<Theme | null>(null);
|
|
||||||
|
|
||||||
export function useServerTheme(): Theme {
|
|
||||||
return useContext(ThemeContext);
|
|
||||||
}
|
|
||||||
|
|
||||||
const ThemeServerContextProvider: FunctionComponent<PropsWithChildren> = ({
|
|
||||||
children,
|
|
||||||
}) => {
|
|
||||||
const cookiesList = cookies();
|
|
||||||
const theme = cookiesList.get(THEME_COOKIE_NAME) ?? DEFAULT_THEME;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ThemeServerContextProvider;
|
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { isSignedIn } from "../is-signed-in"
|
||||||
|
|
||||||
|
export const useRedirectIfNotAuthed = (to = '/signin') => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const signedIn = isSignedIn();
|
||||||
|
|
||||||
|
if (!signedIn) {
|
||||||
|
router.push(to);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import { cookies } from "next/headers"
|
||||||
|
|
||||||
|
export const isSignedIn = () => {
|
||||||
|
const cookieList = cookies()
|
||||||
|
return cookieList.has("drift-token") && cookieList.has("drift-userid")
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import prisma from "app/prisma"
|
||||||
|
|
||||||
|
export const getPostsByUser = async (userId: number) => {
|
||||||
|
const posts = await prisma.post.findMany({
|
||||||
|
where: {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return posts
|
||||||
|
}
|
||||||
@ -1,67 +0,0 @@
|
|||||||
import styles from "@styles/Home.module.css"
|
|
||||||
|
|
||||||
import Header from "@components/header"
|
|
||||||
import MyPosts from "@components/my-posts"
|
|
||||||
import cookie from "cookie"
|
|
||||||
import type { GetServerSideProps } from "next"
|
|
||||||
import { Post } from "@lib/types"
|
|
||||||
import { Page } from "@geist-ui/core/dist"
|
|
||||||
|
|
||||||
const Home = ({
|
|
||||||
morePosts,
|
|
||||||
posts,
|
|
||||||
error
|
|
||||||
}: {
|
|
||||||
morePosts: boolean
|
|
||||||
posts: Post[]
|
|
||||||
error: boolean
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<Page className={styles.wrapper}>
|
|
||||||
<Page.Content className={styles.main}>
|
|
||||||
<MyPosts morePosts={morePosts} error={error} posts={posts} />
|
|
||||||
</Page.Content>
|
|
||||||
</Page>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
// get server side props
|
|
||||||
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
|
||||||
const driftToken = cookie.parse(req.headers.cookie || "")[`drift-token`]
|
|
||||||
if (!driftToken) {
|
|
||||||
return {
|
|
||||||
redirect: {
|
|
||||||
destination: "/",
|
|
||||||
permanent: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const posts = await fetch(process.env.API_URL + `/posts/mine`, {
|
|
||||||
method: "GET",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
Authorization: `Bearer ${driftToken}`,
|
|
||||||
"x-secret-key": process.env.SECRET_KEY || ""
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!posts.ok) {
|
|
||||||
return {
|
|
||||||
redirect: {
|
|
||||||
destination: "/",
|
|
||||||
permanent: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await posts.json()
|
|
||||||
return {
|
|
||||||
props: {
|
|
||||||
posts: data.posts,
|
|
||||||
error: posts.status !== 200,
|
|
||||||
morePosts: data.hasMore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Home
|
|
||||||
Loading…
Reference in New Issue