Skip to content

Commit

Permalink
Merge pull request #80 from FleetAdmiralJakob/refactor-navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
Gamius00 authored Apr 28, 2024
2 parents 3d2146a + 4feb380 commit 0a5a543
Show file tree
Hide file tree
Showing 11 changed files with 142 additions and 133 deletions.
18 changes: 9 additions & 9 deletions src/app/(auth)/sign-in/signin-form.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import { Button } from "~/components/ui/button";
import {
Form,
FormControl,
Expand All @@ -12,13 +8,17 @@ import {
FormLabel,
FormMessage,
} from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import React, { useEffect, useState } from "react";
import { z } from "zod";
import { useSignIn } from "@clerk/nextjs";
import { useRouter } from "next/navigation";

import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { cn } from "~/lib/utils";
import { useConvexAuth } from "convex/react";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { useSignIn } from "@clerk/nextjs";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

export const formSchema = z.object({
username: z
Expand Down Expand Up @@ -75,7 +75,7 @@ export function SignInForm() {

useEffect(() => {
if (signInComplete && isAuthenticated) {
router.push("/");
router.push("/chats");
}
}, [isAuthenticated, router, signInComplete]);

Expand Down
2 changes: 1 addition & 1 deletion src/app/(auth)/sign-up/signup-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function SignUpForm() {
if (signUpComplete && isAuthenticated) {
initialConvexSetup().then(
() => {
router.push("/");
router.push("/chats");
},
() => {
return undefined;
Expand Down
23 changes: 23 additions & 0 deletions src/app/(internal-sites)/chats/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { AddUserDialog } from "~/components/homepage/add-user-dialog";
import Chats from "~/components/homepage/chat-overview";
import { SignOutButton } from "@clerk/nextjs";
import { currentUser } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

export default async function ChatOverwiewPage() {
const user = await currentUser();
if (!user) redirect("/");
return (
<div className="pb-24 lg:ml-24">
<div className="relative flex h-full w-full justify-center">
<h1 className="pt-28 text-4xl font-bold">Chats</h1>
<AddUserDialog classNameDialogTrigger="absolute bg-input right-16 top-16" />
</div>
<p className="absolute top-0">
Current User: {user.username} <br /> <SignOutButton />
</p>{" "}
<br />
<Chats />
</div>
);
}
10 changes: 10 additions & 0 deletions src/app/(internal-sites)/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Navbar from "~/components/navbar";

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="min-h-screen">
{children}
<Navbar />
</div>
);
}
76 changes: 76 additions & 0 deletions src/app/(internal-sites)/profile/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Avatar, AvatarFallback } from "~/components/ui/avatar";
import { Lock, NotebookText } from "lucide-react";

import { Bell } from "lucide-react";
import Link from "next/link";
import { SendHorizontal } from "lucide-react";
import { Settings } from "lucide-react";
import { UsersRound } from "lucide-react";
import { currentUser } from "@clerk/nextjs/server";

interface settingsCard {
title: string;
icon: JSX.Element;
}

const settings: settingsCard[] = [
{ title: "Account", icon: <Lock /> },
{ title: "Chats", icon: <SendHorizontal /> },
{ title: "Notification", icon: <Bell /> },
{ title: "Settings", icon: <Settings /> },
{ title: "Contributors", icon: <UsersRound /> },
];

export default async function Profile() {
const user = await currentUser();
const username = user?.username;

return (
<div className=" flex h-full flex-col items-center justify-around lg:pl-24">
<div className="flex flex-col items-center">
<p className=" my-10 mt-16 text-xl font-bold sm:text-2xl xl:hidden">
Profile
</p>

<div className="flex xl:mt-14">
<div className="text-sm">
<Avatar className="h-12 w-12 text-white ">
<AvatarFallback>
{username ? username.substring(0, 2).toUpperCase() : "Y"}
</AvatarFallback>
</Avatar>
</div>
<div
className="ml-4 text-sm
xl:mt-2 xl:text-lg"
>
{user?.lastName && user.firstName ? (
<div>
{user.firstName} {user?.lastName} / <br className="xl:hidden" />{" "}
{user.username}
</div>
) : (
<div className="xl:mt-4">{user?.username}</div>
)}
</div>
</div>
</div>
<div className="mb-20 mt-10 w-full pb-24 sm:mb-32 lg:w-2/3 xl:w-1/3">
{settings.map((item) => {
return (
<Link
key={item.title}
href={`/profile/${item.title.toLowerCase()}`}
className="flex w-full cursor-pointer border-t-2 border-input p-7 text-xl sm:text-2xl lg:mt-6 lg:rounded-xl lg:border-0 lg:bg-input xl:text-xl"
>
<p className="mr-5 rounded-3xl bg-accent p-3 text-white">
{item.icon}
</p>
<p className="pt-3">{item.title}</p>
</Link>
);
})}
</div>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import Navbar from "~/components/navbar";

const SettingsPage = () => {
return (
<div>
<Navbar />
</div>
);
return <div>Settings</div>;
};

export default SettingsPage;
11 changes: 11 additions & 0 deletions src/app/(internal-sites)/todo/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Navbar from "~/components/navbar";

const Todo = () => {
return (
<div className="flex h-full flex-col items-center justify-center lg:pl-24">
<p>Todo</p>
</div>
);
};

export default Todo;
22 changes: 4 additions & 18 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,15 @@
import { SignOutButton } from "@clerk/nextjs";
import PublicHomepage from "~/app/public-homepage";
import { AddUserDialog } from "~/components/homepage/add-user-dialog";
import Chats from "~/components/homepage/chat-overview";
import Navbar from "~/components/navbar";
import PublicHomepage from "~/app/public-homepage";
import { SignOutButton } from "@clerk/nextjs";
import { currentUser } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

export default async function HomePage() {
const user = await currentUser();
if (user) {
return (
<>
<div className="pb-24 lg:ml-24">
<div className="relative flex h-full w-full justify-center">
<h1 className="pt-28 text-4xl font-bold">Chats</h1>
<AddUserDialog classNameDialogTrigger="absolute bg-input right-16 top-16" />
</div>
<p className="absolute top-0">
Current User: {user.username} <br /> <SignOutButton />
</p>{" "}
<br />
<Chats />
</div>
<Navbar />
</>
);
redirect("/chats");
}

return <PublicHomepage />;
Expand Down
80 changes: 0 additions & 80 deletions src/app/profile/page.tsx

This file was deleted.

14 changes: 0 additions & 14 deletions src/app/todo/page.tsx

This file was deleted.

13 changes: 7 additions & 6 deletions src/components/navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
"use client";

import { useEffect, useState } from "react";

import { CalendarCheck } from "lucide-react";
import { CircleUser } from "lucide-react";
import Link from "next/link";
import { MessagesSquare } from "lucide-react";
import { CalendarCheck } from "lucide-react";
import { UsersRound } from "lucide-react";
import { CircleUser } from "lucide-react";
import { cn } from "~/lib/utils";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";

const Navbar = () => {
const [isIOS, setIsIOS] = useState(false);
const [pathname, setPathname] = useState("/");
const pathname = usePathname();

useEffect(() => {
setIsIOS(/iPad|iPhone|iPod/.test(navigator.userAgent));
setPathname(window.location.pathname);
}, []);

return (
Expand All @@ -27,7 +28,7 @@ const Navbar = () => {
<Link className={"flex flex-col items-center"} href={"/"}>
<MessagesSquare
className={cn({
"text-accent": pathname === "/",
"text-accent": pathname === "/chats",
})}
/>
<p className={"mt-0.5 text-sm"}>Chats</p>
Expand Down

0 comments on commit 0a5a543

Please sign in to comment.