diff --git a/client/components/Link.tsx b/client/components/Link.tsx index a57ed0c7..5bc8772f 100644 --- a/client/components/Link.tsx +++ b/client/components/Link.tsx @@ -5,7 +5,7 @@ const Link = (props: LinkProps) => { const { basePath } = useRouter(); const propHrefWithoutLeadingSlash = props.href && props.href.startsWith("/") ? props.href.substr(1) : props.href; const href = basePath ? `${basePath}/${propHrefWithoutLeadingSlash}` : props.href; - console.log(href) + (href) return } diff --git a/client/components/header/header.module.css b/client/components/header/header.module.css new file mode 100644 index 00000000..0a6cd1e8 --- /dev/null +++ b/client/components/header/header.module.css @@ -0,0 +1,33 @@ +.tabs { + flex: 1 1; + padding: 0 var(--gap); +} + +.tabs .current { + border-bottom: 2px solid initial; +} + +.tabs :global(.content) { + display: none; +} + +@media only screen and (max-width: 600px) { + .tabs { + display: none; + } +} + +.controls { + flex: 1 1; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.controls :global(.menu-toggle) { + display: flex; + align-items: center; + min-width: 40px; + height: 40px; + padding: 0; +} diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx index de0d152e..c901a14c 100644 --- a/client/components/header/index.tsx +++ b/client/components/header/index.tsx @@ -1,34 +1,161 @@ -import { Page, ButtonGroup, Button } from "@geist-ui/core"; -import { Moon, Sun } from "@geist-ui/icons"; +import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading } from "@geist-ui/core"; +import { Moon, Sun, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon } from "@geist-ui/icons"; import { DriftProps } from "../../pages/_app"; -import ShiftBy from "../shift-by"; -import Link from '../Link' +import { useEffect, useMemo, useState } from "react"; +import styles from './header.module.css'; +import { useRouter } from "next/router"; +import useSignedIn from "../../lib/hooks/use-signed-in"; -const Header = ({ theme, changeTheme }: DriftProps) => { - return ( - - - - - - - + router.push("/signin"); + } + }, + icon: , + condition: isSignedIn + }, + { + name: "Sign in", + href: "/signin", + icon: , + condition: !isSignedIn + }, + { + name: "Sign up", + href: "/signup", + icon: , + condition: !isSignedIn + } + ], [isSignedIn, router]) + + useEffect(() => { + setSelectedTab(pages.find((page) => { + if (page.href && page.href === router.asPath) { + return true + } + })?.href) + }, [pages, router, router.pathname]) + + if (isLoading) { + return + + + } + + return ( + +
+ { + const nameMatch = pages.find(page => page.name === tab) + if (nameMatch?.action) { + nameMatch.action() + } else { + router.push(`${tab}`) + } + }}> + {pages.map((tab, index) => { + console.log(tab, tab.condition) + if (tab.condition) + return {tab.icon} {tab.name}} + value={tab.href || tab.name} + key={`${tab.name}-${index}`} + /> + else return null + })} + +
+
+ {isMobile ? ( + + ) : ( + // + <> + )} +
) } -export default Header \ No newline at end of file +export default Header + + +// {/* {/* +// +// +// +// +// * /} \ No newline at end of file diff --git a/client/components/unauthenticated-header/index.tsx b/client/components/unauthenticated-header/index.tsx deleted file mode 100644 index 5f80882d..00000000 --- a/client/components/unauthenticated-header/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Page, ButtonGroup, Button } from "@geist-ui/core"; -import { Moon, Sun } from "@geist-ui/icons"; -import { DriftProps } from "../../pages/_app"; -import ShiftBy from "../shift-by"; -import Link from '../Link' - -const UnauthenticatedHeader = ({ theme, changeTheme }: DriftProps) => { - return ( - - - - - - - - ) -} - -export default UnauthenticatedHeader \ No newline at end of file diff --git a/client/lib/hooks/use-signed-in.ts b/client/lib/hooks/use-signed-in.ts index b84d7ae0..2241388b 100644 --- a/client/lib/hooks/use-signed-in.ts +++ b/client/lib/hooks/use-signed-in.ts @@ -5,7 +5,6 @@ const useSignedIn = ({ redirectIfNotAuthed = false }: { redirectIfNotAuthed?: bo const [isSignedIn, setSignedIn] = useState(false) const [isLoading, setLoading] = useState(true) const router = useRouter(); - console.log(isSignedIn, isLoading, redirectIfNotAuthed) if (redirectIfNotAuthed && !isLoading && isSignedIn === false) { router.push('/signin') } diff --git a/client/package.json b/client/package.json index a4a1afa6..572c42db 100644 --- a/client/package.json +++ b/client/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev --port 3001", "build": "next build", "start": "next start", "lint": "next lint" diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx index 54d7d285..c0ebc473 100644 --- a/client/pages/_app.tsx +++ b/client/pages/_app.tsx @@ -16,10 +16,11 @@ export type DriftProps = ThemeProps function MyApp({ Component, pageProps }: AppProps) { const [themeType, setThemeType] = useState(typeof window !== 'undefined' ? localStorage.getItem('drift-theme') || 'light' : 'light') + const changeTheme = () => { const newTheme = themeType === 'dark' ? 'light' : 'dark' localStorage.setItem('drift-theme', newTheme) - setThemeType(newTheme) + setThemeType(last => (last === 'dark' ? 'light' : 'dark')) } return ( diff --git a/client/pages/index.tsx b/client/pages/index.tsx new file mode 100644 index 00000000..be8cfa17 --- /dev/null +++ b/client/pages/index.tsx @@ -0,0 +1,42 @@ +import Head from 'next/head' +import styles from '../styles/Home.module.css' +import { Page } from '@geist-ui/core' + +import Header from '../components/header' +import { ThemeProps } from './_app' +import Document from '../components/document' +const Home = ({ theme, changeTheme }: ThemeProps) => { + return ( + + + Drift + + + + +
+ + + + + + + ) +} + +export default Home diff --git a/client/pages/mine.tsx b/client/pages/mine.tsx index b17ef5ce..ba70a28a 100644 --- a/client/pages/mine.tsx +++ b/client/pages/mine.tsx @@ -3,7 +3,6 @@ import styles from '../styles/Home.module.css' import { Page } from '@geist-ui/core' import Header from '../components/header' -import PostList from '../components/post-list' import useSignedIn from '../lib/hooks/use-signed-in' import { Loader } from '@geist-ui/icons' import MyPosts from '../components/my-posts' diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx index 5a99b977..02adabe8 100644 --- a/client/pages/post/[id].tsx +++ b/client/pages/post/[id].tsx @@ -3,7 +3,6 @@ import { useRouter } from "next/router"; import { useCallback, useEffect, useState } from "react"; import Document from '../../components/document' import Header from "../../components/header"; -import UnauthenticatedHeader from "../../components/unauthenticated-header"; import VisibilityBadge from "../../components/visibility-badge"; import { ThemeProps } from "../_app"; @@ -44,18 +43,10 @@ const Post = ({ theme, changeTheme }: ThemeProps) => { fetchPost() }, [router, router.query.id]) - const token = useCallback(() => { - if (typeof window !== "undefined") { - return localStorage.getItem("drift-token") - } else { - return "" - } - }, []) return ( - {token() &&
} - {!token() && } +
{error && {error}} diff --git a/client/pages/signin.tsx b/client/pages/signin.tsx index 83bc904f..e5d51f0e 100644 --- a/client/pages/signin.tsx +++ b/client/pages/signin.tsx @@ -1,12 +1,12 @@ import { Page } from "@geist-ui/core"; import Auth from "../components/auth"; -import UnauthenticatedHeader from "../components/unauthenticated-header"; +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 cef14ffe..c5b59f34 100644 --- a/client/pages/signup.tsx +++ b/client/pages/signup.tsx @@ -1,12 +1,12 @@ import { Page } from "@geist-ui/core"; import Auth from "../components/auth"; -import UnauthenticatedHeader from "../components/unauthenticated-header"; +import Header from "../components/header"; import { ThemeProps } from "./_app"; const SignUp = ({ theme, changeTheme }: ThemeProps) => ( - +
diff --git a/client/styles/globals.css b/client/styles/globals.css index 37031eae..ffeab85f 100644 --- a/client/styles/globals.css +++ b/client/styles/globals.css @@ -1,5 +1,6 @@ :root { --main-content-width: 800px; + --page-nav-height: 60px; --gap: 8px; --gap-half: calc(var(--gap) / 2); --gap-double: calc(var(--gap) * 2); diff --git a/server/src/routes/posts.ts b/server/src/routes/posts.ts index 7dda61f3..84d8f681 100644 --- a/server/src/routes/posts.ts +++ b/server/src/routes/posts.ts @@ -33,7 +33,6 @@ posts.post('/create', jwt, async (req, res, next) => { }) await newPost.save() - console.log("UserId", req.body.userId) await newPost.$add('users', req.body.userId); const newFiles = await Promise.all(req.body.files.map(async (file) => { // Establish a "file" for each file in the request @@ -50,7 +49,6 @@ posts.post('/create', jwt, async (req, res, next) => { })) await Promise.all(newFiles.map((file) => { - console.log("FileId", file.id) newPost.$add("files", file.id); newPost.save(); })) @@ -81,7 +79,6 @@ posts.get("/:id", async (req: UserJwtRequest, res, next) => { ] }) - console.log(post) if (post?.visibility === 'public' || post?.visibility === 'unlisted') { res.json(post); } else { diff --git a/server/src/routes/users.ts b/server/src/routes/users.ts index 798ce191..a76c99a0 100644 --- a/server/src/routes/users.ts +++ b/server/src/routes/users.ts @@ -66,7 +66,6 @@ users.post('/signup', async (req, res, next) => { } const created_user = await User.create(user); - console.log(user) const token = generateAccessToken(created_user.id); @@ -86,7 +85,7 @@ users.post('/login', async (req, res, next) => { if (!user) { throw new Error("User does not exist"); } - console.log(user) + const password_valid = await compare(req.body.password, user.password); if (password_valid) { const token = generateAccessToken(user.id);