diff --git a/client/components/admin/action-dropdown/index.tsx b/client/components/admin/action-dropdown/index.tsx index 48c57335..41516896 100644 --- a/client/components/admin/action-dropdown/index.tsx +++ b/client/components/admin/action-dropdown/index.tsx @@ -2,42 +2,37 @@ import { Popover, Button } from "@geist-ui/core" import { MoreVertical } from "@geist-ui/icons" type Action = { - title: string - onClick: () => void + title: string + onClick: () => void } const ActionDropdown = ({ - title = "Actions", - actions, - showTitle = false, + title = "Actions", + actions, + showTitle = false }: { - title?: string, - showTitle?: boolean, - actions: Action[] + title?: string + showTitle?: boolean + actions: Action[] }) => { - return ( - - {showTitle && - {title} - } - {actions.map(action => ( - - {action.title} - - ))} - - } - hideArrow - > - - - ) + return ( + + {showTitle && {title}} + {actions.map((action) => ( + + {action.title} + + ))} + + } + hideArrow + > + + + ) } -export default ActionDropdown \ No newline at end of file +export default ActionDropdown diff --git a/client/components/admin/post-table.tsx b/client/components/admin/post-table.tsx index c66f99ea..6bbb52d1 100644 --- a/client/components/admin/post-table.tsx +++ b/client/components/admin/post-table.tsx @@ -35,8 +35,8 @@ const PostTable = () => { visibility: post.visibility, size: post.files ? byteToMB( - post.files.reduce((acc, file) => acc + file.html.length, 0) - ) + post.files.reduce((acc, file) => acc + file.html.length, 0) + ) : 0, actions: "" } @@ -109,14 +109,14 @@ const PostTable = () => { dataIndex: "", key: "actions", width: 50, - render(post: Post) { + render() { return ( deletePost(post.id) + onClick: () => deletePost() } ]} /> @@ -128,7 +128,11 @@ const PostTable = () => { return ( {!posts && Loading...} - {posts &&
{posts.length} posts
} + {posts && ( + +
{posts.length} posts
+ + )} {posts && } ) diff --git a/client/components/admin/user-table.tsx b/client/components/admin/user-table.tsx index e8beb710..b931db70 100644 --- a/client/components/admin/user-table.tsx +++ b/client/components/admin/user-table.tsx @@ -131,7 +131,8 @@ const UserTable = () => { actions={[ { title: user.role === "admin" ? "Change role" : "Make admin", - onClick: () => toggleRole(user.id, user.role === "admin" ? "user" : "admin") + onClick: () => + toggleRole(user.id, user.role === "admin" ? "user" : "admin") }, { title: "Delete", @@ -147,7 +148,11 @@ const UserTable = () => { return ( {!users && Loading...} - {users &&
{users.length} users
} + {users && ( + +
{users.length} users
+ + )} {users &&
} ) diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx index 7b5efdef..962d9938 100644 --- a/client/components/header/index.tsx +++ b/client/components/header/index.tsx @@ -89,10 +89,10 @@ const Header = () => { href: "/mine" }, { - name: 'settings', + name: "settings", icon: , - value: 'settings', - href: '/settings' + value: "settings", + href: "/settings" }, { name: "sign out", diff --git a/client/components/new-post/index.tsx b/client/components/new-post/index.tsx index 8814c12c..5148e6ba 100644 --- a/client/components/new-post/index.tsx +++ b/client/components/new-post/index.tsx @@ -1,9 +1,4 @@ -import { - Button, - useToasts, - ButtonDropdown, - Input, -} from "@geist-ui/core" +import { Button, useToasts, ButtonDropdown, Input } from "@geist-ui/core" import { useRouter } from "next/router" import { useCallback, useEffect, useMemo, useRef, useState } from "react" import generateUUID from "@lib/generate-uuid" diff --git a/client/components/post-list/list-item.tsx b/client/components/post-list/list-item.tsx index ccd94275..0ddcf97e 100644 --- a/client/components/post-list/list-item.tsx +++ b/client/components/post-list/list-item.tsx @@ -97,10 +97,7 @@ const ListItem = ({ {post.files?.map((file: File) => { return (
- + {file.title || "Untitled file"}
diff --git a/client/components/post-page/index.tsx b/client/components/post-page/index.tsx index 3ddc8155..fa9c0f55 100644 --- a/client/components/post-page/index.tsx +++ b/client/components/post-page/index.tsx @@ -85,9 +85,7 @@ const PostPage = ({ post: initialPost, isProtected }: Props) => { } const viewParentClick = () => { - router.push( - `/post/${post.parent!.id}` - ) + router.push(`/post/${post.parent!.id}`) } if (isLoading) { @@ -123,11 +121,7 @@ const PostPage = ({ post: initialPost, isProtected }: Props) => { Edit a Copy {post.parent && ( - )} diff --git a/client/components/settings-group/index.tsx b/client/components/settings-group/index.tsx index adf9affd..9325dce9 100644 --- a/client/components/settings-group/index.tsx +++ b/client/components/settings-group/index.tsx @@ -1,24 +1,21 @@ import { Fieldset, Text, Divider } from "@geist-ui/core" -import styles from './settings-group.module.css' +import styles from "./settings-group.module.css" type Props = { - title: string, - children: React.ReactNode | React.ReactNode[], + title: string + children: React.ReactNode | React.ReactNode[] } -const SettingsGroup = ({ - title, - children, -}: Props) => { - return
- - {title} - - - - {children} - -
+const SettingsGroup = ({ title, children }: Props) => { + return ( +
+ + {title} + + + {children} +
+ ) } export default SettingsGroup diff --git a/client/components/settings/index.tsx b/client/components/settings/index.tsx index e6ed9215..9eaf8b20 100644 --- a/client/components/settings/index.tsx +++ b/client/components/settings/index.tsx @@ -3,20 +3,24 @@ import Profile from "./sections/profile" import SettingsGroup from "../settings-group" const SettingsPage = () => { - return (
-

Settings

- - - - - - -
) + return ( +
+

Settings

+ + + + + + +
+ ) } -export default SettingsPage \ No newline at end of file +export default SettingsPage diff --git a/client/components/settings/sections/password.tsx b/client/components/settings/sections/password.tsx index 4f46a3c1..9ef92770 100644 --- a/client/components/settings/sections/password.tsx +++ b/client/components/settings/sections/password.tsx @@ -3,95 +3,132 @@ import Cookies from "js-cookie" import { useState } from "react" const Password = () => { - const [password, setPassword] = useState('') - const [newPassword, setNewPassword] = useState('') - const [confirmPassword, setConfirmPassword] = useState('') + const [password, setPassword] = useState("") + const [newPassword, setNewPassword] = useState("") + const [confirmPassword, setConfirmPassword] = useState("") - const { setToast } = useToasts() + const { setToast } = useToasts() - const handlePasswordChange = (e: React.ChangeEvent) => { - setPassword(e.target.value) - } + const handlePasswordChange = (e: React.ChangeEvent) => { + setPassword(e.target.value) + } - const handleNewPasswordChange = (e: React.ChangeEvent) => { - setNewPassword(e.target.value) - } + const handleNewPasswordChange = (e: React.ChangeEvent) => { + setNewPassword(e.target.value) + } - const handleConfirmPasswordChange = (e: React.ChangeEvent) => { - setConfirmPassword(e.target.value) - } + const handleConfirmPasswordChange = ( + e: React.ChangeEvent + ) => { + setConfirmPassword(e.target.value) + } - const onSubmit = async (e: React.FormEvent) => { - e.preventDefault() - if (!password || !newPassword || !confirmPassword) { - setToast({ - text: "Please fill out all fields", - type: "error", - }) - } + const onSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (!password || !newPassword || !confirmPassword) { + setToast({ + text: "Please fill out all fields", + type: "error" + }) + } - if (newPassword !== confirmPassword) { - setToast({ - text: "New password and confirm password do not match", - type: "error", - }) - } + if (newPassword !== confirmPassword) { + setToast({ + text: "New password and confirm password do not match", + type: "error" + }) + } - const res = await fetch("/server-api/auth/change-password", { - method: "PUT", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${Cookies.get("drift-token")}`, - }, - body: JSON.stringify({ - oldPassword: password, - newPassword, - }), - }) + const res = await fetch("/server-api/auth/change-password", { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${Cookies.get("drift-token")}` + }, + body: JSON.stringify({ + oldPassword: password, + newPassword + }) + }) + if (res.status === 200) { + setToast({ + text: "Password updated successfully", + type: "success" + }) + setPassword("") + setNewPassword("") + setConfirmPassword("") + } else { + const data = await res.json() - if (res.status === 200) { - setToast({ - text: "Password updated successfully", - type: "success", - }) - setPassword('') - setNewPassword('') - setConfirmPassword('') - } else { - const data = await res.json() + setToast({ + text: data.error ?? "Failed to update password", + type: "error" + }) + } + } - setToast({ - text: data.error ?? "Failed to update password", - type: "error", - }) - } - } - - return ( -
-
- - -
-
- - -
-
- - -
- - ) + return ( +
+
+ + +
+
+ + +
+
+ + +
+ + + ) } -export default Password \ No newline at end of file +export default Password diff --git a/client/components/settings/sections/profile.tsx b/client/components/settings/sections/profile.tsx index ed95851a..8cd7dbb0 100644 --- a/client/components/settings/sections/profile.tsx +++ b/client/components/settings/sections/profile.tsx @@ -4,97 +4,122 @@ import Cookies from "js-cookie" import { useEffect, useState } from "react" const Profile = () => { - const user = useUserData() - const [name, setName] = useState() - const [email, setEmail] = useState() - const [bio, setBio] = useState() + const user = useUserData() + const [name, setName] = useState() + const [email, setEmail] = useState() + const [bio, setBio] = useState() - useEffect(() => { - console.log(user) - if (user?.displayName) setName(user.displayName) - if (user?.email) setEmail(user.email) - if (user?.bio) setBio(user.bio) - }, [user]) + useEffect(() => { + console.log(user) + if (user?.displayName) setName(user.displayName) + if (user?.email) setEmail(user.email) + if (user?.bio) setBio(user.bio) + }, [user]) - const { setToast } = useToasts() + const { setToast } = useToasts() - const handleNameChange = (e: React.ChangeEvent) => { - setName(e.target.value) - } + const handleNameChange = (e: React.ChangeEvent) => { + setName(e.target.value) + } - const handleEmailChange = (e: React.ChangeEvent) => { - setEmail(e.target.value) - } + const handleEmailChange = (e: React.ChangeEvent) => { + setEmail(e.target.value) + } - const handleBioChange = (e: React.ChangeEvent) => { - setBio(e.target.value) - } + const handleBioChange = (e: React.ChangeEvent) => { + setBio(e.target.value) + } - const onSubmit = async (e: React.FormEvent) => { - e.preventDefault() - if (!name && !email && !bio) { - setToast({ - text: "Please fill out at least one field", - type: "error", - }) - return - } + const onSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (!name && !email && !bio) { + setToast({ + text: "Please fill out at least one field", + type: "error" + }) + return + } - const data = { - displayName: name, - email, - bio, - } + const data = { + displayName: name, + email, + bio + } - const res = await fetch("/server-api/user/profile", { - method: "PUT", - headers: { - "Content-Type": "application/json", - "Authorization": `Bearer ${Cookies.get("drift-token")}`, - }, - body: JSON.stringify(data), - }) + const res = await fetch("/server-api/user/profile", { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${Cookies.get("drift-token")}` + }, + body: JSON.stringify(data) + }) - if (res.status === 200) { - setToast({ - text: "Profile updated", - type: "success", - }) - } else { - setToast({ - text: "Something went wrong updating your profile", - type: "error", - }) - } - } + if (res.status === 200) { + setToast({ + text: "Profile updated", + type: "success" + }) + } else { + setToast({ + text: "Something went wrong updating your profile", + type: "error" + }) + } + } - return (<> - - This information will be publicly available on your profile - -
-
- - -
-
- - -
-
- -