From 7f50654da46fccc0f832f9ec3cc2138bcbd06627 Mon Sep 17 00:00:00 2001 From: Samuel Date: Sun, 13 Mar 2022 01:13:35 -0300 Subject: [PATCH 1/2] fix: sign-in/up and add head component --- client/components/auth/index.tsx | 69 ++++++++++++++++------------ client/components/page-seo/index.tsx | 27 +++++++++++ client/pages/_app.tsx | 1 + client/pages/index.tsx | 11 ++--- client/pages/mine.tsx | 5 -- client/pages/new.tsx | 6 +-- client/pages/post/[id].tsx | 15 +++--- client/pages/signin.tsx | 8 ++-- client/pages/signup.tsx | 12 ++--- client/tsconfig.json | 3 +- 10 files changed, 94 insertions(+), 63 deletions(-) create mode 100644 client/components/page-seo/index.tsx diff --git a/client/components/auth/index.tsx b/client/components/auth/index.tsx index d56f991b..d619f2ae 100644 --- a/client/components/auth/index.tsx +++ b/client/components/auth/index.tsx @@ -6,23 +6,32 @@ import Link from '../Link' const Auth = ({ page }: { page: "signup" | "signin" }) => { const router = useRouter(); + const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const signingIn = page === 'signin' - const handleSubmit = async (e: FormEvent) => { + const NO_EMPTY_SPACE_REGEX = /^\S*$/; - const handleJson = (json: any) => { - if (json.error) { - setError(json.error.message) - } else { - localStorage.setItem('drift-token', json.token) - localStorage.setItem('drift-userid', json.userId) - router.push('/') - } - } + const handleJson = (json: any) => { + if (json.error) return setError(json.error.message) + + localStorage.setItem('drift-token', json.token) + localStorage.setItem('drift-userid', json.userId) + router.push('/') + } + + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault() + + if (!username.match(NO_EMPTY_SPACE_REGEX)) + return setError("Username can't be empty") + + if (!password.match(NO_EMPTY_SPACE_REGEX)) + return setError("Password can't be empty") const reqOpts = { method: 'POST', @@ -32,23 +41,16 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => { body: JSON.stringify({ username, password }) } - e.preventDefault() - if (signingIn) { - try { - const resp = await fetch('/server-api/auth/signin', reqOpts) - const json = await resp.json() - handleJson(json) - } catch (err: any) { - setError(err.message || "Something went wrong") - } - } else { - try { - const resp = await fetch('/server-api/auth/signup', reqOpts) - const json = await resp.json() - handleJson(json) - } catch (err: any) { - setError(err.message || "Something went wrong") - } + try { + const signUrl = signingIn ? '/server-api/auth/signin' : '/server-api/auth/signup'; + const resp = await fetch(signUrl, reqOpts); + const json = await resp.json(); + + if (!resp.ok) throw new Error(); + + handleJson(json) + } catch (err: any) { + setError(err.message || "Something went wrong") } } @@ -86,8 +88,17 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
- {signingIn && Don't have an account? Sign up} - {!signingIn && Already have an account? Sign in} + {signingIn ? ( + + Don't have an account?{" "} + Sign up + + ) : ( + + Already have an account?{" "} + Sign in + + )}
{error && {error}} diff --git a/client/components/page-seo/index.tsx b/client/components/page-seo/index.tsx new file mode 100644 index 00000000..1bc53d0c --- /dev/null +++ b/client/components/page-seo/index.tsx @@ -0,0 +1,27 @@ +import Head from "next/head"; +import React from "react"; + +type PageSeoProps = { + title?: string; + description?: string; + isLoading?: boolean; + isPrivate?: boolean +}; + +const PageSeo = ({ + title = 'Drift', + description = "A self-hostable clone of GitHub Gist", + isPrivate = false +}: PageSeoProps) => { + + return ( + <> + + {title} + {!isPrivate && } + + + ); +}; + +export default PageSeo; diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index 79c75b65..1adcb5a8 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -58,6 +58,7 @@ function MyApp({ Component, pageProps }: AppProps) { + Drift diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 32b208aa..6ff94f4b 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -1,4 +1,3 @@ -import Head from 'next/head' import styles from '../styles/Home.module.css' import { Page, Spacer, Text } from '@geist-ui/core' @@ -7,6 +6,7 @@ import { ThemeProps } from './_app' import Document from '../components/document' import Image from 'next/image' import ShiftBy from '../components/shift-by' +import PageSeo from 'components/page-seo' export function getStaticProps() { const introDoc = process.env.WELCOME_CONTENT @@ -25,10 +25,9 @@ type Props = ThemeProps & { const Home = ({ theme, changeTheme, introContent }: Props) => { return ( - - Drift - - + + +
@@ -45,7 +44,7 @@ const Home = ({ theme, changeTheme, introContent }: Props) => { initialTab={`preview`} /> - + ) } diff --git a/client/pages/mine.tsx b/client/pages/mine.tsx index 34c0fc10..c258b17e 100644 --- a/client/pages/mine.tsx +++ b/client/pages/mine.tsx @@ -1,4 +1,3 @@ -import Head from 'next/head' import styles from '../styles/Home.module.css' import { Page } from '@geist-ui/core' @@ -8,10 +7,6 @@ import MyPosts from '../components/my-posts' const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => { return ( - - Drift - -
diff --git a/client/pages/new.tsx b/client/pages/new.tsx index 8a7f0b63..56dc4c47 100644 --- a/client/pages/new.tsx +++ b/client/pages/new.tsx @@ -1,4 +1,3 @@ -import Head from 'next/head' import styles from '../styles/Home.module.css' import NewPost from '../components/new-post' import { Page } from '@geist-ui/core' @@ -6,6 +5,7 @@ import useSignedIn from '../lib/hooks/use-signed-in' import Header from '../components/header' import { ThemeProps } from './_app' import { useRouter } from 'next/router' +import PageSeo from 'components/page-seo' const Home = ({ theme, changeTheme }: ThemeProps) => { const router = useRouter() @@ -15,9 +15,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => { } return ( - - Drift - +
diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index 5a868903..fba808da 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -7,7 +7,7 @@ import Document from '../../components/document' import Header from "../../components/header"; import VisibilityBadge from "../../components/visibility-badge"; import { ThemeProps } from "../_app"; -import Head from "next/head"; +import PageSeo from "components/page-seo"; const Post = ({ theme, changeTheme }: ThemeProps) => { const [post, setPost] = useState() @@ -65,11 +65,14 @@ const Post = ({ theme, changeTheme }: ThemeProps) => { return ( - - {isLoading && loading - Drift} - {!isLoading && {post.title} - Drift} - {!isLoading && post.visibility !== 'private' && } - + {!isLoading && ( + + )} +
diff --git a/client/pages/signin.tsx b/client/pages/signin.tsx index 8e54f9de..4b4e4845 100644 --- a/client/pages/signin.tsx +++ b/client/pages/signin.tsx @@ -1,15 +1,13 @@ import { Page } from "@geist-ui/core"; -import Head from 'next/head' +import PageSeo from "components/page-seo"; import Auth from "../components/auth"; import Header from "../components/header"; import { ThemeProps } from "./_app"; const SignIn = ({ theme, changeTheme }: ThemeProps) => ( - - Drift - Sign In - - + +
diff --git a/client/pages/signup.tsx b/client/pages/signup.tsx index 0af0413d..e57c12c4 100644 --- a/client/pages/signup.tsx +++ b/client/pages/signup.tsx @@ -1,15 +1,13 @@ import { Page } from "@geist-ui/core"; -import Head from "next/head"; -import Auth from "../components/auth"; -import Header from "../components/header"; +import Auth from "components/auth"; +import Header from "components/header"; +import PageSeo from 'components/page-seo'; import { ThemeProps } from "./_app"; const SignUp = ({ theme, changeTheme }: ThemeProps) => ( - - Drift - Sign Up - - + +
diff --git a/client/tsconfig.json b/client/tsconfig.json index 99710e85..38f94f59 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -13,7 +13,8 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "incremental": true + "incremental": true, + "baseUrl": "./" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] From 0e0c4e36ac6f4b3836698231aefdf6b1441941d0 Mon Sep 17 00:00:00 2001 From: Samuel Date: Sun, 13 Mar 2022 01:40:28 -0300 Subject: [PATCH 2/2] add path alias --- client/components/new-post/drag-and-drop/index.tsx | 2 +- client/components/new-post/index.tsx | 2 +- client/components/new-post/title/index.tsx | 2 +- client/components/post-list/list-item.tsx | 2 +- client/components/preview/react-markdown-preview.tsx | 2 +- client/pages/_app.tsx | 4 ++-- client/pages/index.tsx | 10 +++++----- client/pages/mine.tsx | 6 +++--- client/pages/new.tsx | 10 +++++----- client/pages/signin.tsx | 6 +++--- client/pages/signup.tsx | 6 +++--- client/tsconfig.json | 7 ++++++- 12 files changed, 32 insertions(+), 27 deletions(-) diff --git a/client/components/new-post/drag-and-drop/index.tsx b/client/components/new-post/drag-and-drop/index.tsx index 770d99c3..eaaab5b6 100644 --- a/client/components/new-post/drag-and-drop/index.tsx +++ b/client/components/new-post/drag-and-drop/index.tsx @@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react' import { useDropzone } from 'react-dropzone' import styles from './drag-and-drop.module.css' import { Document } from '../' -import generateUUID from '../../../lib/generate-uuid' +import generateUUID from '@lib/generate-uuid' import { XCircle } from '@geist-ui/icons' const allowedFileTypes = [ 'application/json', diff --git a/client/components/new-post/index.tsx b/client/components/new-post/index.tsx index e26b47d6..203839c9 100644 --- a/client/components/new-post/index.tsx +++ b/client/components/new-post/index.tsx @@ -1,7 +1,7 @@ import { Button, ButtonDropdown, useToasts } from '@geist-ui/core' import { useRouter } from 'next/router'; import { useCallback, useState } from 'react' -import generateUUID from '../../lib/generate-uuid'; +import generateUUID from '@lib/generate-uuid'; import Document from '../document'; import FileDropzone from './drag-and-drop'; import styles from './post.module.css' diff --git a/client/components/new-post/title/index.tsx b/client/components/new-post/title/index.tsx index da733bda..3ad765ab 100644 --- a/client/components/new-post/title/index.tsx +++ b/client/components/new-post/title/index.tsx @@ -1,6 +1,6 @@ import { Text, Input } from '@geist-ui/core' import { memo } from 'react' -import ShiftBy from '../../shift-by' +import ShiftBy from '@components/shift-by' import styles from '../post.module.css' const titlePlaceholders = [ diff --git a/client/components/post-list/list-item.tsx b/client/components/post-list/list-item.tsx index 121eda95..3e9e8d26 100644 --- a/client/components/post-list/list-item.tsx +++ b/client/components/post-list/list-item.tsx @@ -1,7 +1,7 @@ import { Card, Spacer, Grid, Divider, Link, Text, Input, Tooltip } from "@geist-ui/core" import NextLink from "next/link" import { useEffect, useMemo, useState } from "react" -import timeAgo from "../../lib/time-ago" +import timeAgo from "@lib/time-ago" import ShiftBy from "../shift-by" import VisibilityBadge from "../visibility-badge" diff --git a/client/components/preview/react-markdown-preview.tsx b/client/components/preview/react-markdown-preview.tsx index de6b5883..f1113370 100644 --- a/client/components/preview/react-markdown-preview.tsx +++ b/client/components/preview/react-markdown-preview.tsx @@ -6,7 +6,7 @@ import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import a11yEmoji from '@fec/remark-a11y-emoji'; import styles from './preview.module.css' import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism' -import useSharedState from "../../lib/hooks/use-shared-state"; +import useSharedState from "@lib/hooks/use-shared-state"; type Props = { content: string | undefined diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index 1adcb5a8..91888263 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -1,8 +1,8 @@ -import '../styles/globals.css' +import '@styles/globals.css' import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core' import { useEffect, useMemo, useState } from 'react' import type { AppProps as NextAppProps } from "next/app"; -import useSharedState from '../lib/hooks/use-shared-state'; +import useSharedState from '@lib/hooks/use-shared-state'; import 'react-loading-skeleton/dist/skeleton.css' import { SkeletonTheme } from 'react-loading-skeleton'; diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 6ff94f4b..9d59334f 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -1,12 +1,12 @@ -import styles from '../styles/Home.module.css' +import styles from '@styles/Home.module.css' import { Page, Spacer, Text } from '@geist-ui/core' -import Header from '../components/header' +import Header from '@components/header' import { ThemeProps } from './_app' -import Document from '../components/document' +import Document from '@components/document' import Image from 'next/image' -import ShiftBy from '../components/shift-by' -import PageSeo from 'components/page-seo' +import ShiftBy from '@components/shift-by' +import PageSeo from '@components/page-seo' export function getStaticProps() { const introDoc = process.env.WELCOME_CONTENT diff --git a/client/pages/mine.tsx b/client/pages/mine.tsx index c258b17e..b273d548 100644 --- a/client/pages/mine.tsx +++ b/client/pages/mine.tsx @@ -1,8 +1,8 @@ -import styles from '../styles/Home.module.css' +import styles from '@styles/Home.module.css' import { Page } from '@geist-ui/core' -import Header from '../components/header' -import MyPosts from '../components/my-posts' +import Header from '@components/header' +import MyPosts from '@components/my-posts' const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => { return ( diff --git a/client/pages/new.tsx b/client/pages/new.tsx index 56dc4c47..9c66928b 100644 --- a/client/pages/new.tsx +++ b/client/pages/new.tsx @@ -1,11 +1,11 @@ -import styles from '../styles/Home.module.css' -import NewPost from '../components/new-post' +import styles from '@styles/Home.module.css' +import NewPost from '@components/new-post' import { Page } from '@geist-ui/core' -import useSignedIn from '../lib/hooks/use-signed-in' -import Header from '../components/header' +import useSignedIn from '@lib/hooks/use-signed-in' +import Header from '@components/header' import { ThemeProps } from './_app' import { useRouter } from 'next/router' -import PageSeo from 'components/page-seo' +import PageSeo from '@components/page-seo' const Home = ({ theme, changeTheme }: ThemeProps) => { const router = useRouter() diff --git a/client/pages/signin.tsx b/client/pages/signin.tsx index 4b4e4845..defc7d5b 100644 --- a/client/pages/signin.tsx +++ b/client/pages/signin.tsx @@ -1,7 +1,7 @@ import { Page } from "@geist-ui/core"; -import PageSeo from "components/page-seo"; -import Auth from "../components/auth"; -import Header from "../components/header"; +import PageSeo from "@components/page-seo"; +import Auth from "@components/auth"; +import Header from "@components/header"; import { ThemeProps } from "./_app"; const SignIn = ({ theme, changeTheme }: ThemeProps) => ( diff --git a/client/pages/signup.tsx b/client/pages/signup.tsx index e57c12c4..3628ef6d 100644 --- a/client/pages/signup.tsx +++ b/client/pages/signup.tsx @@ -1,7 +1,7 @@ import { Page } from "@geist-ui/core"; -import Auth from "components/auth"; -import Header from "components/header"; -import PageSeo from 'components/page-seo'; +import Auth from "@components/auth"; +import Header from "@components/header"; +import PageSeo from '@components/page-seo'; import { ThemeProps } from "./_app"; const SignUp = ({ theme, changeTheme }: ThemeProps) => ( diff --git a/client/tsconfig.json b/client/tsconfig.json index 38f94f59..759858c9 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -14,7 +14,12 @@ "isolatedModules": true, "jsx": "preserve", "incremental": true, - "baseUrl": "./" + "baseUrl": ".", + "paths": { + "@components/*": ["components/*"], + "@lib/*": ["lib/*"], + "@styles/*": ["styles/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]