├── app
    ├── login.css
    ├── types
    │   ├── index.d.ts
    │   ├── Cookie.d.ts
    │   ├── User.d.ts
    │   ├── Database.d.ts
    │   ├── FancyArea.d.ts
    │   └── Thread.d.ts
    ├── lib
    │   ├── utils.ts
    │   └── getFIleTypeIcon.tsx
    ├── .server
    │   ├── redis.ts
    │   ├── cookies.ts
    │   ├── utils.ts
    │   ├── sessions.ts
    │   └── db.server.ts
    ├── entry.client.tsx
    ├── routes
    │   ├── api.threads.list.tsx
    │   ├── auth.verify.tsx
    │   ├── files.$filename.tsx
    │   ├── auth.register.tsx
    │   ├── _index.tsx
    │   ├── threads.$id.tsx
    │   ├── auth.login.tsx
    │   ├── register.tsx
    │   ├── login.tsx
    │   ├── dashboard.tsx
    │   └── threads.new.tsx
    ├── components
    │   ├── ui
    │   │   ├── textarea.tsx
    │   │   ├── separator.tsx
    │   │   ├── input.tsx
    │   │   ├── badge.tsx
    │   │   ├── avatar.tsx
    │   │   ├── button.tsx
    │   │   ├── tabs.tsx
    │   │   ├── card.tsx
    │   │   ├── table.tsx
    │   │   ├── sheet.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── navbar.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── alert-dialog-json.tsx
    │   └── fancy-area.tsx
    ├── root.tsx
    ├── tailwind.css
    └── entry.server.tsx
├── db
    ├── index.ts
    └── schema
    │   ├── tokens.ts
    │   ├── refreshTokens.ts
    │   ├── users.ts
    │   └── threads.ts
├── public
    └── favicon.ico
├── postcss.config.js
├── .gitignore
├── remix.config.js
├── drizzle.config.ts
├── drizzle
    └── meta
    │   ├── _journal.json
    │   └── 0000_snapshot.json
├── components.json
├── .tailwind.config.ts
├── vite.config.ts
├── .github
    └── workflows
    │   └── lint.yml
├── .dummyacc.schema.json
├── tsconfig.json
├── README.md
├── .eslintrc.cjs
├── tailwind.config.ts
└── package.json


/app/login.css:
--------------------------------------------------------------------------------
1 | .main {
2 |   background-color: rgb(37, 99, 235);
3 | }


--------------------------------------------------------------------------------
/db/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./schema/users";
2 | export * from "./schema/tokens";
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syrup/RucoTalk/master/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/app/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from "./User";
2 | export * from "./Cookie";
3 | export * from "./FancyArea";
4 | export * from "./Database";
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | /.cache
 4 | /build
 5 | .env
 6 | .dummyacc.json
 7 | remix-*
 8 | uploads
 9 | drizzle
10 | .vercel
11 | public/build


--------------------------------------------------------------------------------
/app/types/Cookie.d.ts:
--------------------------------------------------------------------------------
1 | import { User } from "./User";
2 | 
3 | export interface LoginCookie {
4 |   token: string;
5 |   user: User;
6 |   isLoggedIn: boolean;
7 | }


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('@remix-run/dev').AppConfig} */
2 | export default {
3 |   tailwind: true,
4 |   postcss: true,
5 |   browserNodeBuiltinsPolyfill: { modules: { events: true } },
6 | };
7 | 


--------------------------------------------------------------------------------
/app/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/drizzle.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "drizzle-kit";
 2 | 
 3 | export default defineConfig({
 4 |   dialect: "postgresql",
 5 |   schema: "./db/schema/*.ts",
 6 |   out: "./drizzle",
 7 |   dbCredentials: {
 8 |     url: process.env.DATABASE_URL!,
 9 |   },
10 | });
11 | 


--------------------------------------------------------------------------------
/drizzle/meta/_journal.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "7",
 3 |   "dialect": "postgresql",
 4 |   "entries": [
 5 |     {
 6 |       "idx": 0,
 7 |       "version": "7",
 8 |       "when": 1725457852320,
 9 |       "tag": "0000_sleepy_blink",
10 |       "breakpoints": true
11 |     }
12 |   ]
13 | }


--------------------------------------------------------------------------------
/app/types/User.d.ts:
--------------------------------------------------------------------------------
 1 | export interface User {
 2 |   id: string;
 3 |   username: string | null;
 4 |   email: string | null;
 5 |   password: string;
 6 |   roles: UserRole[] | null;
 7 |   createdAt: Date | null;
 8 |   updatedAt: Date | null;
 9 | }
10 | 
11 | export type UserRole = "admin" | "user" | "moderator";
12 | 


--------------------------------------------------------------------------------
/app/types/Database.d.ts:
--------------------------------------------------------------------------------
 1 | import { users as usersDb, tokens as tokensDb } from "db";
 2 | 
 3 | export interface User {
 4 |   username: string;
 5 |   email: string;
 6 |   password: string;
 7 |   createdAt: Date;
 8 |   updatedAt: Date;
 9 | }
10 | 
11 | export enum Tables {
12 |   users = usersDb,
13 |   tokens = tokensDb,
14 | }
15 | 


--------------------------------------------------------------------------------
/app/types/FancyArea.d.ts:
--------------------------------------------------------------------------------
 1 | import { ChangeEvent } from "react";
 2 | 
 3 | export interface FancyAreaProps {
 4 |   textAreaName?: string;
 5 |   textAreaId?: string;
 6 |   textAreaClassName?: string;
 7 |   textAreaValue?: string;
 8 |   textAreaReadOnly?: boolean;
 9 |   textAreaOnChange?: (e: any) => void;
10 |   textAreaPlaceholder?: string;
11 | }
12 | 


--------------------------------------------------------------------------------
/app/types/Thread.d.ts:
--------------------------------------------------------------------------------
 1 | export interface Thread {
 2 |   id: string;
 3 |   title: string;
 4 |   content: string;
 5 |   authorId: string;
 6 |   attachments: Attachment[];
 7 |   status: "open" | "closed";
 8 |   createdAt?: Date;
 9 |   updatedAt?: Date;
10 | }
11 | 
12 | export interface Attachment {
13 |   name: string;
14 |   url: string;
15 |   type: string;
16 | }
17 | 


--------------------------------------------------------------------------------
/app/.server/redis.ts:
--------------------------------------------------------------------------------
 1 | import { createClient } from "redis";
 2 | 
 3 | const client = createClient({
 4 |   password: "rww09binPrxgBfbJSWdP61vTJCYOnMea",
 5 |   socket: {
 6 |     host: "redis-16932.c85.us-east-1-2.ec2.redns.redis-cloud.com",
 7 |     port: 16932,
 8 |   },
 9 | });
10 | 
11 | client.on("error", (err) => console.log("Redis Client Error", err));
12 | 
13 | export { client };
14 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/tailwind.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "~/components",
15 |     "utils": "~/lib/utils"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
 5 |   theme: {
 6 |     extend: {
 7 |       colors: {
 8 |         navy: {
 9 |           900: "#1e2a4a", // Adjust this value to match the exact shade in the image
10 |         },
11 |       },
12 |     },
13 |   },
14 |   plugins: [require("@tailwindcss/forms")],
15 | } satisfies Config;
16 | 


--------------------------------------------------------------------------------
/db/schema/tokens.ts:
--------------------------------------------------------------------------------
 1 | import { pgTable, timestamp, uuid, varchar } from "drizzle-orm/pg-core";
 2 | import { users } from "./users";
 3 | 
 4 | export const tokens = pgTable("tokens", {
 5 |   id: uuid("id").primaryKey().defaultRandom().notNull(),
 6 |   token: varchar("token").notNull().unique(),
 7 |   user_id: uuid("user_id")
 8 |     .notNull()
 9 |     .references(() => users.id),
10 |   created_at: timestamp("createdAt").defaultNow(),
11 |   updated_at: timestamp("updatedAt").defaultNow(),
12 | });
13 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { vitePlugin as remix } from "@remix-run/dev";
 2 | import { defineConfig } from "vite";
 3 | import tsconfigPaths from "vite-tsconfig-paths";
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     remix({
 8 |       future: {
 9 |         v3_fetcherPersist: true,
10 |         v3_relativeSplatPath: true,
11 |         v3_throwAbortReason: true,
12 |       },
13 |     }),
14 |     tsconfigPaths(),
15 |   ],
16 |   optimizeDeps: {
17 |     exclude: ["@mapbox"],
18 |   },
19 | });
20 | 


--------------------------------------------------------------------------------
/.github/workflows/lint.yml:
--------------------------------------------------------------------------------
 1 | name: Lint
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | jobs:
 6 |   lint:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |       - name: Checkout code
11 |         uses: actions/checkout@v2
12 | 
13 |       - name: Set up Node.js
14 |         uses: actions/setup-node@v2
15 |         with:
16 |           node-version: "14"
17 | 
18 |       - name: Install dependencies
19 |         run: npm install
20 | 
21 |       - name: Run ESLint
22 |         run: npx eslint . --ext .js,.jsx,.ts,.tsx
23 | 


--------------------------------------------------------------------------------
/db/schema/refreshTokens.ts:
--------------------------------------------------------------------------------
 1 | import { jsonb, pgTable, timestamp, uuid, varchar } from "drizzle-orm/pg-core";
 2 | import { users } from "./users";
 3 | 
 4 | export const tokens = pgTable("RefreshToken", {
 5 |   id: uuid("id").primaryKey().defaultRandom().notNull(),
 6 |   hashedToken: varchar("hashedToken").notNull().unique(),
 7 |   userId: uuid("user_id")
 8 |     .notNull()
 9 |     .references(() => users.id),
10 |   createdAt: timestamp("createdAt").defaultNow(),
11 |   updatedAt: timestamp("updatedAt").defaultNow(),
12 | });
13 | 


--------------------------------------------------------------------------------
/app/.server/cookies.ts:
--------------------------------------------------------------------------------
 1 | import { createCookie } from "@remix-run/node";
 2 | 
 3 | const oneweek = 60 * 60 * 24 * 7; // 1 week
 4 | 
 5 | export const login = createCookie("__login", {
 6 |   secrets: [process.env.LOGIN_SECRET!], // haha
 7 |   maxAge: oneweek,
 8 | });
 9 | 
10 | const sesionExpires = new Date();
11 | sesionExpires.setSeconds(sesionExpires.getSeconds() + oneweek);
12 | 
13 | export const sessionCookie = createCookie("__session", {
14 |   secrets: [process.env.SESSION_SECRET!], // haha i changed it lol
15 |   sameSite: true,
16 |   // expires: sesionExpires,
17 | });
18 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * By default, Remix will handle hydrating your app on the client for you.
 3 |  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 4 |  * For more information, see https://remix.run/file-conventions/entry.client
 5 |  */
 6 | 
 7 | import { RemixBrowser } from "@remix-run/react";
 8 | import { startTransition, StrictMode } from "react";
 9 | import { hydrateRoot } from "react-dom/client";
10 | 
11 | startTransition(() => {
12 |   hydrateRoot(
13 |     document,
14 |     <StrictMode>
15 |       <RemixBrowser />
16 |     </StrictMode>
17 |   );
18 | });
19 | 


--------------------------------------------------------------------------------
/db/schema/users.ts:
--------------------------------------------------------------------------------
 1 | import { varchar, pgTable, uuid, timestamp } from "drizzle-orm/pg-core";
 2 | import crypto from "crypto";
 3 | 
 4 | function randomString(length: number) {
 5 |   return crypto.randomBytes(length).toString("hex");
 6 | }
 7 | 
 8 | export const users = pgTable("users", {
 9 |   id: uuid("id").primaryKey().defaultRandom(),
10 |   email: varchar("email").unique(),
11 |   password: varchar("password").notNull(),
12 |   username: varchar("username").default("Anonymous"),
13 |   roles: varchar("roles").array().default(["user"]),
14 |   createdAt: timestamp("createdAt").defaultNow(),
15 |   updatedAt: timestamp("updatedAt").defaultNow(),
16 | });
17 | 


--------------------------------------------------------------------------------
/app/routes/api.threads.list.tsx:
--------------------------------------------------------------------------------
 1 | import { json, LoaderFunctionArgs } from "@remix-run/node";
 2 | import { threads } from "db/schema/threads";
 3 | import { DB } from "~/.server/db.server";
 4 | 
 5 | export async function loader({ request }: LoaderFunctionArgs) {
 6 |   const db = new DB();
 7 |   switch (request.method) {
 8 |     case "GET":
 9 |       const threadsList = await db.db.select().from(threads);
10 | 
11 |       if (
12 |         request.headers.get("Authorization") !==
13 |         `Bearer ${process.env.REFRESH_SECRET}`
14 |       ) {
15 |         return json({ message: "Unauthorized" }, 401);
16 |       }
17 | 
18 |       return json(threadsList, 200);
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/db/schema/threads.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   varchar,
 3 |   text,
 4 |   timestamp,
 5 |   pgTable,
 6 |   uuid,
 7 |   jsonb,
 8 | } from "drizzle-orm/pg-core";
 9 | import { users } from "./users";
10 | 
11 | export const threads = pgTable("threads", {
12 |   id: uuid("id").primaryKey().defaultRandom(),
13 |   title: varchar("title").notNull(),
14 |   content: text("content").notNull(),
15 |   authorId: uuid("author_id")
16 |     .notNull()
17 |     .references(() => users.id),
18 |   status: varchar("status", { enum: ["open", "closed"] }).default("open"),
19 |   attachments: jsonb("attachments").array().default([]),
20 |   createdAt: timestamp("createdAt").defaultNow(),
21 |   updatedAt: timestamp("updatedAt").defaultNow(),
22 | });
23 | 


--------------------------------------------------------------------------------
/app/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "~/lib/utils";
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     );
20 |   }
21 | );
22 | Textarea.displayName = "Textarea";
23 | 
24 | export { Textarea };
25 | 


--------------------------------------------------------------------------------
/app/lib/getFIleTypeIcon.tsx:
--------------------------------------------------------------------------------
 1 | // import React from "react";
 2 | import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
 3 | import {
 4 |   faFilePdf,
 5 |   faFileText,
 6 |   faFileVideo,
 7 |   faFileAudio,
 8 |   faFileLines,
 9 | } from "@fortawesome/free-solid-svg-icons";
10 | 
11 | export const getFileTypeIcon = (fileName: string) => {
12 |   const extension = fileName.match(/\.([^.]+)$/)?.[1]?.toLowerCase() || "";
13 |   switch (extension) {
14 |     case "pdf":
15 |       return <Icon icon={faFilePdf} />; // PDF icon
16 |     case "doc":
17 |     case "docx":
18 |       return <Icon icon={faFileText} />; // Word document icon
19 |     case "mp4":
20 |       return <Icon icon={faFileVideo} />; // Video icon
21 |     case "mp3":
22 |       return <Icon icon={faFileAudio} />; // Audio icon
23 |     default:
24 |       return <Icon icon={faFileLines} />; // Default file icon
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/app/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
 3 | 
 4 | import { cn } from "~/lib/utils";
 5 | 
 6 | const Separator = React.forwardRef<
 7 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 9 | >(
10 |   (
11 |     { className, orientation = "horizontal", decorative = true, ...props },
12 |     ref
13 |   ) => (
14 |     <SeparatorPrimitive.Root
15 |       ref={ref}
16 |       decorative={decorative}
17 |       orientation={orientation}
18 |       className={cn(
19 |         "shrink-0 bg-border",
20 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | );
27 | Separator.displayName = SeparatorPrimitive.Root.displayName;
28 | 
29 | export { Separator };
30 | 


--------------------------------------------------------------------------------
/.dummyacc.schema.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "http://json-schema.org/draft-07/schema#",
 3 |   "type": "object",
 4 |   "properties": {
 5 |     "accounts": {
 6 |       "type": "array",
 7 |       "description": "List of dummy accounts",
 8 |       "items": {
 9 |         "type": "object",
10 |         "properties": {
11 |           "username": {
12 |             "type": "string",
13 |             "description": "Username of the account"
14 |           },
15 |           "email": {
16 |             "type": "string",
17 |             "description": "Email of the account",
18 |             "format": "email"
19 |           },
20 |           "password": {
21 |             "type": "string",
22 |             "description": "Password of the account",
23 |             "minLength": 8
24 |           }
25 |         },
26 |         "required": ["username", "email", "password"]
27 |       }
28 |     }
29 |   },
30 |   "required": ["accounts"]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "**/*.ts",
 4 |     "**/*.tsx",
 5 |     "**/.server/**/*.ts",
 6 |     "**/.server/**/*.tsx",
 7 |     "**/.client/**/*.ts",
 8 |     "**/.client/**/*.tsx"
 9 |   ],
10 |   "compilerOptions": {
11 |     "allowImportingTsExtensions": true,
12 |     "lib": ["DOM", "DOM.Iterable", "ES2022"],
13 |     "types": ["@remix-run/node", "vite/client", "node"],
14 |     "isolatedModules": true,
15 |     "esModuleInterop": true,
16 |     "jsx": "react-jsx",
17 |     "module": "ESNext",
18 |     "moduleResolution": "Bundler",
19 |     "resolveJsonModule": true,
20 |     "target": "ES2022",
21 |     "strict": true,
22 |     "allowJs": true,
23 |     "skipLibCheck": true,
24 |     "forceConsistentCasingInFileNames": true,
25 |     "baseUrl": ".",
26 |     "paths": {
27 |       "~/*": ["./app/*"]
28 |     },
29 | 
30 |     // Vite takes care of building everything, not tsc.
31 |     "noEmit": true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/app/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "~/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 file:text-foreground",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   }
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to Remix!
 2 | 
 3 | - 📖 [Remix docs](https://remix.run/docs)
 4 | 
 5 | ## Development
 6 | 
 7 | Run the dev server:
 8 | 
 9 | ```shellscript
10 | npm run dev
11 | ```
12 | 
13 | ## Deployment
14 | 
15 | First, build your app for production:
16 | 
17 | ```sh
18 | npm run build
19 | ```
20 | 
21 | Then run the app in production mode:
22 | 
23 | ```sh
24 | npm start
25 | ```
26 | 
27 | Now you'll need to pick a host to deploy it to.
28 | 
29 | ### DIY
30 | 
31 | If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
32 | 
33 | Make sure to deploy the output of `npm run build`
34 | 
35 | - `build/server`
36 | - `build/client`
37 | 
38 | ## Styling
39 | 
40 | This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.
41 | 


--------------------------------------------------------------------------------
/app/routes/auth.verify.tsx:
--------------------------------------------------------------------------------
 1 | import type { TurnstileServerValidationResponse } from "@marsidev/react-turnstile";
 2 | import { ActionFunctionArgs, json } from "@remix-run/node";
 3 | 
 4 | const verifyEndpoint =
 5 |   "https://challenges.cloudflare.com/turnstile/v0/siteverify";
 6 | 
 7 | export async function action({ request }: ActionFunctionArgs) {
 8 |   switch (request.method) {
 9 |     case "POST": {
10 |       const { token } = (await request.json()) as { token: string };
11 |       const secret = process.env.TURNSTILE_SECRET!;
12 | 
13 |       const res = await fetch(verifyEndpoint, {
14 |         method: "POST",
15 |         body: `secret=${encodeURIComponent(
16 |           secret
17 |         )}&response=${encodeURIComponent(token)}`,
18 |         headers: {
19 |           "content-type": "application/x-www-form-urlencoded",
20 |         },
21 |       });
22 | 
23 |       const data = (await res.json()) as TurnstileServerValidationResponse;
24 | 
25 |       return json(data, {
26 |         status: data.success ? 200 : 400,
27 |       });
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/app/.server/utils.ts:
--------------------------------------------------------------------------------
 1 | import jwt from "jsonwebtoken";
 2 | import { User } from "~/types";
 3 | import * as crypto from "crypto";
 4 | import nodemailer from "nodemailer";
 5 | 
 6 | export const generateAccessToken = (user: User) => {
 7 |   return jwt.sign({ userId: user.id }, process.env.SESSION_SECRET!, {
 8 |     expiresIn: "7d",
 9 |   });
10 | };
11 | 
12 | export const generateRefreshToken = (user: User, jti: string) => {
13 |   return jwt.sign({ userId: user.id, jti }, process.env.REFRESH_SECRET!, {
14 |     expiresIn: "7d",
15 |   });
16 | };
17 | 
18 | export const generateTokens = (user: User, jti: string) => {
19 |   return {
20 |     accessToken: generateAccessToken(user),
21 |     refreshToken: generateRefreshToken(user, jti),
22 |   };
23 | };
24 | 
25 | export const hashToken = (token: string) => {
26 |   return crypto.createHash("sha512").update(token).digest("hex");
27 | };
28 | 
29 | export const MAIL_CONFIG = {
30 |   host: "smtppro.zoho.com",
31 |   port: 465,
32 |   secure: true,
33 |   tls: {
34 |     rejectUnauthorized: false,
35 |   },
36 |   auth: {
37 |     user: "pik.r@sxrup.xyz",
38 |     pass: process.env.EMAIL_PASSWORD,
39 |   },
40 | };
41 | 
42 | export const mail = nodemailer.createTransport(MAIL_CONFIG);
43 | 
44 | mail.on("error", (error) => {
45 |   console.error("Error sending email:", error);
46 | });
47 | 


--------------------------------------------------------------------------------
/app/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { cva, type VariantProps } from "class-variance-authority";
 3 | 
 4 | import { cn } from "~/lib/utils";
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |         success: "border-transparent bg-success text-success-foreground",
19 |       },
20 |     },
21 |     defaultVariants: {
22 |       variant: "default",
23 |     },
24 |   }
25 | );
26 | 
27 | export interface BadgeProps
28 |   extends React.HTMLAttributes<HTMLDivElement>,
29 |     VariantProps<typeof badgeVariants> {}
30 | 
31 | function Badge({ className, variant, ...props }: BadgeProps) {
32 |   return (
33 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
34 |   );
35 | }
36 | 
37 | export { Badge, badgeVariants };
38 | 


--------------------------------------------------------------------------------
/app/routes/files.$filename.tsx:
--------------------------------------------------------------------------------
 1 | import { LoaderFunction } from "@remix-run/node";
 2 | import * as fs from "fs";
 3 | import * as path from "path";
 4 | 
 5 | export const loader: LoaderFunction = async ({ params }) => {
 6 |   const filename = params.filename;
 7 | 
 8 |   if (!filename) {
 9 |     return new Response("Filename not provided", {
10 |       status: 400,
11 |     });
12 |   }
13 | 
14 |   // return console.log(filename);
15 | 
16 |   // Prevent path traversal attacks
17 |   if (filename.includes("..")) {
18 |     return new Response("Invalid filename", {
19 |       status: 400,
20 |     });
21 |   }
22 | 
23 |   // Prevent path traversal attacks
24 |   const safeFilename = path.basename(filename);
25 |   const filePath = path.join(process.cwd(), "uploads", safeFilename);
26 | 
27 |   try {
28 |     // Check if the file exists
29 |     await fs.promises.access(filePath, fs.constants.F_OK);
30 | 
31 |     const file = await fs.promises.readFile(filePath);
32 | 
33 |     if (file.length === 0) {
34 |       return new Response("File not found", {
35 |         status: 404,
36 |       });
37 |     }
38 | 
39 |     return new Response(file, {
40 |       headers: {
41 |         "Content-Type": "application/octet-stream",
42 |       },
43 |     });
44 |   } catch (error) {
45 |     // Handle errors (e.g., file not found, permission issues)
46 |     return new Response("Error reading file", {
47 |       status: 500,
48 |     });
49 |   }
50 | };
51 | 


--------------------------------------------------------------------------------
/app/.server/sessions.ts:
--------------------------------------------------------------------------------
 1 | import { KeyvPostgresOptions } from "@keyv/postgres/dist/types";
 2 | import crypto from "crypto";
 3 | import { Cookie, createCookie, createSessionStorage } from "@remix-run/node"; // or cloudflare/deno
 4 | import Keyv from "keyv";
 5 | import { sessionCookie } from "./cookies";
 6 | import { client } from "./redis";
 7 | import { createClient } from "redis";
 8 | 
 9 | async function createDatabaseSessionStorage({ cookie }: { cookie: Cookie }) {
10 |   await client.connect();
11 |   return createSessionStorage({
12 |     cookie,
13 |     async createData(data, expires) {
14 |       const randomBytes = crypto.randomBytes(8);
15 |       const id = randomBytes.toString("hex");
16 |       await client.hSet(`session:${id}`, data);
17 |       if (expires) {
18 |         await client.expireAt(`session:${id}`, expires.getTime());
19 |       }
20 |       return id;
21 |     },
22 |     async readData(id) {
23 |       console.log(await client.hGetAll(`session:${id}`), id);
24 |       const data = (await client.hGetAll(`session:${id}`)) ?? null;
25 |       return data;
26 |     },
27 |     async updateData(id, data, expires) {
28 |       await client.hSet(`session:${id}`, data);
29 |       if (expires) {
30 |         await client.expireAt(`session:${id}`, expires.getTime());
31 |       }
32 |     },
33 |     async deleteData(id) {
34 |       await client.del(`session:${id}`);
35 |     },
36 |   });
37 | }
38 | 
39 | export const Session = createDatabaseSessionStorage({
40 |   cookie: sessionCookie,
41 | });
42 | 


--------------------------------------------------------------------------------
/app/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
 3 | 
 4 | import { cn } from "~/lib/utils";
 5 | 
 6 | const Avatar = React.forwardRef<
 7 |   React.ElementRef<typeof AvatarPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <AvatarPrimitive.Root
11 |     ref={ref}
12 |     className={cn(
13 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
14 |       className
15 |     )}
16 |     {...props}
17 |   />
18 | ));
19 | Avatar.displayName = AvatarPrimitive.Root.displayName;
20 | 
21 | const AvatarImage = React.forwardRef<
22 |   React.ElementRef<typeof AvatarPrimitive.Image>,
23 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24 | >(({ className, ...props }, ref) => (
25 |   <AvatarPrimitive.Image
26 |     ref={ref}
27 |     className={cn("aspect-square h-full w-full", className)}
28 |     {...props}
29 |   />
30 | ));
31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName;
32 | 
33 | const AvatarFallback = React.forwardRef<
34 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
35 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36 | >(({ className, ...props }, ref) => (
37 |   <AvatarPrimitive.Fallback
38 |     ref={ref}
39 |     className={cn(
40 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
41 |       className
42 |     )}
43 |     {...props}
44 |   />
45 | ));
46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
47 | 
48 | export { Avatar, AvatarImage, AvatarFallback };
49 | 


--------------------------------------------------------------------------------
/drizzle/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "id": "90c83d01-0d1d-4c3d-9fe8-a4fa881d9cfd",
 3 |   "prevId": "00000000-0000-0000-0000-000000000000",
 4 |   "version": "7",
 5 |   "dialect": "postgresql",
 6 |   "tables": {
 7 |     "public.users": {
 8 |       "name": "users",
 9 |       "schema": "",
10 |       "columns": {
11 |         "id": {
12 |           "name": "id",
13 |           "type": "uuid",
14 |           "primaryKey": true,
15 |           "notNull": true,
16 |           "default": "gen_random_uuid()"
17 |         },
18 |         "email": {
19 |           "name": "email",
20 |           "type": "varchar",
21 |           "primaryKey": false,
22 |           "notNull": false
23 |         },
24 |         "password": {
25 |           "name": "password",
26 |           "type": "varchar",
27 |           "primaryKey": false,
28 |           "notNull": true
29 |         },
30 |         "username": {
31 |           "name": "username",
32 |           "type": "varchar",
33 |           "primaryKey": false,
34 |           "notNull": false,
35 |           "default": "'Anonymous 269587e0'"
36 |         },
37 |         "createdAt": {
38 |           "name": "createdAt",
39 |           "type": "timestamp",
40 |           "primaryKey": false,
41 |           "notNull": false,
42 |           "default": "now()"
43 |         },
44 |         "updatedAt": {
45 |           "name": "updatedAt",
46 |           "type": "timestamp",
47 |           "primaryKey": false,
48 |           "notNull": false,
49 |           "default": "now()"
50 |         }
51 |       },
52 |       "indexes": {},
53 |       "foreignKeys": {},
54 |       "compositePrimaryKeys": {},
55 |       "uniqueConstraints": {
56 |         "users_email_unique": {
57 |           "name": "users_email_unique",
58 |           "nullsNotDistinct": false,
59 |           "columns": [
60 |             "email"
61 |           ]
62 |         }
63 |       }
64 |     }
65 |   },
66 |   "enums": {},
67 |   "schemas": {},
68 |   "sequences": {},
69 |   "_meta": {
70 |     "columns": {},
71 |     "schemas": {},
72 |     "tables": {}
73 |   }
74 | }


--------------------------------------------------------------------------------
/app/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "~/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | );
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean;
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button";
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     );
52 |   }
53 | );
54 | Button.displayName = "Button";
55 | 
56 | export { Button, buttonVariants };
57 | 


--------------------------------------------------------------------------------
/app/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as TabsPrimitive from "@radix-ui/react-tabs";
 3 | 
 4 | import { cn } from "~/lib/utils";
 5 | 
 6 | const Tabs = TabsPrimitive.Root;
 7 | 
 8 | const TabsList = React.forwardRef<
 9 |   React.ElementRef<typeof TabsPrimitive.List>,
10 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
11 | >(({ className, ...props }, ref) => (
12 |   <TabsPrimitive.List
13 |     ref={ref}
14 |     className={cn(
15 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ));
21 | TabsList.displayName = TabsPrimitive.List.displayName;
22 | 
23 | const TabsTrigger = React.forwardRef<
24 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
26 | >(({ className, ...props }, ref) => (
27 |   <TabsPrimitive.Trigger
28 |     ref={ref}
29 |     className={cn(
30 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
31 |       className
32 |     )}
33 |     {...props}
34 |   />
35 | ));
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
37 | 
38 | const TabsContent = React.forwardRef<
39 |   React.ElementRef<typeof TabsPrimitive.Content>,
40 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
41 | >(({ className, ...props }, ref) => (
42 |   <TabsPrimitive.Content
43 |     ref={ref}
44 |     className={cn(
45 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
46 |       className
47 |     )}
48 |     {...props}
49 |   />
50 | ));
51 | TabsContent.displayName = TabsPrimitive.Content.displayName;
52 | 
53 | export { Tabs, TabsList, TabsTrigger, TabsContent };
54 | 


--------------------------------------------------------------------------------
/app/routes/auth.register.tsx:
--------------------------------------------------------------------------------
 1 | import { ActionFunctionArgs, json } from "@remix-run/node";
 2 | import { DB } from "~/.server/db.server";
 3 | 
 4 | export async function action({ request }: ActionFunctionArgs) {
 5 |   switch (request.method) {
 6 |     case "POST": {
 7 |       const { createUser, getUser } = new DB();
 8 |       const { username, email, password } = (await request.json()) as {
 9 |         username: string;
10 |         email: string;
11 |         password: string;
12 |       };
13 | 
14 |       try {
15 |         const checkUser = await getUser({ email: email });
16 | 
17 |         if (checkUser?.email === email) {
18 |           throw new Error("Email is already in use. Please use another email.");
19 |         }
20 | 
21 |         await createUser({ username, email, password });
22 | 
23 |         return json(
24 |           {
25 |             status: "success",
26 |             code: 200,
27 |             message: "User successfully created",
28 |           },
29 |           {
30 |             headers: {
31 |               "Content-Type": "application/json",
32 |             },
33 |             status: 201,
34 |           }
35 |         );
36 |       } catch (error) {
37 |         if (
38 |           (error as any).message ===
39 |           "Email is already in use. Please use another email."
40 |         ) {
41 |           return json(
42 |             {
43 |               status: "error",
44 |               code: 409,
45 |               message: "Email is already in use. Please use another email.",
46 |             },
47 |             {
48 |               headers: {
49 |                 "Content-Type": "application/json",
50 |               },
51 |               status: 409,
52 |             }
53 |           );
54 |         }
55 | 
56 |         return json(
57 |           {
58 |             status: "error",
59 |             code: 500,
60 |             message: "Error creating user: " + (error as any).message,
61 |           },
62 |           {
63 |             headers: {
64 |               "Content-Type": "application/json",
65 |             },
66 |             status: 500,
67 |           }
68 |         );
69 |       }
70 |     }
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/app/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "~/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ));
18 | Card.displayName = "Card";
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ));
30 | CardHeader.displayName = "CardHeader";
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ));
45 | CardTitle.displayName = "CardTitle";
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ));
57 | CardDescription.displayName = "CardDescription";
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ));
65 | CardContent.displayName = "CardContent";
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ));
77 | CardFooter.displayName = "CardFooter";
78 | 
79 | export {
80 |   Card,
81 |   CardHeader,
82 |   CardFooter,
83 |   CardTitle,
84 |   CardDescription,
85 |   CardContent,
86 | };
87 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This is intended to be a basic starting point for linting in your app.
 3 |  * It relies on recommended configs out of the box for simplicity, but you can
 4 |  * and should modify this configuration to best suit your team's needs.
 5 |  */
 6 | 
 7 | /** @type {import('eslint').Linter.Config} */
 8 | module.exports = {
 9 |   root: true,
10 |   parserOptions: {
11 |     ecmaVersion: "latest",
12 |     sourceType: "module",
13 |     ecmaFeatures: {
14 |       jsx: true,
15 |     },
16 |   },
17 |   env: {
18 |     browser: true,
19 |     commonjs: true,
20 |     es6: true,
21 |   },
22 |   ignorePatterns: ["!**/.server", "!**/.client", "!**/node_modules"],
23 | 
24 |   rules: {
25 |     "no-console": ["error", { allow: ["warn", "error"] }],
26 |   },
27 | 
28 |   // Base config
29 |   extends: ["eslint:recommended"],
30 | 
31 |   overrides: [
32 |     // React
33 |     {
34 |       files: ["**/*.{js,jsx,ts,tsx}"],
35 |       plugins: ["react", "jsx-a11y"],
36 |       extends: [
37 |         "plugin:react/recommended",
38 |         "plugin:react/jsx-runtime",
39 |         "plugin:react-hooks/recommended",
40 |         "plugin:jsx-a11y/recommended",
41 |       ],
42 |       settings: {
43 |         react: {
44 |           version: "detect",
45 |         },
46 |         formComponents: ["Form"],
47 |         linkComponents: [
48 |           { name: "Link", linkAttribute: "to" },
49 |           { name: "NavLink", linkAttribute: "to" },
50 |         ],
51 |         "import/resolver": {
52 |           typescript: {},
53 |         },
54 |       },
55 |     },
56 | 
57 |     // Typescript
58 |     {
59 |       files: ["**/*.{ts,tsx}"],
60 |       plugins: ["@typescript-eslint", "import"],
61 |       parser: "@typescript-eslint/parser",
62 |       settings: {
63 |         "import/internal-regex": "^~/",
64 |         "import/resolver": {
65 |           node: {
66 |             extensions: [".ts", ".tsx"],
67 |           },
68 |           typescript: {
69 |             alwaysTryTypes: true,
70 |           },
71 |         },
72 |       },
73 |       extends: [
74 |         "plugin:@typescript-eslint/recommended",
75 |         "plugin:import/recommended",
76 |         "plugin:import/typescript",
77 |       ],
78 |     },
79 | 
80 |     // Node
81 |     {
82 |       files: [".eslintrc.cjs"],
83 |       env: {
84 |         node: true,
85 |       },
86 |     },
87 |   ],
88 | };
89 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Links,
 3 |   Meta,
 4 |   Outlet,
 5 |   Scripts,
 6 |   ScrollRestoration,
 7 |   useLoaderData,
 8 |   useNavigate,
 9 | } from "@remix-run/react";
10 | import styles from "./tailwind.css?url";
11 | import "react-toastify/dist/ReactToastify.min.css";
12 | import { library } from "@fortawesome/fontawesome-svg-core";
13 | import {
14 |   faEye,
15 |   faEyeSlash,
16 |   faFileAudio,
17 |   faFileImage,
18 |   faFileLines,
19 |   faFilePdf,
20 |   faFileText,
21 |   faFileVideo,
22 | } from "@fortawesome/free-solid-svg-icons";
23 | import { ToastContainer } from "react-toastify";
24 | import { jwtDecode } from "jwt-decode";
25 | import { useEffect } from "react";
26 | import { LinksFunction, LoaderFunction } from "@remix-run/node";
27 | import Navbar from "~/components/ui/navbar";
28 | 
29 | export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
30 | 
31 | const isTokenExpired = (token: string) => {
32 |   if (!token) return true;
33 |   try {
34 |     const decodedToken = jwtDecode(token);
35 |     const currentTime = Date.now() / 1000;
36 |     return decodedToken.exp! < currentTime;
37 |   } catch (error) {
38 |     console.error("Error decoding token:", error);
39 |     return true;
40 |   }
41 | };
42 | 
43 | library.add(
44 |   faEye,
45 |   faEyeSlash,
46 |   faFilePdf,
47 |   faFileImage,
48 |   faFileAudio,
49 |   faFileText,
50 |   faFileVideo,
51 |   faFileLines
52 | );
53 | 
54 | export const loader: LoaderFunction = async ({ request }) => {
55 |   const url = request.url.split("?")[0];
56 |   const pathname = url.split("/")[3];
57 |   console.log(pathname);
58 |   return pathname;
59 | };
60 | 
61 | export function Layout({ children }: { children: React.ReactNode }) {
62 |   const navigate = useNavigate();
63 |   const data = useLoaderData<string>();
64 | 
65 |   useEffect(() => {
66 |     const token = localStorage.getItem("token");
67 |     if (!token) return;
68 |     if (isTokenExpired(token)) {
69 |       localStorage.removeItem("token");
70 |       navigate("/login");
71 |     }
72 |   }, []);
73 | 
74 |   return (
75 |     <html lang="en">
76 |       <head>
77 |         <meta charSet="utf-8" />
78 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
79 |         <Meta />
80 |         <Links />
81 |       </head>
82 |       <body>
83 |         <Navbar />
84 |         <ToastContainer />
85 |         {children}
86 |         <ScrollRestoration />
87 |         <Scripts />
88 |       </body>
89 |     </html>
90 |   );
91 | }
92 | 
93 | export default function App() {
94 |   return <Outlet />;
95 | }
96 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import { Config } from "tailwindcss";
 2 | 
 3 | module.exports = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     "./pages/**/*.{ts,tsx}",
 7 |     "./components/**/*.{ts,tsx}",
 8 |     "./app/**/*.{ts,tsx}",
 9 |     "./src/**/*.{ts,tsx}",
10 |     "./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
11 |   ],
12 |   prefix: "",
13 |   theme: {
14 |     container: {
15 |       center: true,
16 |       padding: "2rem",
17 |       screens: {
18 |         "2xl": "1400px",
19 |       },
20 |     },
21 |     fontFamily: {
22 |       koulen: ["Koulen", "sans-serif"],
23 |     },
24 |     extend: {
25 |       colors: {
26 |         border: "hsl(var(--border))",
27 |         input: "hsl(var(--input))",
28 |         ring: "hsl(var(--ring))",
29 |         background: "hsl(var(--background))",
30 |         foreground: "hsl(var(--foreground))",
31 |         primary: {
32 |           DEFAULT: "hsl(var(--primary))",
33 |           foreground: "hsl(var(--primary-foreground))",
34 |         },
35 |         secondary: {
36 |           DEFAULT: "hsl(var(--secondary))",
37 |           foreground: "hsl(var(--secondary-foreground))",
38 |         },
39 |         destructive: {
40 |           DEFAULT: "hsl(var(--destructive))",
41 |           foreground: "hsl(var(--destructive-foreground))",
42 |         },
43 |         success: {
44 |           DEFAULT: "hsl(var(--success))",
45 |           foreground: "hsl(var(--success-foreground))",
46 |         },
47 |         muted: {
48 |           DEFAULT: "hsl(var(--muted))",
49 |           foreground: "hsl(var(--muted-foreground))",
50 |         },
51 |         accent: {
52 |           DEFAULT: "hsl(var(--accent))",
53 |           foreground: "hsl(var(--accent-foreground))",
54 |         },
55 |         popover: {
56 |           DEFAULT: "hsl(var(--popover))",
57 |           foreground: "hsl(var(--popover-foreground))",
58 |         },
59 |         card: {
60 |           DEFAULT: "hsl(var(--card))",
61 |           foreground: "hsl(var(--card-foreground))",
62 |         },
63 |       },
64 |       borderRadius: {
65 |         lg: "var(--radius)",
66 |         md: "calc(var(--radius) - 2px)",
67 |         sm: "calc(var(--radius) - 4px)",
68 |       },
69 |       keyframes: {
70 |         "accordion-down": {
71 |           from: { height: "0" },
72 |           to: { height: "var(--radix-accordion-content-height)" },
73 |         },
74 |         "accordion-up": {
75 |           from: { height: "var(--radix-accordion-content-height)" },
76 |           to: { height: "0" },
77 |         },
78 |       },
79 |       animation: {
80 |         "accordion-down": "accordion-down 0.2s ease-out",
81 |         "accordion-up": "accordion-up 0.2s ease-out",
82 |       },
83 |     },
84 |   },
85 |   plugins: [require("tailwindcss-animate"), require("@tailwindcss/forms")],
86 | } satisfies Config;
87 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "recotalk",
 3 |   "private": true,
 4 |   "sideEffects": false,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "build": "remix vite:build",
 8 |     "dev": "remix vite:dev",
 9 |     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
10 |     "start": "remix-serve ./build/server/index.js",
11 |     "typecheck": "tsc"
12 |   },
13 |   "resolutions": {
14 |     "string-width": "^5.1.2"
15 |   },
16 |   "dependencies": {
17 |     "@fortawesome/fontawesome-svg-core": "^6.6.0",
18 |     "@fortawesome/free-regular-svg-icons": "^6.6.0",
19 |     "@fortawesome/free-solid-svg-icons": "^6.6.0",
20 |     "@fortawesome/react-fontawesome": "^0.2.2",
21 |     "@keyv/postgres": "^1.4.11",
22 |     "@marsidev/react-turnstile": "^1.0.2",
23 |     "@neondatabase/serverless": "^0.9.5",
24 |     "@radix-ui/react-alert-dialog": "^1.1.1",
25 |     "@radix-ui/react-avatar": "^1.1.0",
26 |     "@radix-ui/react-dialog": "^1.1.1",
27 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
28 |     "@radix-ui/react-separator": "^1.1.0",
29 |     "@radix-ui/react-slot": "^1.1.0",
30 |     "@radix-ui/react-tabs": "^1.1.0",
31 |     "@remix-run/node": "^2.10.3",
32 |     "@remix-run/react": "^2.10.3",
33 |     "@remix-run/serve": "^2.10.3",
34 |     "@types/bcryptjs": "^2.4.6",
35 |     "bcryptjs": "^2.4.3",
36 |     "class-variance-authority": "^0.7.0",
37 |     "clsx": "^2.1.1",
38 |     "drizzle-orm": "^0.33.0",
39 |     "highlight.js": "^11.10.0",
40 |     "input-otp": "^1.2.4",
41 |     "isbot": "^4.1.0",
42 |     "jsonwebtoken": "^9.0.2",
43 |     "jwt-decode": "^4.0.0",
44 |     "keyv": "^4.5.4",
45 |     "lucide-react": "^0.435.0",
46 |     "nodemailer": "^6.9.15",
47 |     "react": "^18.2.0",
48 |     "react-dom": "^18.2.0",
49 |     "react-markdown": "^9.0.1",
50 |     "react-toastify": "^10.0.5",
51 |     "redis": "^4.7.0",
52 |     "tailwind-merge": "^2.5.2",
53 |     "tailwindcss-animate": "^1.0.7",
54 |     "uuid": "^10.0.0",
55 |     "zod": "^3.23.8"
56 |   },
57 |   "devDependencies": {
58 |     "@remix-run/dev": "^2.10.3",
59 |     "@tailwindcss/forms": "^0.5.7",
60 |     "@types/bcrypt": "^5.0.2",
61 |     "@types/jsonwebtoken": "^9.0.6",
62 |     "@types/nodemailer": "^6.4.15",
63 |     "@types/react": "^18.2.20",
64 |     "@types/react-dom": "^18.2.7",
65 |     "@types/uuid": "^10.0.0",
66 |     "@types/ws": "^8.5.12",
67 |     "@typescript-eslint/eslint-plugin": "^6.7.4",
68 |     "@typescript-eslint/parser": "^6.7.4",
69 |     "autoprefixer": "^10.4.19",
70 |     "drizzle-kit": "^0.24.2",
71 |     "eslint": "^8.38.0",
72 |     "eslint-import-resolver-typescript": "^3.6.1",
73 |     "eslint-plugin-import": "^2.28.1",
74 |     "eslint-plugin-jsx-a11y": "^6.7.1",
75 |     "eslint-plugin-react": "^7.33.2",
76 |     "eslint-plugin-react-hooks": "^4.6.0",
77 |     "postcss": "^8.4.38",
78 |     "tailwindcss": "^3.4.4",
79 |     "typescript": "^5.1.6",
80 |     "vite": "^5.1.0",
81 |     "vite-tsconfig-paths": "^4.2.1"
82 |   },
83 |   "engines": {
84 |     "node": ">=20.0.0"
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/app/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | 
  3 | import { cn } from "~/lib/utils";
  4 | 
  5 | const Table = React.forwardRef<
  6 |   HTMLTableElement,
  7 |   React.HTMLAttributes<HTMLTableElement>
  8 | >(({ className, ...props }, ref) => (
  9 |   <div className="relative w-full overflow-auto">
 10 |     <table
 11 |       ref={ref}
 12 |       className={cn("w-full caption-bottom text-sm", className)}
 13 |       {...props}
 14 |     />
 15 |   </div>
 16 | ));
 17 | Table.displayName = "Table";
 18 | 
 19 | const TableHeader = React.forwardRef<
 20 |   HTMLTableSectionElement,
 21 |   React.HTMLAttributes<HTMLTableSectionElement>
 22 | >(({ className, ...props }, ref) => (
 23 |   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24 | ));
 25 | TableHeader.displayName = "TableHeader";
 26 | 
 27 | const TableBody = React.forwardRef<
 28 |   HTMLTableSectionElement,
 29 |   React.HTMLAttributes<HTMLTableSectionElement>
 30 | >(({ className, ...props }, ref) => (
 31 |   <tbody
 32 |     ref={ref}
 33 |     className={cn("[&_tr:last-child]:border-0", className)}
 34 |     {...props}
 35 |   />
 36 | ));
 37 | TableBody.displayName = "TableBody";
 38 | 
 39 | const TableFooter = React.forwardRef<
 40 |   HTMLTableSectionElement,
 41 |   React.HTMLAttributes<HTMLTableSectionElement>
 42 | >(({ className, ...props }, ref) => (
 43 |   <tfoot
 44 |     ref={ref}
 45 |     className={cn(
 46 |       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47 |       className
 48 |     )}
 49 |     {...props}
 50 |   />
 51 | ));
 52 | TableFooter.displayName = "TableFooter";
 53 | 
 54 | const TableRow = React.forwardRef<
 55 |   HTMLTableRowElement,
 56 |   React.HTMLAttributes<HTMLTableRowElement>
 57 | >(({ className, ...props }, ref) => (
 58 |   <tr
 59 |     ref={ref}
 60 |     className={cn(
 61 |       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62 |       className
 63 |     )}
 64 |     {...props}
 65 |   />
 66 | ));
 67 | TableRow.displayName = "TableRow";
 68 | 
 69 | const TableHead = React.forwardRef<
 70 |   HTMLTableCellElement,
 71 |   React.ThHTMLAttributes<HTMLTableCellElement>
 72 | >(({ className, ...props }, ref) => (
 73 |   <th
 74 |     ref={ref}
 75 |     className={cn(
 76 |       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | ));
 82 | TableHead.displayName = "TableHead";
 83 | 
 84 | const TableCell = React.forwardRef<
 85 |   HTMLTableCellElement,
 86 |   React.TdHTMLAttributes<HTMLTableCellElement>
 87 | >(({ className, ...props }, ref) => (
 88 |   <td
 89 |     ref={ref}
 90 |     className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91 |     {...props}
 92 |   />
 93 | ));
 94 | TableCell.displayName = "TableCell";
 95 | 
 96 | const TableCaption = React.forwardRef<
 97 |   HTMLTableCaptionElement,
 98 |   React.HTMLAttributes<HTMLTableCaptionElement>
 99 | >(({ className, ...props }, ref) => (
100 |   <caption
101 |     ref={ref}
102 |     className={cn("mt-4 text-sm text-muted-foreground", className)}
103 |     {...props}
104 |   />
105 | ));
106 | TableCaption.displayName = "TableCaption";
107 | 
108 | export {
109 |   Table,
110 |   TableHeader,
111 |   TableBody,
112 |   TableFooter,
113 |   TableHead,
114 |   TableRow,
115 |   TableCell,
116 |   TableCaption,
117 | };
118 | 


--------------------------------------------------------------------------------
/app/tailwind.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | 
  6 | @layer base {
  7 |   @import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
  8 | 
  9 |   a {
 10 |     @apply text-blue-500 hover:underline hover:text-blue-500/50;
 11 |   }
 12 | 
 13 |   :root {
 14 |     --foreground: 0 0% 100%;
 15 |     --background: 222.2 84% 4.9%;
 16 |     /* --card: 0 0% 100%; */
 17 |     --card: 229 51% 18%;
 18 |     /* --card-foreground: 222.2 84% 4.9%; */
 19 |     --card-foreground: 0 0% 100%;
 20 |     --popover: 222.2 84% 4.9%;
 21 |     --popover-foreground: 0 0% 100%;
 22 |     /* --primary: 222.2 47.4% 11.2%; */
 23 |     --primary: 217 91% 60%;
 24 |     --primary-foreground: 210 40% 98%;
 25 |     --secondary: 217 18% 36%;
 26 |     --secondary-foreground: 210 40% 98%;
 27 |     --muted: 240 4% 25%;
 28 |     /* --muted-foreground: 214, 40%, 74%; */
 29 |     /* --muted: 210 40% 96.1%; */
 30 |     --success: 120 40% 50%;
 31 |     --success-foreground: 0 0% 100%;
 32 |     --muted-foreground: 214 23% 43%;
 33 |     --accent: 210 40% 96.1%;
 34 |     --accent-foreground: 222.2 47.4% 11.2%;
 35 |     --destructive: 0 84.2% 60.2%;
 36 |     --destructive-foreground: 210 40% 98%;
 37 |     --border: 214.3 31.8% 91.4%;
 38 |     --input: 214.3 31.8% 91.4%;
 39 |     --ring: 222.2 84% 4.9%;
 40 |     --radius: 0.5rem;
 41 |     --chart-1: 12 76% 61%;
 42 |     --chart-2: 173 58% 39%;
 43 |     --chart-3: 197 37% 24%;
 44 |     --chart-4: 43 74% 66%;
 45 |     --chart-5: 27 87% 67%;
 46 |   }
 47 | 
 48 |   .dark {
 49 |     --background: 222.2 84% 4.9%;
 50 |     --foreground: 210 40% 98%;
 51 |     --card: 222.2 84% 4.9%;
 52 |     --card-foreground: 210 40% 98%;
 53 |     --popover: 222.2 84% 4.9%;
 54 |     --popover-foreground: 210 40% 98%;
 55 |     --primary: 210 40% 98%;
 56 |     --primary-foreground: 222.2 47.4% 11.2%;
 57 |     --secondary: 217.2 32.6% 17.5%;
 58 |     --secondary-foreground: 210 40% 98%;
 59 |     --muted: 217.2 32.6% 17.5%;
 60 |     --muted-foreground: 215 20.2% 65.1%;
 61 |     --accent: 217.2 32.6% 17.5%;
 62 |     --accent-foreground: 210 40% 98%;
 63 |     --destructive: 0 62.8% 30.6%;
 64 |     --destructive-foreground: 210 40% 98%;
 65 |     --border: 217.2 32.6% 17.5%;
 66 |     --input: 217.2 32.6% 17.5%;
 67 |     --ring: 212.7 26.8% 83.9%;
 68 |     --chart-1: 220 70% 50%;
 69 |     --chart-2: 160 60% 45%;
 70 |     --chart-3: 30 80% 55%;
 71 |     --chart-4: 280 65% 60%;
 72 |     --chart-5: 340 75% 55%;
 73 |   }
 74 | 
 75 |   /* khmer */
 76 |   @font-face {
 77 |     font-family: 'Koulen';
 78 |     font-style: normal;
 79 |     font-weight: 400;
 80 |     font-display: swap;
 81 |     src: url(https://fonts.gstatic.com/s/koulen/v28/AMOQz46as3KIBPemjno8ouY.woff2) format('woff2');
 82 |     unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
 83 |   }
 84 | 
 85 |   /* latin */
 86 |   @font-face {
 87 |     font-family: 'Koulen';
 88 |     font-style: normal;
 89 |     font-weight: 400;
 90 |     font-display: swap;
 91 |     src: url(https://fonts.gstatic.com/s/koulen/v28/AMOQz46as3KIBPemhXo8.woff2) format('woff2');
 92 |     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 93 |   }
 94 | }
 95 | 
 96 | @layer base {
 97 |   * {
 98 |     @apply border-border;
 99 |   }
100 | 
101 |   body {
102 |     @apply bg-background text-foreground;
103 |   }
104 | }


--------------------------------------------------------------------------------
/app/components/alert-dialog-json.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useRef, useCallback } from "react";
  4 | import hljs from "highlight.js/lib/core";
  5 | import json from "highlight.js/lib/languages/json";
  6 | import "highlight.js/styles/github-dark.css";
  7 | import {
  8 |   AlertDialog,
  9 |   AlertDialogAction,
 10 |   AlertDialogCancel,
 11 |   AlertDialogContent,
 12 |   AlertDialogDescription,
 13 |   AlertDialogFooter,
 14 |   AlertDialogHeader,
 15 |   AlertDialogTitle,
 16 |   AlertDialogTrigger,
 17 | } from "~/components/ui/alert-dialog";
 18 | import { Button } from "~/components/ui/button";
 19 | 
 20 | hljs.registerLanguage("json", json);
 21 | 
 22 | export function AlertDialogDemo({
 23 |   className,
 24 |   buttonText,
 25 |   dialogTitle,
 26 |   dialogContent,
 27 |   lang,
 28 |   close,
 29 |   closeText,
 30 |   confirm,
 31 |   confirmText,
 32 |   children,
 33 | }: {
 34 |   className?: string;
 35 |   buttonText: string;
 36 |   dialogTitle: string;
 37 |   dialogContent: string;
 38 |   lang: string;
 39 |   close?: boolean;
 40 |   closeText?: string;
 41 |   confirm?: boolean;
 42 |   confirmText?: string;
 43 |   children?: React.ReactNode;
 44 | }) {
 45 |   const codeRef = useRef<HTMLElement | null>(null);
 46 |   const observerRef = useRef<MutationObserver | null>(null);
 47 | 
 48 |   const highlightCode = useCallback(() => {
 49 |     if (codeRef.current) {
 50 |       hljs.highlightElement(codeRef.current);
 51 |     }
 52 |   }, []);
 53 | 
 54 |   useEffect(() => {
 55 |     const targetNode = document.body;
 56 |     const config = { childList: true, subtree: true };
 57 | 
 58 |     const callback = (mutationsList: MutationRecord[]) => {
 59 |       for (const mutation of mutationsList) {
 60 |         if (mutation.type === "childList") {
 61 |           mutation.addedNodes.forEach((node) => {
 62 |             if (
 63 |               node instanceof HTMLElement &&
 64 |               node.classList.contains("alert-dialog-content")
 65 |             ) {
 66 |               highlightCode();
 67 |             }
 68 |           });
 69 |         }
 70 |       }
 71 |     };
 72 | 
 73 |     observerRef.current = new MutationObserver(callback);
 74 |     observerRef.current.observe(targetNode, config);
 75 | 
 76 |     // Initial check in case the content is already in the DOM
 77 |     highlightCode();
 78 | 
 79 |     return () => {
 80 |       if (observerRef.current) {
 81 |         observerRef.current.disconnect();
 82 |       }
 83 |     };
 84 |   }, [highlightCode]);
 85 | 
 86 |   return (
 87 |     <AlertDialog>
 88 |       <AlertDialogTrigger asChild className={className}>
 89 |         <Button variant="default">
 90 |           {buttonText} {children}
 91 |         </Button>
 92 |       </AlertDialogTrigger>
 93 |       <AlertDialogContent className="max-w-3xl alert-dialog-content">
 94 |         <AlertDialogHeader>
 95 |           <AlertDialogTitle>{dialogTitle}</AlertDialogTitle>
 96 |           <AlertDialogDescription asChild>
 97 |             <div className="max-h-[60vh] overflow-y-auto rounded bg-gray-900 p-4">
 98 |               <pre className="text-sm">
 99 |                 <code ref={codeRef} className={`language-${lang}`}>
100 |                   {dialogContent}
101 |                 </code>
102 |               </pre>
103 |             </div>
104 |           </AlertDialogDescription>
105 |         </AlertDialogHeader>
106 |         <AlertDialogFooter>
107 |           {close && (
108 |             <AlertDialogCancel asChild>
109 |               <Button variant="outline">
110 |                 {closeText ? closeText : "Close"}
111 |               </Button>
112 |             </AlertDialogCancel>
113 |           )}
114 |           {confirm && (
115 |             <AlertDialogAction asChild>
116 |               <Button variant="default">
117 |                 {confirmText ? confirmText : "Confirm"}
118 |               </Button>
119 |             </AlertDialogAction>
120 |           )}
121 |         </AlertDialogFooter>
122 |       </AlertDialogContent>
123 |     </AlertDialog>
124 |   );
125 | }
126 | 


--------------------------------------------------------------------------------
/app/routes/_index.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   json,
  3 |   redirect,
  4 |   type ActionFunction,
  5 |   type LoaderFunction,
  6 |   type MetaFunction,
  7 | } from "@remix-run/node";
  8 | import { useLoaderData } from "@remix-run/react";
  9 | import { jwtDecode } from "jwt-decode";
 10 | import { login } from "~/.server/cookies";
 11 | import type { User } from "~/types";
 12 | import { Session } from "~/.server/sessions";
 13 | import { Button } from "~/components/ui/button";
 14 | import { mail } from "~/.server/utils";
 15 | import { client } from "~/.server/redis";
 16 | 
 17 | const isTokenExpired = (token: string) => {
 18 |   if (!token) return true;
 19 |   try {
 20 |     const decodedToken = jwtDecode(token);
 21 |     const currentTime = Date.now() / 1000;
 22 |     return decodedToken.exp! < currentTime;
 23 |   } catch (error) {
 24 |     console.error("Error decoding token:", error);
 25 |     return true;
 26 |   }
 27 | };
 28 | 
 29 | export const meta: MetaFunction = () => {
 30 |   return [
 31 |     { title: "New Remix App" },
 32 |     { name: "description", content: "Welcome to Remix!" },
 33 |   ];
 34 | };
 35 | 
 36 | export const loader: LoaderFunction = async ({ request }) => {
 37 |   const cookieHeader = request.headers.get("Cookie");
 38 |   const cookie = (await login.parse(cookieHeader)) ?? { isLoggedIn: false };
 39 |   const { getSession } = await Session;
 40 |   const session = await getSession(cookieHeader);
 41 | 
 42 |   // mail.sendMail({
 43 |   //   from: '"PIK R" <pik.r@sxrup.xyz>',
 44 |   //   to: "goodgamersz665@gmail.com",
 45 |   //   subject: "Hello",
 46 |   //   text: "Hello world?",
 47 |   //   html: "<b>Hello world?</b>",
 48 |   // });
 49 | 
 50 |   // console.log(cookie);
 51 | 
 52 |   return json({
 53 |     isLoggedIn: !isTokenExpired(session.get("token")),
 54 |     user: cookie.user,
 55 |     expired: cookie.expired,
 56 |   });
 57 | };
 58 | 
 59 | export const action: ActionFunction = async ({ request }) => {
 60 |   const cookieHeader = request.headers.get("Cookie");
 61 |   const cookie = (await login.parse(cookieHeader)) ?? { isLoggedIn: false };
 62 | 
 63 |   if (!cookie.isLoggedIn) {
 64 |     cookie.isLoggedIn = false;
 65 |   }
 66 | 
 67 |   return redirect("/login", {
 68 |     headers: {
 69 |       "Set-Cookie": await login.serialize(cookie),
 70 |     },
 71 |   });
 72 | };
 73 | 
 74 | function Logged() {
 75 |   const user = useLoaderData<{
 76 |     user: User;
 77 |     isLoggedIn: boolean;
 78 |     expired: number;
 79 |   }>().user;
 80 | 
 81 |   return (
 82 |     <div className="p-4 font-sans">
 83 |       <h1 className="text-3xl">Welcome back, {user.username}</h1>
 84 |       <p className="mt-4">
 85 |         You are logged in. You can now access the{" "}
 86 |         <a
 87 |           className="text-blue-700 underline visited:text-purple-900"
 88 |           href="/dashboard"
 89 |         >
 90 |           dashboard
 91 |         </a>
 92 |         .
 93 |       </p>
 94 |     </div>
 95 |   );
 96 | }
 97 | 
 98 | function NotLogged() {
 99 |   return (
100 |     <div className="p-4 font-sans">
101 |       <Button>Click me!</Button>
102 |       <h1 className="text-3xl">Welcome to Remix</h1>
103 |       <ul className="pl-6 mt-4 space-y-2 list-disc">
104 |         <li>
105 |           <a
106 |             className="text-blue-700 underline visited:text-purple-900"
107 |             target="_blank"
108 |             href="https://remix.run/start/quickstart"
109 |             rel="noreferrer"
110 |           >
111 |             5m Quick Start
112 |           </a>
113 |         </li>
114 |         <li>
115 |           <a
116 |             className="text-blue-700 underline visited:text-purple-900"
117 |             target="_blank"
118 |             href="https://remix.run/start/tutorial"
119 |             rel="noreferrer"
120 |           >
121 |             30m Tutorial
122 |           </a>
123 |         </li>
124 |         <li>
125 |           <a
126 |             className="text-blue-700 underline visited:text-purple-900"
127 |             target="_blank"
128 |             href="https://remix.run/docs"
129 |             rel="noreferrer"
130 |           >
131 |             Remix Docs
132 |           </a>
133 |         </li>
134 |       </ul>
135 |     </div>
136 |   );
137 | }
138 | 
139 | export default function Index() {
140 |   const data = useLoaderData<{
141 |     isLoggedIn: boolean;
142 |     user: User;
143 |     expired: number;
144 |   }>();
145 |   return data.isLoggedIn ? <Logged /> : <NotLogged />;
146 | }
147 | 


--------------------------------------------------------------------------------
/app/routes/threads.$id.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   json,
  3 |   LoaderFunction,
  4 |   LoaderFunctionArgs,
  5 |   TypedResponse,
  6 | } from "@remix-run/node";
  7 | import { useLoaderData } from "@remix-run/react";
  8 | import React from "react";
  9 | import { DB } from "~/.server/db.server";
 10 | import { Textarea } from "~/components/ui/textarea";
 11 | import type { Thread } from "~/types/Thread";
 12 | import ReactMarkdown from "react-markdown";
 13 | import { getFileTypeIcon } from "~/lib/getFIleTypeIcon";
 14 | import { Button } from "~/components/ui/button";
 15 | import { Separator } from "~/components/ui/separator";
 16 | 
 17 | export async function loader({
 18 |   params,
 19 | }: LoaderFunctionArgs): Promise<
 20 |   | TypedResponse<Thread>
 21 |   | TypedResponse<{ status: string; code: number; message: string }>
 22 | > {
 23 |   const db = new DB();
 24 |   const id = params.id;
 25 | 
 26 |   if (!id) {
 27 |     return json(
 28 |       {
 29 |         status: "error",
 30 |         code: 400,
 31 |         message: "Bad request",
 32 |       },
 33 |       400
 34 |     );
 35 |   }
 36 | 
 37 |   const thread = await db.getThread(id);
 38 | 
 39 |   return json(thread, 200);
 40 | }
 41 | 
 42 | interface ThreadProps {
 43 |   id: string;
 44 |   title: string;
 45 |   content: string;
 46 | }
 47 | 
 48 | export default function Thread({ id, title, content }: ThreadProps) {
 49 |   const data = useLoaderData<typeof loader>() as Thread;
 50 | 
 51 |   return (
 52 |     <div>
 53 |       <h1 className="font-koulen block bg-slate-500 max-w-52 text-4xl my-4 mr-4">
 54 |         {data.title}
 55 |       </h1>
 56 |       <div className="p-2">
 57 |         <div className="border-2 border-muted border-solid rounded-md p-4 m-auto">
 58 |           <label htmlFor="pesan">Pesan: </label>
 59 | 
 60 |           <ReactMarkdown>{data.content}</ReactMarkdown>
 61 |           <br />
 62 | 
 63 |           {/* here is attachments */}
 64 |           <span>Attachments:</span>
 65 |           <div className="flex flex-wrap gap-4">
 66 |             {data.attachments.map((attachment) => {
 67 |               if (attachment.type === "image/png") {
 68 |                 const url = new URL(location.origin + attachment.url);
 69 | 
 70 |                 return (
 71 |                   <div className="relative group border">
 72 |                     <img
 73 |                       key={attachment.name.split(".")[0]}
 74 |                       src={url.href}
 75 |                       alt={attachment.name}
 76 |                       className="max-w-md max-h-md object-contain"
 77 |                     />
 78 |                     <div className="absolute top-0 left-0 w-full bg-black bg-opacity-50 flex items-center pl-2 opacity-0 group-hover:opacity-100 transition-opacity animate-in ease-in-out animate-out duration-500">
 79 |                       <a
 80 |                         className="text-white w-full h-full  visited:text-purple-500"
 81 |                         href={attachment.url}
 82 |                       >
 83 |                         {attachment.name}
 84 |                       </a>
 85 |                     </div>
 86 |                   </div>
 87 |                 );
 88 |               } else {
 89 |                 return (
 90 |                   <div
 91 |                     key={attachment.name.split(".")[0]}
 92 |                     className="relative w-[29%] mt-3 flex items-center border-muted px-2 rounded border mb-4 hover:border-primary/50 focus-within:border-primary/50"
 93 |                   >
 94 |                     <span className="mr-2">
 95 |                       {getFileTypeIcon(attachment.name)}
 96 |                     </span>
 97 |                     <a
 98 |                       key={attachment.name.split(".")[0]}
 99 |                       href={attachment.url}
100 |                       target="_blank"
101 |                       className="visited:text-purple-500"
102 |                       rel="noreferrer"
103 |                     >
104 |                       {attachment.name}
105 |                     </a>
106 |                   </div>
107 |                 );
108 |               }
109 |             })}
110 |           </div>
111 |         </div>
112 |         <Separator className="my-4" />
113 |       </div>
114 |       <div className="mt-6 max-w-[29%] m-2">
115 |         <form className="flex flex-col space-y-4">
116 |           <Textarea
117 |             placeholder="Leave a comment"
118 |             className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
119 |             rows={4}
120 |           />
121 |           <Button
122 |             type="submit"
123 |             className="self-start px-4 py-2 text-white bg-primary rounded-md hover:bg-primary-dark"
124 |           >
125 |             Comment
126 |           </Button>
127 |         </form>
128 |       </div>
129 |     </div>
130 |   );
131 | }
132 | 


--------------------------------------------------------------------------------
/app/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as SheetPrimitive from "@radix-ui/react-dialog";
  3 | import { cva, type VariantProps } from "class-variance-authority";
  4 | import { X } from "lucide-react";
  5 | 
  6 | import { cn } from "~/lib/utils";
  7 | 
  8 | const Sheet = SheetPrimitive.Root;
  9 | 
 10 | const SheetTrigger = SheetPrimitive.Trigger;
 11 | 
 12 | const SheetClose = SheetPrimitive.Close;
 13 | 
 14 | const SheetPortal = SheetPrimitive.Portal;
 15 | 
 16 | const SheetOverlay = React.forwardRef<
 17 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 18 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 19 | >(({ className, ...props }, ref) => (
 20 |   <SheetPrimitive.Overlay
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |     ref={ref}
 27 |   />
 28 | ));
 29 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 30 | 
 31 | const sheetVariants = cva(
 32 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 33 |   {
 34 |     variants: {
 35 |       side: {
 36 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 37 |         bottom:
 38 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 39 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 40 |         right:
 41 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 42 |       },
 43 |     },
 44 |     defaultVariants: {
 45 |       side: "right",
 46 |     },
 47 |   }
 48 | );
 49 | 
 50 | interface SheetContentProps
 51 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 52 |     VariantProps<typeof sheetVariants> {}
 53 | 
 54 | const SheetContent = React.forwardRef<
 55 |   React.ElementRef<typeof SheetPrimitive.Content>,
 56 |   SheetContentProps
 57 | >(({ side = "right", className, children, ...props }, ref) => (
 58 |   <SheetPortal>
 59 |     <SheetOverlay />
 60 |     <SheetPrimitive.Content
 61 |       ref={ref}
 62 |       className={cn(sheetVariants({ side }), className)}
 63 |       {...props}
 64 |     >
 65 |       {children}
 66 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 67 |         <X className="h-4 w-4" />
 68 |         <span className="sr-only">Close</span>
 69 |       </SheetPrimitive.Close>
 70 |     </SheetPrimitive.Content>
 71 |   </SheetPortal>
 72 | ));
 73 | SheetContent.displayName = SheetPrimitive.Content.displayName;
 74 | 
 75 | const SheetHeader = ({
 76 |   className,
 77 |   ...props
 78 | }: React.HTMLAttributes<HTMLDivElement>) => (
 79 |   <div
 80 |     className={cn(
 81 |       "flex flex-col space-y-2 text-center sm:text-left",
 82 |       className
 83 |     )}
 84 |     {...props}
 85 |   />
 86 | );
 87 | SheetHeader.displayName = "SheetHeader";
 88 | 
 89 | const SheetFooter = ({
 90 |   className,
 91 |   ...props
 92 | }: React.HTMLAttributes<HTMLDivElement>) => (
 93 |   <div
 94 |     className={cn(
 95 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 96 |       className
 97 |     )}
 98 |     {...props}
 99 |   />
100 | );
101 | SheetFooter.displayName = "SheetFooter";
102 | 
103 | const SheetTitle = React.forwardRef<
104 |   React.ElementRef<typeof SheetPrimitive.Title>,
105 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
106 | >(({ className, ...props }, ref) => (
107 |   <SheetPrimitive.Title
108 |     ref={ref}
109 |     className={cn("text-lg font-semibold text-foreground", className)}
110 |     {...props}
111 |   />
112 | ));
113 | SheetTitle.displayName = SheetPrimitive.Title.displayName;
114 | 
115 | const SheetDescription = React.forwardRef<
116 |   React.ElementRef<typeof SheetPrimitive.Description>,
117 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
118 | >(({ className, ...props }, ref) => (
119 |   <SheetPrimitive.Description
120 |     ref={ref}
121 |     className={cn("text-sm text-muted-foreground", className)}
122 |     {...props}
123 |   />
124 | ));
125 | SheetDescription.displayName = SheetPrimitive.Description.displayName;
126 | 
127 | export {
128 |   Sheet,
129 |   SheetPortal,
130 |   SheetOverlay,
131 |   SheetTrigger,
132 |   SheetClose,
133 |   SheetContent,
134 |   SheetHeader,
135 |   SheetFooter,
136 |   SheetTitle,
137 |   SheetDescription,
138 | };
139 | 


--------------------------------------------------------------------------------
/app/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "~/lib/utils"
  5 | import { buttonVariants } from "~/components/ui/button"
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 10 | 
 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |   <AlertDialogPrimitive.Overlay
 18 |     className={cn(
 19 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |     ref={ref}
 24 |   />
 25 | ))
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |   <AlertDialogPortal>
 33 |     <AlertDialogOverlay />
 34 |     <AlertDialogPrimitive.Content
 35 |       ref={ref}
 36 |       className={cn(
 37 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   </AlertDialogPortal>
 43 | ))
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 45 | 
 46 | const AlertDialogHeader = ({
 47 |   className,
 48 |   ...props
 49 | }: React.HTMLAttributes<HTMLDivElement>) => (
 50 |   <div
 51 |     className={cn(
 52 |       "flex flex-col space-y-2 text-center sm:text-left",
 53 |       className
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | )
 58 | AlertDialogHeader.displayName = "AlertDialogHeader"
 59 | 
 60 | const AlertDialogFooter = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | AlertDialogFooter.displayName = "AlertDialogFooter"
 73 | 
 74 | const AlertDialogTitle = React.forwardRef<
 75 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 76 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 77 | >(({ className, ...props }, ref) => (
 78 |   <AlertDialogPrimitive.Title
 79 |     ref={ref}
 80 |     className={cn("text-lg font-semibold", className)}
 81 |     {...props}
 82 |   />
 83 | ))
 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 85 | 
 86 | const AlertDialogDescription = React.forwardRef<
 87 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 88 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 89 | >(({ className, ...props }, ref) => (
 90 |   <AlertDialogPrimitive.Description
 91 |     ref={ref}
 92 |     className={cn("text-sm text-muted-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | AlertDialogDescription.displayName =
 97 |   AlertDialogPrimitive.Description.displayName
 98 | 
 99 | const AlertDialogAction = React.forwardRef<
100 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
101 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102 | >(({ className, ...props }, ref) => (
103 |   <AlertDialogPrimitive.Action
104 |     ref={ref}
105 |     className={cn(buttonVariants(), className)}
106 |     {...props}
107 |   />
108 | ))
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110 | 
111 | const AlertDialogCancel = React.forwardRef<
112 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114 | >(({ className, ...props }, ref) => (
115 |   <AlertDialogPrimitive.Cancel
116 |     ref={ref}
117 |     className={cn(
118 |       buttonVariants({ variant: "outline" }),
119 |       "mt-2 sm:mt-0",
120 |       className
121 |     )}
122 |     {...props}
123 |   />
124 | ))
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126 | 
127 | export {
128 |   AlertDialog,
129 |   AlertDialogPortal,
130 |   AlertDialogOverlay,
131 |   AlertDialogTrigger,
132 |   AlertDialogContent,
133 |   AlertDialogHeader,
134 |   AlertDialogFooter,
135 |   AlertDialogTitle,
136 |   AlertDialogDescription,
137 |   AlertDialogAction,
138 |   AlertDialogCancel,
139 | }
140 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * By default, Remix will handle generating the HTTP Response for you.
  3 |  * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
  4 |  * For more information, see https://remix.run/file-conventions/entry.server
  5 |  */
  6 | 
  7 | import { PassThrough } from "node:stream";
  8 | import { DB } from "~/.server/db.server";
  9 | 
 10 | import type { AppLoadContext, EntryContext } from "@remix-run/node";
 11 | import { createReadableStreamFromReadable } from "@remix-run/node";
 12 | import { RemixServer } from "@remix-run/react";
 13 | import { isbot } from "isbot";
 14 | import { renderToPipeableStream } from "react-dom/server";
 15 | 
 16 | const ABORT_DELAY = 5_000;
 17 | const db = new DB();
 18 | 
 19 | process.on("SIGINT", async () => {
 20 |   console.log("Received SIGINT. Closing db connection.");
 21 |   await db.close();
 22 |   process.exit(0);
 23 | });
 24 | 
 25 | process.on("SIGTERM", async () => {
 26 |   console.log("Received SIGTERM. Closing db connection.");
 27 |   await db.close();
 28 |   process.exit(0);
 29 | });
 30 | 
 31 | process.on("uncaughtException", async (err) => {
 32 |   console.error(err);
 33 |   await db.close();
 34 |   process.exit(1);
 35 | });
 36 | 
 37 | process.on("unhandledRejection", async (err) => {
 38 |   console.error(err);
 39 |   await db.close();
 40 |   process.exit(1);
 41 | });
 42 | 
 43 | export default function handleRequest(
 44 |   request: Request,
 45 |   responseStatusCode: number,
 46 |   responseHeaders: Headers,
 47 |   remixContext: EntryContext,
 48 |   // This is ignored so we can keep it in the template for visibility.  Feel
 49 |   // free to delete this parameter in your app if you're not using it!
 50 |   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 51 |   loadContext: AppLoadContext
 52 | ) {
 53 |   return isbot(request.headers.get("user-agent") || "")
 54 |     ? handleBotRequest(
 55 |         request,
 56 |         responseStatusCode,
 57 |         responseHeaders,
 58 |         remixContext
 59 |       )
 60 |     : handleBrowserRequest(
 61 |         request,
 62 |         responseStatusCode,
 63 |         responseHeaders,
 64 |         remixContext
 65 |       );
 66 | }
 67 | 
 68 | function handleBotRequest(
 69 |   request: Request,
 70 |   responseStatusCode: number,
 71 |   responseHeaders: Headers,
 72 |   remixContext: EntryContext
 73 | ) {
 74 |   return new Promise((resolve, reject) => {
 75 |     let shellRendered = false;
 76 |     const { pipe, abort } = renderToPipeableStream(
 77 |       <RemixServer
 78 |         context={remixContext}
 79 |         url={request.url}
 80 |         abortDelay={ABORT_DELAY}
 81 |       />,
 82 |       {
 83 |         onAllReady() {
 84 |           shellRendered = true;
 85 |           const body = new PassThrough();
 86 |           const stream = createReadableStreamFromReadable(body);
 87 | 
 88 |           responseHeaders.set("Content-Type", "text/html");
 89 | 
 90 |           resolve(
 91 |             new Response(stream, {
 92 |               headers: responseHeaders,
 93 |               status: responseStatusCode,
 94 |             })
 95 |           );
 96 | 
 97 |           pipe(body);
 98 |         },
 99 |         onShellError(error: unknown) {
100 |           reject(error);
101 |         },
102 |         onError(error: unknown) {
103 |           responseStatusCode = 500;
104 |           // Log streaming rendering errors from inside the shell.  Don't log
105 |           // errors encountered during initial shell rendering since they'll
106 |           // reject and get logged in handleDocumentRequest.
107 |           if (shellRendered) {
108 |             console.error(error);
109 |           }
110 |         },
111 |       }
112 |     );
113 | 
114 |     setTimeout(abort, ABORT_DELAY);
115 |   });
116 | }
117 | 
118 | function handleBrowserRequest(
119 |   request: Request,
120 |   responseStatusCode: number,
121 |   responseHeaders: Headers,
122 |   remixContext: EntryContext
123 | ) {
124 |   return new Promise((resolve, reject) => {
125 |     let shellRendered = false;
126 |     const { pipe, abort } = renderToPipeableStream(
127 |       <RemixServer
128 |         context={remixContext}
129 |         url={request.url}
130 |         abortDelay={ABORT_DELAY}
131 |       />,
132 |       {
133 |         onShellReady() {
134 |           shellRendered = true;
135 |           const body = new PassThrough();
136 |           const stream = createReadableStreamFromReadable(body);
137 | 
138 |           responseHeaders.set("Content-Type", "text/html");
139 | 
140 |           resolve(
141 |             new Response(stream, {
142 |               headers: responseHeaders,
143 |               status: responseStatusCode,
144 |             })
145 |           );
146 | 
147 |           pipe(body);
148 |         },
149 |         onShellError(error: unknown) {
150 |           reject(error);
151 |         },
152 |         onError(error: unknown) {
153 |           responseStatusCode = 500;
154 |           // Log streaming rendering errors from inside the shell.  Don't log
155 |           // errors encountered during initial shell rendering since they'll
156 |           // reject and get logged in handleDocumentRequest.
157 |           if (shellRendered) {
158 |             console.error(error);
159 |           }
160 |         },
161 |       }
162 |     );
163 | 
164 |     setTimeout(abort, ABORT_DELAY);
165 |   });
166 | }
167 | 


--------------------------------------------------------------------------------
/app/.server/db.server.ts:
--------------------------------------------------------------------------------
  1 | import { neon, neonConfig, Pool } from "@neondatabase/serverless";
  2 | import { drizzle } from "drizzle-orm/neon-serverless";
  3 | import ws from "ws";
  4 | import { tokens, users } from "db";
  5 | import bcrypt from "bcryptjs";
  6 | import { eq } from "drizzle-orm";
  7 | import { z } from "zod";
  8 | import { PgInsertValue } from "drizzle-orm/pg-core";
  9 | import { EventEmitter } from "node:events";
 10 | import { User } from "~/types";
 11 | import { Thread } from "~/types/Thread";
 12 | import { threads } from "db/schema/threads";
 13 | 
 14 | const userSchema = z.object({
 15 |   id: z.string().uuid(),
 16 |   email: z.string().email().optional(),
 17 |   password: z.string(),
 18 |   username: z.string().optional(),
 19 |   createdAt: z.date().default(() => new Date()),
 20 |   updatedAt: z.date().default(() => new Date()),
 21 | });
 22 | 
 23 | const tokenSchema = z.object({
 24 |   id: z.string().uuid(),
 25 |   token: z.string(),
 26 |   user_id: z.string().uuid(),
 27 |   createdAt: z.date().default(() => new Date()),
 28 |   updatedAt: z.date().default(() => new Date()),
 29 | });
 30 | 
 31 | const tablesSchema = z.union([userSchema, tokenSchema]);
 32 | 
 33 | type Tables = typeof users | typeof tokens;
 34 | 
 35 | const saltRounds = 10;
 36 | 
 37 | // neonConfig.webSocketConstructor = ws;
 38 | // neonConfig.fetchConnectionCache = true;
 39 | 
 40 | class DB extends EventEmitter {
 41 |   public db: ReturnType<typeof drizzle>;
 42 |   public pool: Pool;
 43 | 
 44 |   constructor() {
 45 |     super();
 46 |     // const sql = neon(process.env.DATABASE_URL!);
 47 |     neonConfig.webSocketConstructor = ws;
 48 |     this.pool = new Pool({
 49 |       connectionString: process.env.DATABASE_URL!,
 50 |     });
 51 | 
 52 |     this.db = drizzle(this.pool);
 53 |   }
 54 | 
 55 |   async insert<T extends Tables>(table: T, data: PgInsertValue<T>) {
 56 |     if (table !== users && table !== tokens) {
 57 |       throw new DBError("Invalid table");
 58 |     }
 59 | 
 60 |     return await this.db.insert(table).values(data);
 61 |   }
 62 | 
 63 |   async delete<T extends Tables>(table: T, id: string) {
 64 |     if (table !== users && table !== tokens) {
 65 |       throw new DBError("Invalid table");
 66 |     }
 67 | 
 68 |     if (typeof id !== "string") {
 69 |       throw new DBError("Invalid id");
 70 |     }
 71 | 
 72 |     if (!id) {
 73 |       throw new DBError("Id is required");
 74 |     }
 75 | 
 76 |     let check = await this.db.select().from(table).where(eq(table.id, id));
 77 | 
 78 |     if (check.length === 0) {
 79 |       throw new DBError("Id not found");
 80 |     }
 81 | 
 82 |     return await this.db.delete(table).where(eq(table.id, id));
 83 |   }
 84 | 
 85 |   async getUser({
 86 |     username,
 87 |     email,
 88 |     id,
 89 |   }: {
 90 |     username?: string;
 91 |     email?: string;
 92 |     id?: string;
 93 |   }) {
 94 |     if (email) {
 95 |       const user = await this.db
 96 |         .select()
 97 |         .from(users)
 98 |         .where(eq(users.email, email));
 99 | 
100 |       if (user.length === 0) {
101 |         throw new DBError("User not found");
102 |       }
103 | 
104 |       return user[0] as User;
105 |     } else if (username) {
106 |       const user = await this.db
107 |         .select()
108 |         .from(users)
109 |         .where(eq(users.username, username));
110 | 
111 |       if (user.length === 0) {
112 |         throw new DBError("User not found");
113 |       }
114 | 
115 |       return user[0] as User;
116 |     } else if (id) {
117 |       const user = await this.db.select().from(users).where(eq(users.id, id));
118 | 
119 |       if (user.length === 0) {
120 |         throw new DBError("User not found");
121 |       }
122 | 
123 |       return user[0] as User;
124 |     } else {
125 |       return null;
126 |     }
127 |   }
128 | 
129 |   async createUser({
130 |     username,
131 |     email,
132 |     password,
133 |   }: {
134 |     username: string;
135 |     email: string;
136 |     password: string;
137 |   }) {
138 |     const salt = await bcrypt.genSalt(saltRounds);
139 |     const hashPassword = await bcrypt.hash(password, salt);
140 | 
141 |     return await this.db
142 |       .insert(users)
143 |       .values({ username, email, password: hashPassword });
144 |   }
145 | 
146 |   async verifyPassword({
147 |     username,
148 |     password,
149 |   }: {
150 |     username: string;
151 |     password: string;
152 |   }) {
153 |     const user = await this.getUser({ username });
154 |     if (!user) return false;
155 |     console.log(user);
156 |     return bcrypt.compare(password, user.password);
157 |   }
158 | 
159 |   async newThread({
160 |     author,
161 |     thread,
162 |   }: {
163 |     author: User;
164 |     thread: Omit<Thread, "authorId" | "id" | "status">;
165 |   }) {
166 |     const user = await this.getUser({ username: author.username! });
167 | 
168 |     console.log(thread.attachments);
169 | 
170 |     if (!user) {
171 |       throw new DBError("User not found");
172 |     }
173 | 
174 |     return await this.db.insert(threads).values({
175 |       ...thread,
176 |       authorId: user.id,
177 |     });
178 |   }
179 | 
180 |   async getThread(id: string) {
181 |     const thread = await this.db
182 |       .select()
183 |       .from(threads)
184 |       .where(eq(threads.id, id));
185 | 
186 |     if (thread.length === 0) {
187 |       throw new DBError("Thread not found");
188 |     }
189 | 
190 |     return thread[0] as Thread;
191 |   }
192 | 
193 |   async close() {
194 |     console.log("Closing db connection");
195 |     return this.pool.end();
196 |   }
197 | }
198 | 
199 | class DBError extends Error {
200 |   constructor(message: string) {
201 |     super(message);
202 |     this.name = this.constructor.name;
203 |   }
204 | }
205 | 
206 | export { DB, DBError };
207 | 


--------------------------------------------------------------------------------
/app/routes/auth.login.tsx:
--------------------------------------------------------------------------------
  1 | import { json, type ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
  2 | import { jwtDecode } from "jwt-decode";
  3 | import { DB } from "~/.server/db.server";
  4 | import { login as loginCookie } from "~/.server/cookies";
  5 | import { v4 as uuidv4 } from "uuid";
  6 | import { Session } from "~/.server/sessions";
  7 | import { generateTokens } from "~/.server/utils";
  8 | 
  9 | export const action = async ({ request }: ActionFunctionArgs) => {
 10 |   switch (request.method) {
 11 |     case "POST": {
 12 |       const cookieHeader = request.headers.get("Cookie");
 13 |       const cookie = (await loginCookie.parse(cookieHeader)) ?? {
 14 |         isLoggedIn: false,
 15 |       };
 16 |       const { getSession, commitSession, destroySession } = await Session;
 17 |       const session = await getSession(cookieHeader);
 18 |       const headers = new Headers();
 19 |       const data = await request.json();
 20 |       const { login, password } = data;
 21 |       // const url = process.env.FORU_MS_URL;
 22 |       const db = new DB();
 23 | 
 24 |       try {
 25 |         let isEmail = /\S+@\S+\.\S+/.test(login);
 26 |         let user = isEmail
 27 |           ? await db.getUser({ email: login })
 28 |           : await db.getUser({ username: login });
 29 | 
 30 |         if (!user) {
 31 |           return json(
 32 |             {
 33 |               status: "error",
 34 |               code: 401,
 35 |               message: "Account not found",
 36 |             },
 37 |             401
 38 |           );
 39 |         }
 40 | 
 41 |         if (
 42 |           !(await db.verifyPassword({ username: user.username!, password }))
 43 |         ) {
 44 |           return json(
 45 |             {
 46 |               status: "error",
 47 |               code: 401,
 48 |               message: "Invalid password",
 49 |             },
 50 |             401
 51 |           );
 52 |         }
 53 | 
 54 |         cookie.isLoggedIn = true;
 55 |         const { accessToken, refreshToken } = generateTokens(user, uuidv4());
 56 | 
 57 |         session.set("token", accessToken);
 58 | 
 59 |         cookie.user = user;
 60 |         cookie.expired = jwtDecode(accessToken).exp;
 61 | 
 62 |         headers.append("Set-Cookie", await loginCookie.serialize(cookie));
 63 |         headers.append(
 64 |           "Set-Cookie",
 65 |           await commitSession(session, {
 66 |             expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7), // 7 days from now
 67 |           })
 68 |         );
 69 | 
 70 |         // headers.append("Authorization", `Bearer ${accessToken}`);
 71 | 
 72 |         return json(
 73 |           {
 74 |             status: "success",
 75 |             code: 200,
 76 |             message: "Login success",
 77 |             data: user,
 78 |             token: accessToken,
 79 |             refreshToken,
 80 |           },
 81 |           {
 82 |             status: 200,
 83 |             headers,
 84 |           }
 85 |         );
 86 |       } catch (err) {
 87 |         console.error(err);
 88 |         return json(
 89 |           { status: "error", code: 500, message: (err as Error).message },
 90 |           500
 91 |         );
 92 |       }
 93 | 
 94 |       //#region REMOVED
 95 |       // try {
 96 |       //   const res = await fetch(`/auth/login`, {
 97 |       //     method: "POST",
 98 |       //     headers: {
 99 |       //       "Content-Type": "application/json",
100 |       //       Accept: "application/json",
101 |       //       "x-api-key": process.env.FORU_MS_API_KEY!,
102 |       //     },
103 |       //     body: JSON.stringify({ login, password }),
104 |       //   });
105 |       //   const jsonData = await res.json();
106 | 
107 |       //   if (jsonData.message === "Invalid credentials") {
108 |       //     return json(
109 |       //       {
110 |       //         status: "error",
111 |       //         code: 401,
112 |       //         message: "Username or password is incorrect",
113 |       //       },
114 |       //       401
115 |       //     );
116 |       //   }
117 | 
118 |       //   cookie.isLoggedIn = true;
119 |       //   cookie.expired = jwtDecode(jsonData.token).exp;
120 |       //   session.set("token", jsonData.token);
121 | 
122 |       //   const userData = await fetch(`${url}/auth/me`, {
123 |       //     method: "GET",
124 |       //     headers: {
125 |       //       Authorization: `Bearer ${jsonData.token}`,
126 |       //       "x-api-key": process.env.FORU_MS_API_KEY!,
127 |       //     },
128 |       //   });
129 | 
130 |       //   const user = await userData.json();
131 | 
132 |       //   cookie.user = user;
133 |       //   // cookie.token = jsonData.token;
134 | 
135 |       //   headers.append("Set-Cookie", await loginCookie.serialize(cookie));
136 |       //   headers.append(
137 |       //     "Set-Cookie",
138 |       //     await commitSession(session, {
139 |       //       expires: new Date(cookie.expired * 1000),
140 |       //     })
141 |       //   );
142 | 
143 |       //   return json(
144 |       //     {
145 |       //       status: "success",
146 |       //       code: 200,
147 |       //       message: "Login success",
148 |       //       data: user,
149 |       //       token: jsonData.token,
150 |       //     },
151 |       //     {
152 |       //       status: 200,
153 |       //       headers,
154 |       //     }
155 |       //   );
156 |       // } catch (err) {
157 |       //   console.error(err);
158 |       //   return json(
159 |       //     { status: "error", code: 500, message: (err as Error).message },
160 |       //     500
161 |       //   );
162 |       // }
163 |       //#endregion
164 |     }
165 |     case "PUT": {
166 |       /* handle "PUT" */
167 |     }
168 |     case "PATCH": {
169 |       /* handle "PATCH" */
170 |     }
171 |     case "DELETE": {
172 |       /* handle "DELETE" */
173 |     }
174 |   }
175 | };
176 | 


--------------------------------------------------------------------------------
/app/components/ui/navbar.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   DropdownMenu,
  3 |   DropdownMenuTrigger,
  4 |   DropdownMenuContent,
  5 |   DropdownMenuLabel,
  6 |   DropdownMenuSeparator,
  7 |   DropdownMenuItem,
  8 | } from "./dropdown-menu";
  9 | import { Menu, Package2, CircleUser } from "lucide-react";
 10 | import { Link, useLocation } from "@remix-run/react";
 11 | import { Button } from "./button";
 12 | import { SheetTrigger, SheetContent, Sheet } from "./sheet";
 13 | import { useEffect, useState } from "react";
 14 | 
 15 | function NavLinks({
 16 |   active,
 17 |   device,
 18 | }: {
 19 |   active: string;
 20 |   device: "mobile" | "desktop";
 21 | }) {
 22 |   console.log(active);
 23 | 
 24 |   if (device === "mobile") {
 25 |     return (
 26 |       <nav className="grid gap-6 text-lg font-medium">
 27 |         <Link
 28 |           to="#"
 29 |           className="flex items-center gap-2 text-lg font-semibold hover:no-underline"
 30 |         >
 31 |           <Package2 className="w-6 h-6" />
 32 |           <span className="sr-only">Acme Inc</span>
 33 |         </Link>
 34 |         <Link
 35 |           to="/"
 36 |           className={`${
 37 |             active === "" ? "text-foreground" : "text-muted-foreground"
 38 |           } hover:text-foreground hover:no-underline`}
 39 |         >
 40 |           Home
 41 |         </Link>
 42 |         <Link
 43 |           to="/dashboard"
 44 |           className={`${
 45 |             active === "dashboard" ? "text-foreground" : "text-muted-foreground"
 46 |           } hover:text-foreground hover:no-underline`}
 47 |         >
 48 |           Dashboard
 49 |         </Link>
 50 |         <Link
 51 |           to="#"
 52 |           className="text-muted-foreground hover:text-foreground hover:no-underline"
 53 |         >
 54 |           Products
 55 |         </Link>
 56 |         <Link
 57 |           to="#"
 58 |           className="text-muted-foreground hover:text-foreground hover:no-underline"
 59 |         >
 60 |           Customers
 61 |         </Link>
 62 |         <Link
 63 |           to="#"
 64 |           className="text-muted-foreground hover:text-foreground hover:no-underline"
 65 |         >
 66 |           Analytics
 67 |         </Link>
 68 |       </nav>
 69 |     );
 70 |   } else if (device === "desktop") {
 71 |     return (
 72 |       <nav className="flex-col hidden gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
 73 |         <Link
 74 |           to="#"
 75 |           className="flex items-center gap-2 text-lg font-semibold md:text-base hover:no-underline"
 76 |         >
 77 |           <Package2 className="w-6 h-6" />
 78 |           <span className="sr-only">Acme Inc</span>
 79 |         </Link>
 80 |         <Link
 81 |           to="/"
 82 |           className={`transition-colors ${
 83 |             active === "" ? "text-foreground" : "text-muted-foreground"
 84 |           } hover:text-foreground hover:no-underline`}
 85 |         >
 86 |           Home
 87 |         </Link>
 88 |         <Link
 89 |           to="/dashboard"
 90 |           className={`transition-colors ${
 91 |             active === "dashboard" ? "text-foreground" : "text-muted-foreground"
 92 |           } hover:text-foreground hover:no-underline`}
 93 |         >
 94 |           Dashboard
 95 |         </Link>
 96 |         <Link
 97 |           to="#"
 98 |           className="transition-colors text-muted-foreground hover:text-foreground hover:no-underline"
 99 |         >
100 |           Products
101 |         </Link>
102 |         <Link
103 |           to="#"
104 |           className="transition-colors text-muted-foreground hover:text-foreground hover:no-underline"
105 |         >
106 |           Customers
107 |         </Link>
108 |         <Link
109 |           to="#"
110 |           className="transition-colors text-muted-foreground hover:text-foreground hover:no-underline"
111 |         >
112 |           Analytics
113 |         </Link>
114 |       </nav>
115 |     );
116 |   }
117 | }
118 | 
119 | export default function Navbar() {
120 |   const location = useLocation();
121 |   const active = location.pathname.split("/")[1];
122 | 
123 |   console.log(active);
124 | 
125 |   return (
126 |     <header className="sticky top-0 flex items-center justify-between w-full h-16 gap-4 px-4 border-b bg-background md:px-6">
127 |       <div className="flex items-center justify-between w-full md:w-auto">
128 |         {/* Menu Button for Mobile */}
129 |         <Sheet>
130 |           <SheetTrigger asChild>
131 |             <Button variant="outline" size="icon" className="md:hidden">
132 |               <Menu className="w-5 h-5" />
133 |               <span className="sr-only">Toggle navigation menu</span>
134 |             </Button>
135 |           </SheetTrigger>
136 |           <SheetContent side="left">
137 |             <NavLinks active={active} device="mobile" />
138 |           </SheetContent>
139 |         </Sheet>
140 | 
141 |         {/* Logo and Links for Desktop */}
142 |         <NavLinks active={active} device="desktop"></NavLinks>
143 |       </div>
144 | 
145 |       {/* User Icon */}
146 |       <div className="flex items-center gap-4 ml-auto">
147 |         <DropdownMenu>
148 |           <DropdownMenuTrigger asChild>
149 |             <Button variant="outline" size="icon" className="rounded-full">
150 |               <CircleUser className="w-5 h-5" />
151 |               <span className="sr-only">Toggle user menu</span>
152 |             </Button>
153 |           </DropdownMenuTrigger>
154 |           <DropdownMenuContent align="end">
155 |             <DropdownMenuLabel>My Account</DropdownMenuLabel>
156 |             <DropdownMenuSeparator />
157 |             <DropdownMenuItem>Settings</DropdownMenuItem>
158 |             <DropdownMenuItem>Support</DropdownMenuItem>
159 |             <DropdownMenuSeparator />
160 |             <DropdownMenuItem>Logout</DropdownMenuItem>
161 |           </DropdownMenuContent>
162 |         </DropdownMenu>
163 |       </div>
164 |     </header>
165 |   );
166 | }
167 | 


--------------------------------------------------------------------------------
/app/routes/register.tsx:
--------------------------------------------------------------------------------
  1 | import { type MetaFunction } from "@remix-run/node";
  2 | import React, { useState } from "react";
  3 | import { toast } from "react-toastify";
  4 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  5 | import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
  6 | 
  7 | export const meta: MetaFunction = () => {
  8 |   return [
  9 |     { title: "Register" },
 10 |     { name: "description", content: "Register for the forum" },
 11 |   ];
 12 | };
 13 | 
 14 | export default function Register() {
 15 |   const [passwordData, setPasswordData] = useState({
 16 |     type: "password",
 17 |     placeholder: "*********",
 18 |   });
 19 | 
 20 |   const togglePassword = () => {
 21 |     setPasswordData((prevType) => {
 22 |       if (prevType.type === "password") {
 23 |         return { type: "text", placeholder: "youseeme" };
 24 |       } else {
 25 |         return { type: "password", placeholder: "*********" };
 26 |       }
 27 |     });
 28 |   };
 29 | 
 30 |   const handleRegister = async () => {
 31 |     // Handle register logic here
 32 |     const username = document.getElementById("username") as HTMLInputElement;
 33 |     const email = document.getElementById("email") as HTMLInputElement;
 34 |     const password = document.getElementById("password") as HTMLInputElement;
 35 | 
 36 |     if (!username.value || !email.value || !password.value) {
 37 |       return toast.error("Please fill in all fields", {
 38 |         position: "top-right",
 39 |         autoClose: 5000,
 40 |         hideProgressBar: false,
 41 |         pauseOnHover: false,
 42 |         closeOnClick: true,
 43 |         theme: "dark",
 44 |         toastId: "emptyFields",
 45 |       });
 46 |     }
 47 | 
 48 |     const promise = new Promise<{
 49 |       status: string;
 50 |       code: number;
 51 |       message: string;
 52 |     }>(async (resolve, reject) => {
 53 |       const res = await fetch("/auth/register", {
 54 |         method: "POST",
 55 |         headers: {
 56 |           "Content-Type": "application/json",
 57 |         },
 58 |         body: JSON.stringify({
 59 |           username: username.value,
 60 |           email: email.value,
 61 |           password: password.value,
 62 |         }),
 63 |       });
 64 | 
 65 |       const data = await res.json();
 66 | 
 67 |       if (data.status === "success") {
 68 |         resolve(data);
 69 |       } else {
 70 |         reject(data);
 71 |       }
 72 |     });
 73 | 
 74 |     await toast.promise(promise, {
 75 |       pending: {
 76 |         render() {
 77 |           return "Registering...";
 78 |         },
 79 |         pauseOnHover: false,
 80 |         theme: "dark",
 81 |         toastId: "loadingRegister",
 82 |       },
 83 |       success: {
 84 |         render(res) {
 85 |           window.location.href = "/login";
 86 |           return "Register successful. Redirecting to login page...";
 87 |         },
 88 |         type: "success",
 89 |         pauseOnHover: false,
 90 |         theme: "dark",
 91 |         toastId: "successRegister",
 92 |         closeOnClick: true,
 93 |       },
 94 |       error: {
 95 |         render(opt) {
 96 |           const { data } = opt as any;
 97 |           return `Register failed: ${data.message}`;
 98 |         },
 99 |         type: "error",
100 |         pauseOnHover: false,
101 |         theme: "dark",
102 |         toastId: "errorRegister",
103 |         closeOnClick: true,
104 |       },
105 |     });
106 |   };
107 | 
108 |   return (
109 |     <div className="bg-[#141f47] flex items-center justify-center h-screen">
110 |       <div className="w-full max-w-xs">
111 |         <form className="bg-[#202c5e] shadow-md rounded px-8 pt-6 pb-8 mb-4 text-slate-200">
112 |           <h1 className="text-2xl font-bold text-center mb-6">Register</h1>
113 |           <div className="mb-4">
114 |             <label className="block text-sm font-bold mb-2" htmlFor="username">
115 |               Username
116 |             </label>
117 |             <input
118 |               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
119 |               id="username"
120 |               type="text"
121 |               placeholder="Username"
122 |             />
123 |           </div>
124 |           <div className="mb-4">
125 |             <label className="block text-sm font-bold mb-2" htmlFor="email">
126 |               Email
127 |             </label>
128 |             <input
129 |               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
130 |               id="email"
131 |               type="email"
132 |               placeholder="Email"
133 |             />
134 |           </div>
135 |           <div className="mb-6 relative">
136 |             <label className="block text-sm font-bold mb-2" htmlFor="password">
137 |               Password
138 |             </label>
139 |             <input
140 |               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pr-10"
141 |               id="password"
142 |               type={passwordData.type}
143 |               placeholder={passwordData.placeholder}
144 |             />
145 |             <div className="absolute top-8 bottom-2 right-0 pr-3 flex items-center leading-5">
146 |               <FontAwesomeIcon
147 |                 icon={passwordData.type === "password" ? faEye : faEyeSlash}
148 |                 className={`cursor-pointer text-gray-700 transition ease-${
149 |                   passwordData.type === "password" ? "out" : "in"
150 |                 } duration-300 select-none text-sm`}
151 |                 id="togglePassword"
152 |                 onClick={togglePassword}
153 |                 width={24}
154 |                 height={24}
155 |               ></FontAwesomeIcon>
156 |             </div>
157 |           </div>
158 |           <div className="flex items-center justify-between">
159 |             <button
160 |               className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
161 |               type="button"
162 |               onClick={handleRegister}
163 |             >
164 |               Register
165 |             </button>
166 |           </div>
167 |         </form>
168 |       </div>
169 |     </div>
170 |   );
171 | }
172 | 


--------------------------------------------------------------------------------
/app/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  3 | import { Check, ChevronRight, Circle } from "lucide-react";
  4 | 
  5 | import { cn } from "~/lib/utils";
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root;
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean;
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ));
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName;
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ));
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName;
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ));
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean;
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ));
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ));
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName;
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ));
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean;
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ));
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ));
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   );
179 | };
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | };
199 | 


--------------------------------------------------------------------------------
/app/routes/login.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   LoaderFunctionArgs,
  3 |   type MetaFunction,
  4 |   redirect,
  5 | } from "@remix-run/node";
  6 | import React, { useEffect, useState } from "react";
  7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  8 | import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
  9 | import { Id, toast } from "react-toastify";
 10 | import { LoginCookie } from "~/types";
 11 | import {
 12 |   Turnstile,
 13 |   TurnstileServerValidationResponse,
 14 | } from "@marsidev/react-turnstile";
 15 | import { Session } from "~/.server/sessions";
 16 | 
 17 | export const meta: MetaFunction = () => {
 18 |   return [
 19 |     { title: "Login" },
 20 |     { name: "description", content: "Login to forum" },
 21 |   ];
 22 | };
 23 | 
 24 | export async function loader({ request }: LoaderFunctionArgs) {
 25 |   const { getSession } = await Session;
 26 |   const session = await getSession(request.headers.get("Cookie"));
 27 |   const token = session.get("token");
 28 |   if (token) {
 29 |     return redirect("/");
 30 |   }
 31 | 
 32 |   return {};
 33 | }
 34 | 
 35 | export default function Login() {
 36 |   const [passwordData, setPasswordData] = useState({
 37 |     type: "password",
 38 |     placeholder: "*********",
 39 |   });
 40 |   const loading = React.useRef<Id | null>(null);
 41 |   const formRef = React.useRef<HTMLFormElement>(null);
 42 | 
 43 |   const togglePassword = () => {
 44 |     setPasswordData((prevType) => {
 45 |       if (prevType.type === "password") {
 46 |         return { type: "text", placeholder: "youseeme" };
 47 |       } else {
 48 |         return { type: "password", placeholder: "*********" };
 49 |       }
 50 |     });
 51 |   };
 52 | 
 53 |   const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
 54 |     e.preventDefault();
 55 |     const login = document.getElementById("username") as HTMLInputElement;
 56 |     const password = document.getElementById("password") as HTMLInputElement;
 57 |     const formData = new FormData(formRef.current!);
 58 |     const token = formData.get("cf-turnstile-response");
 59 | 
 60 |     const res = await fetch("/auth/verify", {
 61 |       method: "POST",
 62 |       body: JSON.stringify({ token }),
 63 |       headers: {
 64 |         "content-type": "application/json",
 65 |       },
 66 |     });
 67 | 
 68 |     const data = (await res.json()) as TurnstileServerValidationResponse;
 69 | 
 70 |     if (data.success) {
 71 |       if (!login.value && password.value) {
 72 |         return toast.error("Please fill in the username or email field", {
 73 |           position: "top-right",
 74 |           autoClose: 5000,
 75 |           hideProgressBar: false,
 76 |           pauseOnHover: false,
 77 |           closeOnClick: true,
 78 |           theme: "dark",
 79 |           toastId: "emptyUsername",
 80 |         });
 81 |       } else if (!password.value && login.value) {
 82 |         return toast.error("Please fill in the password field", {
 83 |           position: "top-right",
 84 |           autoClose: 5000,
 85 |           hideProgressBar: false,
 86 |           pauseOnHover: false,
 87 |           closeOnClick: true,
 88 |           theme: "dark",
 89 |           toastId: "emptyPassword",
 90 |         });
 91 |       } else if (!login.value && !password.value) {
 92 |         return toast.error(
 93 |           "Please fill in the username or email and password field",
 94 |           {
 95 |             position: "top-right",
 96 |             autoClose: 5000,
 97 |             hideProgressBar: false,
 98 |             pauseOnHover: false,
 99 |             closeOnClick: true,
100 |             theme: "dark",
101 |             toastId: "emptyUsernamePassword",
102 |           }
103 |         );
104 |       }
105 | 
106 |       const promise = new Promise<LoginCookie | never>(
107 |         async (resolve, reject) => {
108 |           const res = await fetch("/auth/login", {
109 |             method: "POST",
110 |             body: JSON.stringify({
111 |               login: login.value,
112 |               password: password.value,
113 |             }),
114 |           });
115 |           const data = await res.json();
116 |           if (data.code === 401) {
117 |             reject(data);
118 |           }
119 |           if (data.code === 200) {
120 |             resolve(data);
121 |           }
122 |         }
123 |       );
124 | 
125 |       await toast.promise(promise, {
126 |         pending: {
127 |           render() {
128 |             return "Signing in...";
129 |           },
130 |           pauseOnHover: false,
131 |           theme: "dark",
132 |           toastId: "loadingLogin",
133 |         },
134 |         success: {
135 |           render(res) {
136 |             // document.cookie = res.data.cookies[0];
137 |             window.localStorage.setItem("token", res.data.token);
138 |             window.location.href = "/";
139 |             return "Login successful";
140 |           },
141 |           type: "success",
142 |           pauseOnHover: false,
143 |           theme: "dark",
144 |           toastId: "successLogin",
145 |           closeOnClick: true,
146 |         },
147 |         error: {
148 |           render(opt) {
149 |             const { data } = opt as any;
150 |             return `Login failed: ${data.message}`;
151 |           },
152 |           type: "error",
153 |           pauseOnHover: false,
154 |           theme: "dark",
155 |           toastId: "errorLogin",
156 |           closeOnClick: true,
157 |         },
158 |       });
159 |     } else {
160 |       return toast.error(
161 |         "Tolong selesaikan verifikasi bahwa anda bukan robot",
162 |         {
163 |           position: "top-right",
164 |           autoClose: 5000,
165 |           hideProgressBar: false,
166 |           pauseOnHover: false,
167 |           closeOnClick: true,
168 |           theme: "dark",
169 |           toastId: "verifyFailed",
170 |         }
171 |       );
172 |     }
173 |   };
174 | 
175 |   return (
176 |     <div className="bg-[#141f47] flex items-center justify-center h-screen">
177 |       <div className="w-full max-w-xs">
178 |         <form
179 |           className="bg-[#202c5e] shadow-md rounded px-8 pt-6 pb-8 mb-4 text-slate-200"
180 |           ref={formRef}
181 |           onSubmit={handleLogin}
182 |         >
183 |           <h1 className="text-2xl font-bold text-center mb-6">Login</h1>
184 |           <div className="mb-4">
185 |             <label className="block text-sm font-bold mb-2" htmlFor="username">
186 |               Username or Email
187 |             </label>
188 |             <input
189 |               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
190 |               id="username"
191 |               type="text"
192 |               placeholder="Username or Email"
193 |             />
194 |           </div>
195 |           <div className="mb-6 relative">
196 |             <label className="block text-sm font-bold mb-2" htmlFor="password">
197 |               Password
198 |             </label>
199 |             <input
200 |               className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pr-10"
201 |               id="password"
202 |               type={passwordData.type}
203 |               placeholder="*********"
204 |             />
205 |             <div className="absolute top-8 bottom-2 right-0 pr-3 flex items-center leading-5">
206 |               <FontAwesomeIcon
207 |                 icon={passwordData.type === "password" ? faEye : faEyeSlash}
208 |                 className={`cursor-pointer text-gray-700 transition ease-${
209 |                   passwordData.type === "password" ? "out" : "in"
210 |                 } duration-300 select-none`}
211 |                 id="togglePassword"
212 |                 onClick={togglePassword}
213 |                 width={24}
214 |                 height={24}
215 |               ></FontAwesomeIcon>
216 |             </div>
217 |           </div>
218 |           <div className="flex flex-col items-center space-y-4">
219 |             <Turnstile
220 |               siteKey="0x4AAAAAAAvV9Dwxni70xFRs"
221 |               options={{
222 |                 language: "id",
223 |               }}
224 |             />
225 |             <button
226 |               className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
227 |               type="submit"
228 |             >
229 |               Login
230 |             </button>
231 |           </div>
232 |         </form>
233 |       </div>
234 |     </div>
235 |   );
236 | }
237 | 


--------------------------------------------------------------------------------
/app/routes/dashboard.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   DropdownMenu,
  3 |   DropdownMenuTrigger,
  4 |   DropdownMenuContent,
  5 |   DropdownMenuLabel,
  6 |   DropdownMenuSeparator,
  7 |   DropdownMenuItem,
  8 | } from "~/components/ui/dropdown-menu";
  9 | import { Link, useLoaderData } from "@remix-run/react";
 10 | import { json, TypedResponse } from "@remix-run/node";
 11 | import {
 12 |   Activity,
 13 |   ArrowUpRight,
 14 |   CircleUser,
 15 |   CreditCard,
 16 |   DollarSign,
 17 |   FilePen,
 18 |   Menu,
 19 |   Package2,
 20 |   Search,
 21 |   Users,
 22 | } from "lucide-react";
 23 | 
 24 | // import Navbar from "~/components/ui/navbar";
 25 | 
 26 | import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 27 | import { Badge } from "~/components/ui/badge";
 28 | import { Button } from "~/components/ui/button";
 29 | import {
 30 |   Card,
 31 |   CardContent,
 32 |   CardDescription,
 33 |   CardHeader,
 34 |   CardTitle,
 35 | } from "~/components/ui/card";
 36 | import { SheetTrigger, SheetContent, Sheet } from "~/components/ui/sheet";
 37 | import {
 38 |   Table,
 39 |   TableBody,
 40 |   TableCell,
 41 |   TableHead,
 42 |   TableHeader,
 43 |   TableRow,
 44 | } from "~/components/ui/table";
 45 | import { LoaderFunctionArgs } from "@remix-run/node";
 46 | import { Thread } from "~/types/Thread";
 47 | import { DB } from "~/.server/db.server";
 48 | import { User } from "~/types";
 49 | import { AlertDialogDemo } from "~/components/alert-dialog-json";
 50 | import { threads } from "db/schema/threads";
 51 | 
 52 | const db = new DB();
 53 | 
 54 | type ThreadWithAuthor = Thread & { author: User };
 55 | 
 56 | export async function loader({
 57 |   request,
 58 | }: LoaderFunctionArgs): Promise<TypedResponse<ThreadWithAuthor[]>> {
 59 |   const url = new URL(request.url);
 60 |   const threads = (await fetch(`${url.origin}/api/threads/list`, {
 61 |     headers: {
 62 |       Authorization: `Bearer ${process.env.REFRESH_SECRET}`,
 63 |     },
 64 |   }).then((res) => res.json())) as ThreadWithAuthor[];
 65 | 
 66 |   await Promise.all(
 67 |     threads.map(async (thread) => {
 68 |       const user = await db.getUser({ id: thread.authorId });
 69 |       thread.author = user!;
 70 | 
 71 |       return thread;
 72 |     })
 73 |   );
 74 | 
 75 |   return json(threads, 200);
 76 | }
 77 | 
 78 | export default function Dashboard() {
 79 |   const data = useLoaderData<typeof loader>();
 80 | 
 81 |   return (
 82 |     <div className="flex flex-col w-full min-h-screen">
 83 |       <main className="flex flex-col flex-1 gap-4 p-4 md:gap-8 md:p-8">
 84 |         <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
 85 |           <Card x-chunk="dashboard-01-chunk-0">
 86 |             <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
 87 |               <CardTitle className="text-sm font-medium">Total Users</CardTitle>
 88 |               <Users className="w-4 h-4 text-muted-foreground" />
 89 |             </CardHeader>
 90 |             <CardContent>
 91 |               <p className="text-2xl font-bold">0</p>
 92 |             </CardContent>
 93 |           </Card>
 94 |           <Card x-chunk="dashboard-01-chunk-1">
 95 |             <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
 96 |               <CardTitle className="text-sm font-medium">Threads</CardTitle>
 97 |               <FilePen className="w-4 h-4 text-muted-foreground" />
 98 |             </CardHeader>
 99 |             <CardContent>
100 |               <p className="text-2xl font-bold">{data.length}</p>
101 |             </CardContent>
102 |           </Card>
103 |         </div>
104 |         <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
105 |           <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
106 |             <CardHeader className="flex flex-row items-center">
107 |               <div className="grid gap-2">
108 |                 <CardTitle>Threads</CardTitle>
109 |                 <CardDescription>Semua Threads ada disini.</CardDescription>
110 |               </div>
111 |               {/* <AlertDialogDemo
112 |                 className="gap-1 ml-auto"
113 |                 buttonText="Lihat data dalam bentuk JSON"
114 |                 lang="json"
115 |                 dialogTitle="Data Threads"
116 |                 dialogContent={JSON.stringify(data, null, 2)}
117 |                 close={true}
118 |                 closeText="Tutup"
119 |                 children={<ArrowUpRight className="w-4 h-4" />}
120 |               /> */}
121 |               {/* <ArrowUpRight className="w-4 h-4" /> */}
122 |             </CardHeader>
123 |             <CardContent>
124 |               <Table>
125 |                 <TableHeader>
126 |                   <TableRow>
127 |                     <TableHead>Judul</TableHead>
128 |                     <TableHead className="text-center">Tanggal</TableHead>
129 |                     <TableHead className="text-right">Status</TableHead>
130 |                   </TableRow>
131 |                 </TableHeader>
132 |                 <TableBody>
133 |                   {data.map((thread) => {
134 |                     const date = new Date(thread.createdAt!);
135 |                     const fullDate = `${date
136 |                       .getDate()
137 |                       .toString()
138 |                       .padStart(2, "0")}-${(date.getMonth() + 1)
139 |                       .toString()
140 |                       .padStart(2, "0")}-${date.getFullYear()}`;
141 | 
142 |                     return (
143 |                       <TableRow key={thread.id}>
144 |                         <TableCell>
145 |                           <Link
146 |                             to={`/threads/${thread.id}`}
147 |                             className="hover:text-primary/45"
148 |                           >
149 |                             {thread.title}
150 |                           </Link>
151 |                           <span className="text-sm text-muted-foreground leading-6 block max-w-32 truncate">
152 |                             {thread.author?.username}
153 |                           </span>
154 |                         </TableCell>
155 |                         <TableCell className="text-center">
156 |                           {fullDate}
157 |                         </TableCell>
158 |                         <TableCell className="text-right">
159 |                           {thread.status === "open" ? (
160 |                             <Badge variant="success">Buka</Badge>
161 |                           ) : (
162 |                             <Badge variant="secondary">Tutup</Badge>
163 |                           )}
164 |                         </TableCell>
165 |                       </TableRow>
166 |                     );
167 |                   })}
168 |                 </TableBody>
169 |               </Table>
170 |             </CardContent>
171 |           </Card>
172 |           <Card x-chunk="dashboard-01-chunk-5">
173 |             <CardHeader>
174 |               <CardTitle>Admin</CardTitle>
175 |             </CardHeader>
176 |             <CardContent className="grid gap-8">
177 |               <div className="flex items-center gap-4">
178 |                 <Avatar className="hidden h-9 w-9 sm:flex">
179 |                   <AvatarImage src="" alt="Avatar" />
180 |                   <AvatarFallback>AD</AvatarFallback>
181 |                 </Avatar>
182 |                 <div className="grid gap-1">
183 |                   <p className="text-sm font-medium leading-none">Admin 1</p>
184 |                   <p className="text-sm text-muted-foreground">
185 |                     admin1@email.com
186 |                   </p>
187 |                 </div>
188 |                 <div className="ml-auto font-medium">
189 |                   <Badge variant="success">Online</Badge>
190 |                 </div>
191 |               </div>
192 |               <div className="flex items-center gap-4">
193 |                 <Avatar className="hidden h-9 w-9 sm:flex">
194 |                   <AvatarImage src="" alt="Avatar" />
195 |                   <AvatarFallback>AD</AvatarFallback>
196 |                 </Avatar>
197 |                 <div className="grid gap-1">
198 |                   <p className="text-sm font-medium leading-none">Admin 2</p>
199 |                   <p className="text-sm text-muted-foreground">
200 |                     admin2@email.com
201 |                   </p>
202 |                 </div>
203 |                 <div className="ml-auto font-medium">
204 |                   <Badge variant="secondary">Offline</Badge>
205 |                 </div>
206 |               </div>
207 |             </CardContent>
208 |           </Card>
209 |         </div>
210 |       </main>
211 |     </div>
212 |   );
213 | }
214 | 


--------------------------------------------------------------------------------
/app/components/fancy-area.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useRef, useCallback, KeyboardEvent } from "react";
  2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
  3 | import { Textarea } from "~/components/ui/textarea";
  4 | import { Button } from "~/components/ui/button";
  5 | import { Card } from "~/components/ui/card";
  6 | import { Bold, Italic, Link, Code, Undo, Redo } from "lucide-react";
  7 | import ReactMarkdown from "react-markdown";
  8 | import { FancyAreaProps } from "~/types";
  9 | 
 10 | export default function FancyArea(props: FancyAreaProps) {
 11 |   const [text, setText] = useState("");
 12 |   const [undoStack, setUndoStack] = useState<string[]>([]);
 13 |   const [redoStack, setRedoStack] = useState<string[]>([]);
 14 |   const textareaRef = useRef<HTMLTextAreaElement>(null);
 15 | 
 16 |   const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 17 |     setUndoStack((prev) => [...prev, text]);
 18 |     setRedoStack([]);
 19 |     setText(e.target.value);
 20 |   };
 21 | 
 22 |   const insertFormatting = useCallback(
 23 |     (startTag: string, endTag: string) => {
 24 |       const textarea = textareaRef.current;
 25 |       if (!textarea) return;
 26 | 
 27 |       const start = textarea.selectionStart;
 28 |       const end = textarea.selectionEnd;
 29 |       const selectedText = textarea.value.substring(start, end);
 30 |       const beforeText = textarea.value.substring(0, start);
 31 |       const afterText = textarea.value.substring(end);
 32 | 
 33 |       const newText = beforeText + startTag + selectedText + endTag + afterText;
 34 |       setUndoStack((prev) => [...prev, text]);
 35 |       setRedoStack([]);
 36 |       setText(newText);
 37 | 
 38 |       setTimeout(() => {
 39 |         textarea.focus();
 40 |         textarea.setSelectionRange(
 41 |           start + startTag.length,
 42 |           end + startTag.length
 43 |         );
 44 |       }, 0);
 45 |     },
 46 |     [text]
 47 |   );
 48 | 
 49 |   const handleKeyDown = useCallback(
 50 |     (e: KeyboardEvent<HTMLTextAreaElement>) => {
 51 |       if (e.ctrlKey) {
 52 |         switch (e.key) {
 53 |           case "b":
 54 |             e.preventDefault();
 55 |             insertFormatting("**", "**");
 56 |             break;
 57 |           case "i":
 58 |             e.preventDefault();
 59 |             insertFormatting("*", "*");
 60 |             break;
 61 |           case "l":
 62 |             e.preventDefault();
 63 |             insertFormatting("[", "](url)");
 64 |             break;
 65 |           case ",":
 66 |             e.preventDefault();
 67 |             insertFormatting("`", "`");
 68 |             break;
 69 |           case "z":
 70 |             e.preventDefault();
 71 |             if (undoStack.length > 0) {
 72 |               const prevText = undoStack.pop()!;
 73 |               setRedoStack((prev) => [text, ...prev]);
 74 |               setText(prevText);
 75 |               setUndoStack([...undoStack]);
 76 |             }
 77 |             break;
 78 |           case "y":
 79 |             e.preventDefault();
 80 |             if (redoStack.length > 0) {
 81 |               const nextText = redoStack.shift()!;
 82 |               setUndoStack((prev) => [...prev, text]);
 83 |               setText(nextText);
 84 |               setRedoStack([...redoStack]);
 85 |             }
 86 |             break;
 87 |         }
 88 |       }
 89 |     },
 90 |     [insertFormatting, undoStack, redoStack, text]
 91 |   );
 92 | 
 93 |   const handleBold = () => insertFormatting("**", "**");
 94 |   const handleItalic = () => insertFormatting("*", "*");
 95 |   const handleLink = () => insertFormatting("[", "](url)");
 96 |   const handleCode = () => insertFormatting("`", "`");
 97 |   const handleUndo = () => {
 98 |     if (undoStack.length > 0) {
 99 |       const prevText = undoStack.pop()!;
100 |       setRedoStack((prev) => [text, ...prev]);
101 |       setText(prevText);
102 |       setUndoStack([...undoStack]);
103 |     }
104 |   };
105 |   const handleRedo = () => {
106 |     if (redoStack.length > 0) {
107 |       const nextText = redoStack.shift()!;
108 |       setUndoStack((prev) => [...prev, text]);
109 |       setText(nextText);
110 |       setRedoStack([...redoStack]);
111 |     }
112 |   };
113 | 
114 |   return (
115 |     <Card className="w-full max-w-3xl bg-inherit border-none my-3 p-3 text-white">
116 |       <Tabs defaultValue="write" className="w-full">
117 |         <TabsList className="grid w-full grid-cols-2 bg-gray-800">
118 |           <TabsTrigger
119 |             value="write"
120 |             className="text-white data-[state=active]:bg-gray-700 data-[state=active]:text-white"
121 |           >
122 |             Tulis
123 |           </TabsTrigger>
124 |           <TabsTrigger
125 |             value="preview"
126 |             className="text-white data-[state=active]:bg-gray-700 data-[state=active]:text-white"
127 |           >
128 |             Preview
129 |           </TabsTrigger>
130 |         </TabsList>
131 |         <TabsContent value="write" className="p-4 space-y-4">
132 |           <div className="flex flex-wrap gap-2">
133 |             <Button
134 |               onClick={handleBold}
135 |               size="icon"
136 |               variant="outline"
137 |               className="bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
138 |             >
139 |               <Bold className="h-4 w-4" />
140 |             </Button>
141 |             <Button
142 |               onClick={handleItalic}
143 |               size="icon"
144 |               variant="outline"
145 |               className="bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
146 |             >
147 |               <Italic className="h-4 w-4" />
148 |             </Button>
149 |             <Button
150 |               onClick={handleLink}
151 |               size="icon"
152 |               variant="outline"
153 |               className="bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
154 |             >
155 |               <Link className="h-4 w-4" />
156 |             </Button>
157 |             <Button
158 |               onClick={handleCode}
159 |               size="icon"
160 |               variant="outline"
161 |               className="bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
162 |             >
163 |               <Code className="h-4 w-4" />
164 |             </Button>
165 |             <Button
166 |               onClick={handleUndo}
167 |               size="icon"
168 |               variant="outline"
169 |               className="bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
170 |             >
171 |               <Undo className="h-4 w-4" />
172 |             </Button>
173 |             <Button
174 |               onClick={handleRedo}
175 |               size="icon"
176 |               variant="outline"
177 |               className="bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
178 |             >
179 |               <Redo className="h-4 w-4" />
180 |             </Button>
181 |           </div>
182 |           <Textarea
183 |             ref={textareaRef}
184 |             value={text}
185 |             onChange={(e) => {
186 |               if(props.textAreaOnChange) {
187 |                 handleTextChange(e);
188 |                 props.textAreaOnChange(e);
189 |               } else {
190 |                 handleTextChange(e);
191 |               }
192 |             }}
193 |             onKeyDown={handleKeyDown}
194 |             placeholder="Build by @mxkaske, _powered by_ @shadcn **ui**. Supports raw <code>html</code>."
195 |             className={`min-h-[200px] bg-gray-800 text-white border-gray-700 placeholder-gray-500 w-full ${props.textAreaClassName}`}
196 |             name={props.textAreaName}
197 |             id={props.textAreaId}
198 |             readOnly={props.textAreaReadOnly}
199 |           />
200 |           <p className="hidden lg:block text-sm text-gray-400">
201 |             Keyboard shortcuts: Ctrl+B (bold), Ctrl+I (italic), Ctrl+L (link),
202 |             Ctrl+, (code), Ctrl+Z (undo), Ctrl+Y (redo)
203 |           </p>
204 |         </TabsContent>
205 |         <TabsContent value="preview" className="p-4 bg-gray-800 rounded-sm">
206 |           <div className="prose prose-invert max-w-none">
207 |             {text ? (
208 |               <ReactMarkdown
209 |                 components={{
210 |                   a: ({ node, ...props }) => (
211 |                     <a
212 |                       {...props}
213 |                       href={
214 |                         props.href?.startsWith("http://") ||
215 |                         props.href?.startsWith("https://")
216 |                           ? props.href
217 |                           : `https://${props.href}`
218 |                       }
219 |                       className="text-primary underline visited:text-purple-800"
220 |                     />
221 |                   ),
222 |                 }}
223 |               >
224 |                 {text}
225 |               </ReactMarkdown>
226 |             ) : (
227 |               <p className="text-gray-400">
228 |                 Tidak ada yang bisa dilihat disini &gt;_&lt;
229 |               </p>
230 |             )}
231 |           </div>
232 |         </TabsContent>
233 |       </Tabs>
234 |     </Card>
235 |   );
236 | }
237 | 


--------------------------------------------------------------------------------
/app/routes/threads.new.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef, useState } from "react";
  2 | import { getFileTypeIcon } from "~/lib/getFIleTypeIcon.tsx";
  3 | import { Button } from "~/components/ui/button";
  4 | import { Input } from "~/components/ui/input";
  5 | import { X } from "lucide-react";
  6 | import { Badge } from "~/components/ui/badge";
  7 | import {
  8 |   ActionFunction,
  9 |   LoaderFunction,
 10 |   LoaderFunctionArgs,
 11 |   unstable_createFileUploadHandler,
 12 |   unstable_parseMultipartFormData,
 13 |   json,
 14 |   SerializeFrom,
 15 |   TypedResponse,
 16 | } from "@remix-run/node";
 17 | import fs from "fs";
 18 | 
 19 | import { Form, useLoaderData } from "@remix-run/react";
 20 | import FancyArea from "~/components/fancy-area";
 21 | import { DB } from "~/.server/db.server";
 22 | import { login } from "~/.server/cookies";
 23 | import { LoginCookie, User } from "~/types";
 24 | import { Session } from "~/.server/sessions";
 25 | import { Attachment } from "~/types/Thread";
 26 | import { v4 } from "uuid";
 27 | 
 28 | export const action: ActionFunction = async ({ request, context }) => {
 29 |   const cookieHeader = request.headers.get("Cookie");
 30 |   const cookie: LoginCookie = (await login.parse(cookieHeader)) ?? {
 31 |     isLoggedIn: false,
 32 |   };
 33 |   const { getSession } = await Session;
 34 |   const session = await getSession(cookieHeader);
 35 |   const form = await request.formData();
 36 | 
 37 |   console.log("Form", form);
 38 | 
 39 |   // if (
 40 |   //   request.headers.get("Authorization") !== `Bearer ${session.get("token")}`
 41 |   // ) {
 42 |   //   return new Response("Unauthorized", {
 43 |   //     status: 401,
 44 |   //   });
 45 |   // }
 46 | 
 47 |   console.log("here");
 48 | 
 49 |   try {
 50 |     // console.log("Request", request);
 51 |     // const formData = await request.formData();
 52 | 
 53 |     const filePromises = form.getAll("file").map(async (file) => {
 54 |       if (file instanceof File) {
 55 |         const buffer = await file.arrayBuffer();
 56 |         const blob = new Blob([buffer], { type: file.type });
 57 |         return { name: file.name, blob };
 58 |       }
 59 |       return null;
 60 |     });
 61 | 
 62 |     const imagePromises = form.getAll("image").map(async (file) => {
 63 |       if (file instanceof File) {
 64 |         const buffer = await file.arrayBuffer();
 65 |         const blob = new Blob([buffer], { type: file.type });
 66 |         return { name: file.name, blob };
 67 |       }
 68 |       return null;
 69 |     });
 70 | 
 71 |     const attachments: Attachment[] = [];
 72 |     const filesWithBlobs = await Promise.all([
 73 |       ...filePromises,
 74 |       ...imagePromises,
 75 |     ]);
 76 |     console.log("Files with Blobs", filesWithBlobs);
 77 | 
 78 |     await Promise.all(
 79 |       filesWithBlobs.map(async (file) => {
 80 |         const url = new URL(request.url);
 81 |         const extension = /\.[0-9a-z]+$/i.exec(file?.name!)![0];
 82 |         const name = v4() + extension;
 83 |         console.log("Name", name);
 84 | 
 85 |         if (file) {
 86 |           fs.writeFileSync(
 87 |             `./uploads/${name}`,
 88 |             new Uint8Array(await file.blob.arrayBuffer())
 89 |           );
 90 |         }
 91 | 
 92 |         attachments.push({
 93 |           name,
 94 |           url: `/files/${name}`,
 95 |           type: file?.blob.type!,
 96 |         });
 97 | 
 98 |         console.log("Attachments 1", attachments);
 99 |       })
100 |     );
101 | 
102 |     console.log("Attachments", attachments);
103 |     console.log("Form", form);
104 |     // console.log("Form ", form);
105 |     console.log("Files", form.getAll("file"));
106 | 
107 |     // console.log("Form", form.get("title"), form.get("content"));
108 | 
109 |     const db = new DB();
110 | 
111 |     await db.newThread({
112 |       author: cookie.user,
113 |       thread: {
114 |         title: form.get("title") as string,
115 |         content: form.get("content") as string,
116 |         attachments,
117 |       },
118 |     });
119 | 
120 |     return new Response("Files uploaded", {
121 |       status: 200,
122 |     });
123 |   } catch (e) {
124 |     console.log(e);
125 | 
126 |     return new Response("Failed to upload files", {
127 |       status: 500,
128 |     });
129 |   }
130 | };
131 | 
132 | const ThreadsNew = () => {
133 |   const [title, setTitle] = useState("");
134 |   const [content, setContent] = useState("");
135 |   const [file, setFile] = useState<File[]>([]);
136 |   const [images, setImages] = useState<File[]>([]);
137 |   const fileInputRef = useRef<HTMLInputElement>(null);
138 |   const imageInputRef = useRef<HTMLInputElement>(null);
139 |   console.log(images, file);
140 |   console.log(fileInputRef, imageInputRef);
141 |   // const { user, token } = useLoaderData<typeof loader>();
142 | 
143 |   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
144 |     setTitle(e.target.value);
145 |   };
146 | 
147 |   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
148 |     setContent(e.target.value);
149 |   };
150 | 
151 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
152 |     const newFiles = Array.from(fileInputRef.current?.files as FileList);
153 |     setFile((prevFiles) => {
154 |       const updatedFiles =
155 |         prevFiles.length === 0 ? [...newFiles] : [...prevFiles, ...newFiles];
156 | 
157 |       const dataTransfer = new DataTransfer();
158 |       updatedFiles.forEach((file) => {
159 |         dataTransfer.items.add(file);
160 |       });
161 | 
162 |       console.log(dataTransfer.files, updatedFiles);
163 | 
164 |       // Update the file input's files property
165 |       const fileInput = e.target;
166 |       fileInput.files = dataTransfer.files;
167 | 
168 |       return updatedFiles;
169 |     });
170 |   };
171 | 
172 |   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
173 |     console.log(e.target.files);
174 |     const newImages = Array.from(e.target.files as FileList);
175 | 
176 |     setImages((prevImages) => {
177 |       const updatedImages =
178 |         prevImages.length === 0
179 |           ? [...newImages]
180 |           : [...prevImages, ...newImages];
181 | 
182 |       return updatedImages;
183 |     });
184 |   };
185 | 
186 |   const handleDeleteFile = (index: number) => {
187 |     const updatedFiles = file.filter((_, i) => i !== index);
188 |     setFile(updatedFiles);
189 | 
190 |     // Update the file input's files property
191 |     const fileInput = fileInputRef.current;
192 |     if (fileInput) {
193 |       const dataTransfer = new DataTransfer();
194 |       updatedFiles.forEach((file) => {
195 |         dataTransfer.items.add(file);
196 |       });
197 |       fileInput.files = dataTransfer.files;
198 |     }
199 |   };
200 | 
201 |   const handleDeleteImage = (index: number, imageUrl: string) => {
202 |     URL.revokeObjectURL(imageUrl);
203 | 
204 |     const updatedImages = images.filter((_, i) => i !== index);
205 |     setImages(updatedImages);
206 | 
207 |     // Update the image input's files property
208 |     const imageInput = imageInputRef.current;
209 |     if (imageInput) {
210 |       const dataTransfer = new DataTransfer();
211 |       updatedImages.forEach((file) => {
212 |         dataTransfer.items.add(file);
213 |       });
214 |       imageInput.files = dataTransfer.files;
215 |     }
216 |   };
217 | 
218 |   const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
219 |     e.preventDefault();
220 |     const formData = new FormData();
221 |     formData.append("title", title);
222 |     formData.append("content", content);
223 |     file.forEach((file) => {
224 |       formData.append("file", file);
225 |     });
226 |     images.forEach((image) => {
227 |       formData.append("image", image);
228 |     });
229 |     const res = await fetch("/threads/new", {
230 |       method: "POST",
231 |       headers: {
232 |         // Authorization: `Bearer ${token}`,
233 |         // "Content-Type": "multipart/form-data",
234 |       },
235 |       body: formData,
236 |     });
237 |     if (res.ok) {
238 |       console.log("Thread created");
239 |     } else {
240 |       console.log("Failed to create thread");
241 |     }
242 |   };
243 | 
244 |   // Cleanup function to revoke object URLs
245 |   React.useEffect(() => {
246 |     return () => {
247 |       images.forEach((image) => {
248 |         URL.revokeObjectURL(URL.createObjectURL(image));
249 |       });
250 |     };
251 |   }, [images]);
252 | 
253 |   return (
254 |     <div className="flex items-center justify-center max-h-screen mt-5">
255 |       <Form
256 |         method="POST"
257 |         action="/threads/new"
258 |         className="w-full max-w-md md:mr-4 overflow-y-auto max-h-[80vh]"
259 |         encType="multipart/form-data"
260 |         onSubmit={submitHandler}
261 |       >
262 |         <fieldset className="border border-muted p-3">
263 |           <legend className="text-xl font-bold text-center">
264 |             Create New Thread
265 |           </legend>
266 |           <Input
267 |             type="text"
268 |             placeholder="Judul"
269 |             value={title}
270 |             onChange={handleTitleChange}
271 |             className="mt-4"
272 |             name="title"
273 |           />
274 |           <FancyArea
275 |             textAreaName="content"
276 |             textAreaPlaceholder="Curahkan isi hatimu..."
277 |             textAreaOnChange={handleContentChange}
278 |           ></FancyArea>
279 |           <label htmlFor="uplfile" className="mt-4 cursor-pointer w-fit mr-5">
280 |             <Button
281 |               className="border border-muted text-white rounded-sm"
282 |               variant="outline"
283 |               onClick={(e) => {
284 |                 e.preventDefault();
285 |                 document.getElementById("uplfile")?.click();
286 |               }}
287 |             >
288 |               Upload Files
289 |             </Button>
290 |             <Input
291 |               type="file"
292 |               accept=".pdf,.doc,.docx,.mp4,.mp3"
293 |               id="uplfile"
294 |               onChange={handleFileChange}
295 |               className="hidden"
296 |               name="file"
297 |               ref={fileInputRef}
298 |               multiple
299 |             />
300 |           </label>
301 |           {file.length === 0 ? (
302 |             ""
303 |           ) : (
304 |             <Badge variant="outline">
305 |               {file.length} file{file.length > 1 ? "s" : ""} selected
306 |             </Badge>
307 |           )}
308 |           <div className="mt-4">
309 |             {file.map((file, index) => (
310 |               <div
311 |                 key={index}
312 |                 className="relative w-full mt-3 flex items-center border-muted p-2 rounded border mb-4 hover:border-primary/50 focus-within:border-primary/50"
313 |               >
314 |                 <span className="mr-2">{getFileTypeIcon(file.name)}</span>
315 |                 <span>{file.name}</span>
316 |                 <button
317 |                   onClick={() => handleDeleteFile(index)}
318 |                   className="absolute top-0 right-0 text-muted hover:bg-muted/50 animate-in animate-out rounded-full p-1 m-1"
319 |                 >
320 |                   <X />
321 |                 </button>
322 |               </div>
323 |             ))}
324 |           </div>
325 |           <label htmlFor="uplimg" className="mt-4 cursor-pointer w-fit mr-5">
326 |             <Button
327 |               className="border border-muted text-white rounded-sm"
328 |               variant="outline"
329 |               onClick={(e) => {
330 |                 e.preventDefault();
331 |                 document.getElementById("uplimg")?.click();
332 |               }}
333 |             >
334 |               Upload Images
335 |             </Button>
336 |             <Input
337 |               type="file"
338 |               accept="image/*"
339 |               onChange={handleImageChange}
340 |               className="hidden hover:bg-transparent"
341 |               id="uplimg"
342 |               ref={imageInputRef}
343 |               name="image"
344 |               multiple
345 |             />
346 |           </label>
347 |           {images.length === 0 ? (
348 |             ""
349 |           ) : (
350 |             <Badge variant="outline">
351 |               {images.length} image{images.length > 1 ? "s" : ""} selected
352 |             </Badge>
353 |           )}
354 |           <div className="mt-4">
355 |             {images.map((image, index) => {
356 |               const imageUrl = URL.createObjectURL(image as Blob);
357 |               return (
358 |                 <div key={index} className="relative w-full mt-3">
359 |                   <img src={imageUrl} alt="" className="w-full" />
360 |                   <button
361 |                     onClick={() => handleDeleteImage(index, imageUrl)}
362 |                     className="absolute top-0 right-0 text-muted hover:bg-muted/50 animate-in animate-out rounded-full p-1 m-1"
363 |                   >
364 |                     <X />
365 |                   </button>
366 |                 </div>
367 |               );
368 |             })}
369 |           </div>
370 |           <Button className="mt-4" type="submit">
371 |             Submit
372 |           </Button>
373 |         </fieldset>
374 |       </Form>
375 |     </div>
376 |   );
377 | };
378 | 
379 | export default ThreadsNew;
380 | 


--------------------------------------------------------------------------------