Merge pull request #77 from FleetAdmiralJakob/frontend-chats

.gitignore

@@ -42,4 +42,5 @@ yarn-error.log*
 *.tsbuildinfo
 
 # PWA
-public/sw.js
+public/sw.js
+.env.local

convex/README.md

@@ -0,0 +1,90 @@
+# Welcome to your Convex functions directory!
+
+Write your Convex functions here.
+See https://docs.convex.dev/functions for more.
+
+A query function that takes two arguments looks like:
+
+```ts
+// functions.js
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myQueryFunction = query({
+ // Validators for arguments.
+ args: {
+ first: v.number(),
+ second: v.string(),
+ },
+
+ // Function implementation.
+ handler: async (ctx, args) => {
+ // Read the database as many times as you need here.
+ // See https://docs.convex.dev/database/reading-data.
+ const documents = await ctx.db.query("tablename").collect();
+
+ // Arguments passed from the client are properties of the args object.
+ console.log(args.first, args.second);
+
+ // Write arbitrary JavaScript here: filter, aggregate, build derived data,
+ // remove non-public properties, or create new objects.
+ return documents;
+ },
+});
+```
+
+Using this query function in a React component looks like:
+
+```ts
+const data = useQuery(api.functions.myQueryFunction, {
+ first: 10,
+ second: "hello",
+});
+```
+
+A mutation function looks like:
+
+```ts
+// functions.js
+import { mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myMutationFunction = mutation({
+ // Validators for arguments.
+ args: {
+ first: v.string(),
+ second: v.string(),
+ },
+
+ // Function implementation.
+ handler: async (ctx, args) => {
+ // Insert or modify documents in the database here.
+ // Mutations can also read from the database like queries.
+ // See https://docs.convex.dev/database/writing-data.
+ const message = { body: args.first, author: args.second };
+ const id = await ctx.db.insert("messages", message);
+
+ // Optionally, return a value from your mutation.
+ return await ctx.db.get(id);
+ },
+});
+```
+
+Using this mutation function in a React component looks like:
+
+```ts
+const mutation = useMutation(api.functions.myMutationFunction);
+function handleButtonPress() {
+ // fire and forget, the most common way to use mutations
+ mutation({ first: "Hello!", second: "me" });
+ // OR
+ // use the result once the mutation has completed
+ mutation({ first: "Hello!", second: "me" }).then((result) =>
+ console.log(result),
+ );
+}
+```
+
+Use the Convex CLI to push your functions to a deployment. See everything
+the Convex CLI can do by running `npx convex -h` in your project root
+directory. To learn more, launch the docs with `npx convex docs`.

convex/_generated/api.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by [email protected].0.
+ * Generated by [email protected].1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/api.js

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by [email protected].0.
+ * Generated by [email protected].1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/dataModel.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by [email protected].0.
+ * Generated by [email protected].1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/server.d.ts

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by [email protected].0.
+ * Generated by [email protected].1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/_generated/server.js

@@ -4,7 +4,7 @@
  *
  * THIS CODE IS AUTOMATICALLY GENERATED.
  *
- * Generated by [email protected].0.
+ * Generated by [email protected].1.
  * To regenerate, run `npx convex dev`.
  * @module
  */

convex/tsconfig.json

@@ -0,0 +1,24 @@
+{
+ /* This TypeScript project config describes the environment that
+ * Convex functions run in and is used to typecheck them.
+ * You can modify it, but some settings required to use Convex.
+ */
+ "compilerOptions": {
+ /* These settings are not required by Convex and can be modified. */
+ "allowJs": true,
+ "strict": true,
+
+ /* These compiler options are required by Convex */
+ "target": "ESNext",
+ "lib": ["ES2021", "dom"],
+ "forceConsistentCasingInFileNames": true,
+ "allowSyntheticDefaultImports": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "isolatedModules": true,
+ "skipLibCheck": true,
+ "noEmit": true
+ },
+ "include": ["./**/*"],
+ "exclude": ["./_generated"]
+}

src/app/page.tsx

@@ -1,21 +1,27 @@
 import { currentUser, SignOutButton } from "@clerk/nextjs";
 import PublicHomepage from "~/app/public-homepage";
 import { AddUserDialog } from "~/components/homepage/add-user-dialog";
-import Navbar from "~/components/navbar";
 import { Chats } from "~/components/homepage/chat-overview";
+import Search from "~/components/homepage/search";
+import Navbar from "~/components/navbar";
 
 export default async function HomePage() {
  const user = await currentUser();
  if (user) {
  return (
  <>
- <div className="relative flex h-full w-full justify-center">
- <h1 className="pt-28 text-4xl font-bold">Chats</h1>
- <AddUserDialog classNameDialogTrigger="absolute right-16 top-16" />
+ <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 />
+ <Search />
+ <Chats />
  </div>
- Current User: {user.username} <br />
- <SignOutButton />
- <Chats />
  <Navbar />
  </>
  );

src/app/profile/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "~/components/navbar";
+
+const Profile = () => {
+ return (
+ <div>
+ <Navbar />
+ </div>
+ );
+};
+
+export default Profile;

src/app/todo/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "~/components/navbar";
+
+const Todo = () => {
+ return (
+ <div>
+ <Navbar />
+ </div>
+ );
+};
+
+export default Todo;

src/components/homepage/chat-overview.tsx

@@ -5,42 +5,77 @@ import { api } from "../../../convex/_generated/api";
 import { useUser } from "@clerk/nextjs";
 import { Avatar, AvatarFallback } from "~/components/ui/avatar";
 import { NotebookText } from "lucide-react";
+import { Check } from "lucide-react";
+import { MousePointerClick } from "lucide-react";
 
 export function Chats() {
  const chats = useQuery(api.chats.getChats);
  const clerkUser = useUser();
+
  return (
  <>
- {chats?.map((chat, index) => {
- if (chat.support) {
- return (
- <div key={index} className="flex items-center gap-3">
- <Avatar>
- <AvatarFallback>C</AvatarFallback>
- </Avatar>
- Chat.io
- </div>
- );
- }
- chat.users = chat.users.filter(
- (user) => user.clerkId.split("|").pop() !== clerkUser.user?.id,
- );
+ <div className="flex justify-center">
+ <div className="mt-20 flex w-full flex-col items-center lg:w-1/3">
+ {chats?.map((chat, index) => {
+ if (chat.support) {
+ return (
+ <>
+ <div
+ key={index}
+ className="flex w-full items-center justify-start gap-3 border-t-2 border-input py-6 pl-11 lg:mr-16 lg:border-0"
+ >
+ <Avatar className="text-white">
+ <AvatarFallback>C</AvatarFallback>
+ </Avatar>
+ <p className="text-xl font-bold">Chat.io</p>
+ <p className="flex rounded-sm bg-blue-400 p-1 pr-2 text-sm font-medium">
+ {" "}
+ <Check className="h-5" /> Support
+ </p>
+ <div className="absolute ml-60 mt-20">
+ <MousePointerClick className="mb-1 ml-6 animate-pulse" />
+ <p>Click here</p>
+ </div>
+ </div>
+ </>
+ );
+ }
+ chat.users = chat.users.filter(
+ (user) => user.clerkId.split("|").pop() !== clerkUser.user?.id,
+ );
 
- return (
- <div key={index} className="flex items-center gap-3">
- <Avatar>
- <AvatarFallback>
- {chat.users[0] ? (
- chat.users[0].username.slice(0, 2).toUpperCase()
- ) : (
- <NotebookText />
- )}
- </AvatarFallback>
- </Avatar>
- {chat.users[0] ? chat.users[0].username : "My Notes"}
- </div>
- );
- })}
+ return (
+ <div
+ key={index}
+ className="flex w-full items-center justify-start gap-3 border-t-2 border-input py-6 pl-11 lg:mr-16 lg:border-0"
+ >
+ <Avatar className="text-white">
+ <AvatarFallback>
+ {chat.users[0] ? (
+ chat.users[0].username.slice(0, 2).toUpperCase()
+ ) : (
+ <NotebookText />
+ )}
+ </AvatarFallback>
+ </Avatar>
+ <p className=" text-xl font-bold">
+ {chat.users[0] ? (
+ chat.users[0].username
+ ) : (
+ <p className="flex">
+ <p>My Notes</p>
+ <p className=" ml-2.5 flex rounded-sm bg-blue-400 p-1 pr-2 text-sm font-medium">
+ {" "}
+ <Check className="h-5" /> Tool
+ </p>
+ </p>
+ )}
+ </p>
+ </div>
+ );
+ })}
+ </div>
+ </div>
  </>
  );
 }

src/components/homepage/search.tsx

@@ -0,0 +1,9 @@
+import { Input } from "~/components/ui/input";
+
+export default async function Search() {
+ return (
+ <div className="mt-3 flex justify-center">
+ <Input placeholder="Search ..." className="w-3/4 lg:w-2/6" />
+ </div>
+ );
+}

src/components/navbar.tsx

@@ -20,7 +20,7 @@ const Navbar = () => {
  return (
  <div
  className={cn(
- "fixed bottom-0 flex h-24 w-full items-center justify-around bg-primary text-2xl text-secondary-foreground",
+ "fixed bottom-0 flex h-24 w-full items-center justify-around bg-primary text-2xl text-secondary-foreground lg:h-full lg:w-24 lg:flex-col lg:border-r-2 lg:border-gray-950",
  { "pb-3": isIOS },
  )}
  >
@@ -32,16 +32,24 @@ const Navbar = () => {
  />
  <p className={"mt-0.5 text-sm"}>Chats</p>
  </Link>
- <Link className={"flex flex-col items-center"} href={"/"}>
- <FaClipboardList />
+ <Link className={"flex flex-col items-center"} href={"/todo"}>
+ <FaClipboardList
+ className={cn({
+ "text-accent": pathname === "/todo",
+ })}
+ />
  <p className={"mt-0.5 text-sm"}>Todo</p>
  </Link>
  <Link className={"flex flex-col items-center"} href={"/"}>
  <HiUserGroup />
  <p className={"mt-0.5 text-sm"}>Group</p>
  </Link>
- <Link className={"flex flex-col items-center"} href={"/"}>
- <CgProfile />
+ <Link className={"flex flex-col items-center"} href={"/profile"}>
+ <CgProfile
+ className={cn({
+ "text-accent": pathname === "/profile",
+ })}
+ />
  <p className={"mt-0.5 text-sm"}>Profile</p>
  </Link>
  </div>