diff --git a/package.json b/package.json index 5551190..d58b87f 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "cookies-next": "^2.1.1", "dayjs": "^1.11.7", "embla-carousel-react": "^7.1.0", + "lodash": "^4.17.21", "next": "13.1.4", "next-auth": "^4.20.1", "pocketbase": "^0.10.2", @@ -89,6 +90,7 @@ "@storybook/testing-library": "^0.0.13", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", + "@types/lodash": "^4.14.192", "@types/micromatch": "^4.0.2", "@types/prettier": "^2.7.2", "@types/testing-library__jest-dom": "^5.14.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eab832a..b152906 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,6 +103,9 @@ dependencies: embla-carousel-react: specifier: ^7.1.0 version: 7.1.0(react@18.2.0) + lodash: + specifier: ^4.17.21 + version: 4.17.21 next: specifier: 13.1.4 version: 13.1.4(@babel/core@7.21.3)(react-dom@18.2.0)(react@18.2.0) @@ -186,6 +189,9 @@ devDependencies: '@testing-library/react': specifier: ^13.4.0 version: 13.4.0(react-dom@18.2.0)(react@18.2.0) + '@types/lodash': + specifier: ^4.14.192 + version: 4.14.192 '@types/micromatch': specifier: ^4.0.2 version: 4.0.2 @@ -3646,7 +3652,7 @@ packages: '@storybook/csf-plugin': 7.0.0-beta.44 '@storybook/csf-tools': 7.0.0-beta.44 '@storybook/global': 5.0.0 - '@storybook/mdx2-csf': 1.0.0-next.6 + '@storybook/mdx2-csf': 1.0.0-next.8 '@storybook/node-logger': 7.0.0-beta.44 '@storybook/postinstall': 7.0.0-beta.44 '@storybook/preview-api': 7.0.0-beta.44 @@ -3742,7 +3748,7 @@ packages: dependencies: '@storybook/client-logger': 7.0.0-beta.44 '@storybook/core-events': 7.0.0-beta.44 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/global': 5.0.0 '@storybook/manager-api': 7.0.0-beta.44(react-dom@18.2.0)(react@18.2.0) '@storybook/preview-api': 7.0.0-beta.44 @@ -3937,7 +3943,7 @@ packages: '@storybook/client-logger': 7.0.0-beta.44 '@storybook/components': 7.0.0-beta.44(react-dom@18.2.0)(react@18.2.0) '@storybook/core-events': 7.0.0-beta.44 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/docs-tools': 7.0.0-beta.44 '@storybook/global': 5.0.0 '@storybook/manager-api': 7.0.0-beta.44(react-dom@18.2.0)(react@18.2.0) @@ -4156,7 +4162,7 @@ packages: '@babel/core': 7.21.3 '@babel/preset-env': 7.20.2(@babel/core@7.21.3) '@babel/types': 7.21.3 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/csf-tools': 7.0.0-beta.44 '@storybook/node-logger': 7.0.0-beta.44 '@storybook/types': 7.0.0-beta.44 @@ -4178,7 +4184,7 @@ packages: react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: '@storybook/client-logger': 7.0.0-beta.44 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/global': 5.0.0 '@storybook/theming': 7.0.0-beta.44(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.0.0-beta.44 @@ -4249,9 +4255,9 @@ packages: '@storybook/builder-manager': 7.0.0-beta.44 '@storybook/core-common': 7.0.0-beta.44 '@storybook/core-events': 7.0.0-beta.44 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/csf-tools': 7.0.0-beta.44 - '@storybook/docs-mdx': 0.0.1-next.6 + '@storybook/docs-mdx': 0.0.1-next.7 '@storybook/global': 5.0.0 '@storybook/manager': 7.0.0-beta.44 '@storybook/node-logger': 7.0.0-beta.44 @@ -4319,7 +4325,7 @@ packages: resolution: {integrity: sha512-I9k49mHMuBkuw854VlCfXhL3t470yt47B/IVZYmT+ju1vvzcRjLCpdd4+dWvk5F0Z4lggSvcxD+VkqKXWJ/5Jg==} dependencies: '@babel/types': 7.21.3 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/types': 7.0.0-beta.44 fs-extra: 11.1.1 recast: 0.23.1 @@ -4340,14 +4346,14 @@ packages: lodash: 4.17.21 dev: true - /@storybook/csf@0.0.2-next.10: - resolution: {integrity: sha512-m2PFgBP/xRIF85VrDhvesn9ktaD2pN3VUjvMqkAL/cINp/3qXsCyI81uw7N5VEOkQAbWrY2FcydnvEPDEdE8fA==} + /@storybook/csf@0.0.2-next.11: + resolution: {integrity: sha512-xGt0YSVxZb43sKmEf1GIQD8xEbo+c+S6khDEL7Qu/pYA0gh5z3WUuhOlovnelYj/YJod+XRsfVvk23AaRfUJ4Q==} dependencies: type-fest: 2.19.0 dev: true - /@storybook/docs-mdx@0.0.1-next.6: - resolution: {integrity: sha512-DjoSIXADmLJtdroXAjUotFiZlcZ2usWhqrS7aeOtZs0DVR0Ws5WQjnwtpDUXt8gryTSd+OZJ0cNsDcqg4JDEvQ==} + /@storybook/docs-mdx@0.0.1-next.7: + resolution: {integrity: sha512-JbgBf/EMBtx65iXtB3pOiX3818UeL9jZ+KAY241OAPqJVXjMQ5KaVOdg/57MSmd508HDIGx7CiImOMEmWwQ9/g==} dev: true /@storybook/docs-tools@7.0.0-beta.44: @@ -4402,7 +4408,7 @@ packages: '@storybook/channels': 7.0.0-beta.44 '@storybook/client-logger': 7.0.0-beta.44 '@storybook/core-events': 7.0.0-beta.44 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/global': 5.0.0 '@storybook/router': 7.0.0-beta.44(react-dom@18.2.0)(react@18.2.0) '@storybook/theming': 7.0.0-beta.44(react-dom@18.2.0)(react@18.2.0) @@ -4424,8 +4430,8 @@ packages: resolution: {integrity: sha512-hTO6tmAlA5dZQwyeBcV2Ie8tR8jzPORCAOPc5ocoC/M8vUKvPSkTyS6BOZSwF6cdUwvnXs/GjZC/xvEQwYAkAA==} dev: true - /@storybook/mdx2-csf@1.0.0-next.6: - resolution: {integrity: sha512-m6plojocU/rmrqWd26yvm8D+oHZPZ6PtSSFmZIgpNDEPVmc8s4fBD6LXOAB5MiPI5f8KLUr2HVhOMZ97o5pDTw==} + /@storybook/mdx2-csf@1.0.0-next.8: + resolution: {integrity: sha512-t2O5s/HHTH5evZVHgVtCWTZgMZ/CaqDu3xVGgjVbKeTvpPAbi0Waab5SSX8T9PG5jNDei/x+jpAVCcNMOHoWzg==} dev: true /@storybook/nextjs@7.0.0-beta.44(@babel/core@7.21.3)(esbuild@0.16.17)(next@13.1.4)(postcss@8.4.21)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.4)(webpack@5.76.3): @@ -4558,7 +4564,7 @@ packages: '@storybook/channels': 7.0.0-beta.44 '@storybook/client-logger': 7.0.0-beta.44 '@storybook/core-events': 7.0.0-beta.44 - '@storybook/csf': 0.0.2-next.10 + '@storybook/csf': 0.0.2-next.11 '@storybook/global': 5.0.0 '@storybook/types': 7.0.0-beta.44 '@types/qs': 6.9.7 @@ -7929,7 +7935,7 @@ packages: eslint: 8.32.0 eslint-import-resolver-node: 0.3.7 eslint-import-resolver-typescript: 3.5.3(eslint-plugin-import@2.27.5)(eslint@8.32.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-typescript@3.5.3)(eslint@8.32.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.57.0)(eslint@8.32.0) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.32.0) eslint-plugin-react: 7.32.2(eslint@8.32.0) eslint-plugin-react-hooks: 4.6.0(eslint@8.32.0) @@ -7968,7 +7974,7 @@ packages: debug: 4.3.4 enhanced-resolve: 5.12.0 eslint: 8.32.0 - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-typescript@3.5.3)(eslint@8.32.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.57.0)(eslint@8.32.0) get-tsconfig: 4.5.0 globby: 13.1.3 is-core-module: 2.11.0 @@ -7978,7 +7984,7 @@ packages: - supports-color dev: true - /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.3)(eslint@8.32.0): + /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-node@0.3.7)(eslint@8.32.0): resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==} engines: {node: '>=4'} peerDependencies: @@ -8003,12 +8009,11 @@ packages: debug: 3.2.7 eslint: 8.32.0 eslint-import-resolver-node: 0.3.7 - eslint-import-resolver-typescript: 3.5.3(eslint-plugin-import@2.27.5)(eslint@8.32.0) transitivePeerDependencies: - supports-color dev: true - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-typescript@3.5.3)(eslint@8.32.0): + /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.57.0)(eslint@8.32.0): resolution: {integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==} engines: {node: '>=4'} peerDependencies: @@ -8026,7 +8031,7 @@ packages: doctrine: 2.1.0 eslint: 8.32.0 eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.3)(eslint@8.32.0) + eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.57.0)(eslint-import-resolver-node@0.3.7)(eslint@8.32.0) has: 1.0.3 is-core-module: 2.11.0 is-glob: 4.0.3 diff --git a/src/components/AccountHeaderMenu.tsx b/src/components/AccountHeaderMenu.tsx deleted file mode 100644 index a7c8193..0000000 --- a/src/components/AccountHeaderMenu.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { User } from "@prisma/client"; -import type { Session } from "next-auth"; - -import { Avatar, Button, Menu } from "@mantine/core"; -import { - IconHomeSignal, - IconLogout, - IconMessageCircle, - IconSettings, -} from "@tabler/icons-react"; -import { signIn, signOut, useSession } from "next-auth/react"; - -type UserInfo = Pick; -type props = UserInfo | null; - -const AccountHeaderMenu = () => { - const { data: sessionData } = useSession(); - const menu = (data: Session) => ( - - - - {data.user?.name?.slice(0, 2).toUpperCase()} - - - - User Actions - }>Settings - }>Messages - }>Profile - - - - } - onClick={() => void signOut()} - > - Logout - - - - ); - const SignIn = ( - - ); - return sessionData === null ? SignIn : menu(sessionData); -}; - -export default AccountHeaderMenu; diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx new file mode 100644 index 0000000..15f2c52 --- /dev/null +++ b/src/components/layout/Layout.tsx @@ -0,0 +1,15 @@ +import HeaderSearch from "./header/Header"; + +interface LayoutProps { + children: React.ReactNode; +} + +const Layout = ({ children }: LayoutProps) => { + return ( + <> + + {children} + + ); +}; +export default Layout; diff --git a/src/components/layout/header/AccountHeaderMenu.tsx b/src/components/layout/header/AccountHeaderMenu.tsx new file mode 100644 index 0000000..720c663 --- /dev/null +++ b/src/components/layout/header/AccountHeaderMenu.tsx @@ -0,0 +1,72 @@ +import { api } from "@/utils/api"; +import { Avatar, Button, Menu } from "@mantine/core"; +import { + IconHomeSignal, + IconLogout, + IconMessageCircle, + IconSettings, +} from "@tabler/icons-react"; +import { signIn, signOut, useSession } from "next-auth/react"; +import Link from "next/link"; + +const AccountHeaderMenu = () => { + const { data: sessionData } = useSession(); + const { data: userInfo } = api.user.getMyHeaderInfo.useQuery( + undefined, // no input + { enabled: sessionData?.user !== undefined } + ); + const id = userInfo?.id.toString(); + const menu = ( + + + {userInfo?.image ? ( + + ) : ( + + {userInfo?.name?.slice(0, 2).toUpperCase()} + + )} + + + User Actions + } + component={Link} + href="/settings" + > + Settings + + } + component={Link} + href="/chat" + > + Messages + + } + component={Link} + href={"/profile/" + id!} + > + Profile + + + + + } + onClick={() => void signOut()} + > + Logout + + + + ); + const SignIn = ( + + ); + return sessionData === null ? SignIn : menu; +}; + +export default AccountHeaderMenu; diff --git a/src/components/Header.tsx b/src/components/layout/header/Header.tsx similarity index 71% rename from src/components/Header.tsx rename to src/components/layout/header/Header.tsx index 986c703..074ed56 100644 --- a/src/components/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -1,15 +1,15 @@ import { + ActionIcon, Autocomplete, - Burger, Button, Group, Header, createStyles, rem, } from "@mantine/core"; -import { useDisclosure } from "@mantine/hooks"; import { IconHome, IconSearch } from "@tabler/icons-react"; import { signIn, useSession } from "next-auth/react"; +import Link from "next/link"; import AccountHeaderMenu from "./AccountHeaderMenu"; import ToggleDarkMode from "./ToggleDarkModeButton"; @@ -27,38 +27,11 @@ const useStyles = createStyles((theme) => ({ alignItems: "center", }, - links: { - [theme.fn.smallerThan("md")]: { - display: "none", - }, - }, - search: { [theme.fn.smallerThan("xs")]: { display: "none", }, }, - - link: { - display: "block", - lineHeight: 1, - padding: `${rem(8)} ${rem(12)}`, - borderRadius: theme.radius.sm, - textDecoration: "none", - color: - theme.colorScheme === "dark" - ? theme.colors.dark[0] - : theme.colors.gray[7], - fontSize: theme.fontSizes.sm, - fontWeight: 500, - - "&:hover": { - backgroundColor: - theme.colorScheme === "dark" - ? theme.colors.dark[6] - : theme.colors.gray[0], - }, - }, })); const HeaderSearch = () => { @@ -69,7 +42,9 @@ const HeaderSearch = () => {
- + + + - + + + @@ -57,7 +60,7 @@ const MyApp = ({ MyApp.getInitialProps = async (appContext: AppContext) => { const appProps = await App.getInitialProps(appContext); - const session = await getSession(appContext); + const session = await getSession({ req: appContext.ctx.req }); const props = { ...appProps, session: session, diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx index 110952a..bfcd2e5 100644 --- a/src/pages/index.page.tsx +++ b/src/pages/index.page.tsx @@ -1,4 +1,3 @@ -import Header from "@/components/Header"; import { api } from "@/utils/api"; import { Button } from "@mantine/core"; import { type NextPage } from "next"; @@ -14,7 +13,6 @@ const Home: NextPage = () => { -

@@ -41,7 +39,7 @@ const AuthShowcase: React.FC = () => {

{sessionData && Logged in as {sessionData.user?.name}} - {secretMessage && - {secretMessage}} + {secretMessage && - created at {secretMessage.toString()}}