CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: use cookie for theme, redirect post view in server side props

Browse source
This commit is contained in:
Max Leiter 2022-03-21 14:20:20 -07:00
parent e37bd00a13
commit 1c68aa9765
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
12 changed files with 641 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/components/document/formatting-icons/index.tsx
View file

@ -20,7 +20,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
// return { textBefore: '', textAfter: '' }
// }, [textareaRef,])
const handleBoldClick = useCallback((e) => {
const handleBoldClick = useCallback(() => {
if (textareaRef?.current && setText) {
const selectionStart = textareaRef.current.selectionStart
const selectionEnd = textareaRef.current.selectionEnd
@ -37,7 +37,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
}
}, [setText, textareaRef])
const handleItalicClick = useCallback((e) => {
const handleItalicClick = useCallback(() => {
if (textareaRef?.current && setText) {
const selectionStart = textareaRef.current.selectionStart
const selectionEnd = textareaRef.current.selectionEnd
@ -52,7 +52,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
}
}, [setText, textareaRef])
const handleLinkClick = useCallback((e) => {
const handleLinkClick = useCallback(() => {
if (textareaRef?.current && setText) {
const selectionStart = textareaRef.current.selectionStart
const selectionEnd = textareaRef.current.selectionEnd
@ -73,7 +73,7 @@ const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject<HTM
}
}, [setText, textareaRef])
const handleImageClick = useCallback((e) => {
const handleImageClick = useCallback(() => {
if (textareaRef?.current && setText) {
const selectionStart = textareaRef.current.selectionStart
const selectionEnd = textareaRef.current.selectionEnd

4
client/components/header/controls.tsx
View file

@ -5,12 +5,12 @@ import { Select } from '@geist-ui/core'
// import { useAllThemes, useTheme } from '@geist-ui/core'
import styles from './header.module.css'
import { ThemeProps } from '@lib/types'
import Cookies from 'js-cookie'
const Controls = ({ changeTheme, theme }: ThemeProps) => {
const switchThemes = (type: string | string[]) => {
changeTheme()
if (typeof window === 'undefined' || !window.localStorage) return
window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
Cookies.set('drift-theme', Array.isArray(type) ? type[0] : type)
}

9
client/components/new-post/drag-and-drop/index.tsx
View file

@ -1,10 +1,9 @@
import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
import { memo, useCallback, useEffect } from 'react'
import { Text, useTheme, useToasts } from '@geist-ui/core'
import { memo } from 'react'
import { useDropzone } from 'react-dropzone'
import styles from './drag-and-drop.module.css'
import { Document } from '../'
import type { Document } from '@lib/types'
import generateUUID from '@lib/generate-uuid'
import { XCircle } from '@geist-ui/icons'
const allowedFileTypes = [
'application/json',
'application/x-javascript',
@ -99,7 +98,7 @@ function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
const { setToast } = useToasts()
const onDrop = async (acceptedFiles: File[]) => {
const newDocs = await Promise.all(acceptedFiles.map((file) => {
return new Promise<Document>((resolve, reject) => {
return new Promise<Document>((resolve) => {
const reader = new FileReader()
reader.onabort = () => setToast({ text: 'File reading was aborted', type: 'error' })

2
client/components/new-post/index.tsx
View file

@ -1,4 +1,4 @@
import { Button, ButtonDropdown, Input, Modal, Note, useModal, useToasts } from '@geist-ui/core'
import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
import { useRouter } from 'next/router';
import { useCallback, useState } from 'react'
import generateUUID from '@lib/generate-uuid';

2
client/components/new-post/title/index.tsx
View file

@ -1,4 +1,4 @@
import { ChangeEvent, memo } from 'react'
import { memo } from 'react'
import { Text, Input } from '@geist-ui/core'
import ShiftBy from '@components/shift-by'
import styles from '../post.module.css'

4
client/components/visibility-badge/index.tsx
View file

@ -1,8 +1,8 @@
import { Badge } from "@geist-ui/core"
import { Visibility } from "@lib/types"
import { PostVisibility } from "@lib/types"
type Props = {
visibility: Visibility
visibility: PostVisibility
}
const VisibilityBadge = ({ visibility }: Props) => {

1
client/next.config.js
View file

@ -6,7 +6,6 @@ const nextConfig = {
reactStrictMode: true,
experimental: {
outputStandalone: true,
optimizeCss: true,
},
async rewrites() {
return [

8
client/package.json
View file

@ -16,11 +16,11 @@
"@types/js-cookie": "^3.0.1",
"client-zip": "^2.0.0",
"comlink": "^4.3.1",
"critters": "^0.0.16",
"cookie": "^0.4.2",
"dotenv": "^16.0.0",
"js-cookie": "^3.0.1",
"next": "^12.1.1-canary.15",
"prism-react-renderer": "^1.3.1",
"prismjs": "^1.27.0",
"react": "17.0.2",
"react-debounce-render": "^8.0.2",
@ -32,8 +32,8 @@
"react-syntax-highlighter-virtualized-renderer": "^1.1.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-katex": "^6.0.2",
"rehype-remark": "^9.1.2",
"rehype-slug": "^5.0.1",
"rehype-stringify": "^9.0.3",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"swr": "^1.2.2"
@ -41,9 +41,11 @@
"devDependencies": {
"@types/node": "17.0.21",
"@types/react": "17.0.39",
"@types/react-dom": "^17.0.14",
"@types/react-syntax-highlighter": "^13.5.2",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"typescript": "4.6.2"
"typescript": "4.6.2",
"typescript-plugin-css-modules": "^3.4.0"
}
}

14
client/pages/_app.tsx
View file

@ -8,12 +8,7 @@ import 'react-loading-skeleton/dist/skeleton.css'
import { SkeletonTheme } from 'react-loading-skeleton';
import Head from 'next/head';
import { ThemeProps } from '@lib/types';
export type PostProps = {
renderedPost: any | null, // Still don't have an official data type for posts
theme: "light" | "dark" | string,
changeTheme: () => void
}
import Cookies from 'js-cookie';
type AppProps<P = any> = {
pageProps: P;
@ -22,11 +17,10 @@ type AppProps<P = any> = {
export type DriftProps = ThemeProps
function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
const theme = useTheme();
const [themeType, setThemeType] = useSharedState<string>('theme', Cookies.get('drift-theme') || 'light')
useEffect(() => {
if (typeof window === 'undefined' || !window.localStorage) return
const storedTheme = window.localStorage.getItem('drift-theme')
const storedTheme = Cookies.get('drift-theme')
if (storedTheme) setThemeType(storedTheme)
// TODO: useReducer?
}, [setThemeType, themeType])

143
client/pages/post/[id].tsx
View file

@ -1,45 +1,36 @@
import { Button, Page, Text } from "@geist-ui/core";
import Skeleton from 'react-loading-skeleton';
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Document from '../../components/document'
import Header from "../../components/header";
import VisibilityBadge from "../../components/visibility-badge";
import { PostProps } from "../_app";
import PageSeo from "components/page-seo";
import styles from './styles.module.css';
import Cookies from "js-cookie";
import cookie from "cookie";
import { GetServerSideProps } from "next";
import { PostVisibility, ThemeProps } from "@lib/types";
type File = {
id: string
title: string
content: string
}
const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
const [post, setPost] = useState(renderedPost);
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState<string>()
type Files = File[]
export type PostProps = ThemeProps & {
post: {
id: string
title: string
description: string
visibility: PostVisibility
files: Files
}
}
const Post = ({ post, theme, changeTheme }: PostProps) => {
const router = useRouter();
useEffect(() => {
async function fetchPost() {
setIsLoading(true);
if (renderedPost) {
setPost(renderedPost)
setIsLoading(false)
return;
}
if (!Cookies.get('drift-token')) {
router.push('/signin');
} else {
setError('Something went wrong fetching the post');
}
}
fetchPost()
}, [router, router.query.id])
const download = async () => {
const clientZip = require("client-zip")
@ -59,78 +50,88 @@ const Post = ({renderedPost, theme, changeTheme}: PostProps) => {
return (
<Page width={"100%"}>
{!isLoading && (
<PageSeo
title={`${post.title} - Drift`}
description={post.description}
isPrivate={post.visibility === 'private'}
/>
)}
<PageSeo
title={`${post.title} - Drift`}
description={post.description}
isPrivate={post.visibility !== 'public'}
/>
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="auto">
{/* {!isLoading && <PostFileExplorer files={post.files} />} */}
{error && <Text type="error">{error}</Text>}
{!error && isLoading && <><Text h2><Skeleton width={400} /></Text>
<Document skeleton={true} />
</>}
{!isLoading && post && <>
<div className={styles.header}>
<div className={styles.titleAndBadge}>
<Text h2>{post.title}</Text>
<span><VisibilityBadge visibility={post.visibility} /></span>
</div>
<Button auto onClick={download}>
Download as ZIP archive
</Button>
<div className={styles.header}>
<div className={styles.titleAndBadge}>
<Text h2>{post.title}</Text>
<span><VisibilityBadge visibility={post.visibility} /></span>
</div>
{post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
<Document
key={id}
id={id}
content={content}
title={title}
editable={false}
initialTab={'preview'}
/>
))}
</>}
<Button auto onClick={download}>
Download as ZIP archive
</Button>
</div>
{post.files.map(({ id, content, title }: { id: any, content: string, title: string }) => (
<Document
key={id}
id={id}
content={content}
title={title}
editable={false}
initialTab={'preview'}
/>
))}
</Page.Content>
</Page >
)
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const headers = context.req.headers
const host = headers.host
const driftToken = cookie.parse(headers.cookie || '')[`drift-token`]
let driftTheme = cookie.parse(headers.cookie || '')[`drift-theme`]
if (driftTheme !== "light" && driftTheme !== "dark") {
driftTheme = "light"
}
const headers = context.req.headers;
const host = headers.host;
const driftToken = cookie.parse(headers.cookie || '')[`drift-token`];
let post;
if (context.query.id) {
post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
const post = await fetch('http://' + host + `/server-api/posts/${context.query.id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${driftToken}`
}
});
})
if (!post.ok || post.status !== 200) {
return {
redirect: {
destination: '/',
permanent: false,
},
}
}
try {
post = await post.json();
const json = await post.json();
const maxAge = 60 * 60 * 24 * 365;
context.res.setHeader(
'Cache-Control',
`${json.visibility === "public" ? "public" : "private"}, s-maxage=${maxAge}, max-age=${maxAge}`
)
return {
props: {
post: json
}
}
} catch (e) {
console.log(e);
post = null;
console.log(e)
}
}
return {
props: {
renderedPost: post
post: null
}
}
}

1
client/tsconfig.json
View file

@ -1,5 +1,6 @@
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }],
"target": "es2020",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,

677
client/yarn.lock
View file

File diff suppressed because it is too large Load diff