Edit user page (#34)

Co-authored-by: Andrej Arbanas <[email protected]>

package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.39.0",
     "@trpc/client": "next",

src/app/users/[id]/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+import MainLayout from "~/components/layout/mainLayout";
+import { useParams } from "next/navigation";
+import { api } from "~/trpc/react";
+import FormComponent from "~/components/organisms/form/formComponent/FormComponent";
+import { useForm } from "react-hook-form";
+import LoadingSpinner from "~/components/organisms/loadingSpinner/LoadingSpinner";
+import FormInput from "~/components/organisms/form/formInput/FormInput";
+import FormSwitch from "~/components/organisms/form/formSwitch/FormSwitch";
+import { Button } from "~/components/atoms/Button";
+
+type FindUserReturnDTO = {
+  id: string;
+  email: string;
+  active: boolean;
+  firstname: string;
+  lastname: string;
+};
+
+export default function UserDetailPage() {
+  const { id } = useParams(); // Get the user ID from the URL
+
+  // Fetch user data by ID
+  const { data, isLoading, error } = api.user.findById.useQuery({
+    id: id as string,
+  });
+
+  const form = useForm<FindUserReturnDTO>({
+    defaultValues: {
+      email: data?.email ?? "",
+      active: data?.active ?? false,
+      firstname: data?.profile?.firstName ?? "",
+      lastname: data?.profile?.lastName ?? "",
+    },
+  });
+  // Handle form submission
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    // Implementation for form submission goes here
+  };
+
+  return (
+    <MainLayout
+      headerChildren={
+        <h1 className="text-xl font-bold">
+          Uređivanje volontera {data?.profile?.firstName}{" "}
+          {data?.profile?.lastName}
+        </h1>
+      }
+    >
+      <div>
+        {isLoading && <LoadingSpinner />}
+        {error && <div>Greška</div>}
+
+        <FormComponent form={form} onSubmit={handleSubmit}>
+          <FormInput
+            id="firstname"
+            label="Ime*"
+            {...form.register("firstname", {
+              required: "Ime je obavezno polje",
+            })}
+          />
+
+          <FormInput
+            id="lastname"
+            label="Prezime*"
+            {...form.register("lastname", {
+              required: "Prezime je obavezno polje",
+            })}
+          />
+
+          <FormInput
+            id="email"
+            label="Email*"
+            {...form.register("email", {
+              required: "Email je obavezno polje",
+            })}
+          />
+
+          <FormSwitch
+            id="active"
+            label="Aktivan"
+            active={data?.active ?? false}
+            setActive={() => {
+              console.log("Switched");
+            }}
+          />
+
+          <Button className="bg-black !text-base text-white" type="submit">
+            <span>Spremi promjene</span>
+          </Button>
+        </FormComponent>
+      </div>
+    </MainLayout>
+  );
+}

src/app/users/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useEffect, useState } from "react";
 import MainLayout from "~/components/layout/mainLayout";
 import { api } from "~/trpc/react";
 import {
@@ -15,10 +16,10 @@ import {
   PaginationContent,
   PaginationPages,
 } from "~/components/organisms/Pagination";
-import { useState, useEffect } from "react";
 import LoadingSpinner from "~/components/organisms/loadingSpinner/LoadingSpinner";
 import SearchInput from "~/components/atoms/SearchInput";
 import { useDebounce } from "@uidotdev/usehooks";
+import Link from "next/link";
 
 const Users = () => {
   const [page, setPage] = useState<number>(0);
@@ -102,7 +103,13 @@ const Users = () => {
                         )}
                       </TableCell>
                       <TableCell className="cursor-pointer md:table-cell">
-                        <Pencil />
+                        <Link
+                          href={{
+                            pathname: `/users/${user.id}`,
+                          }}
+                        >
+                          <Pencil />
+                        </Link>
                       </TableCell>
                     </TableRow>
                   ))}

src/components/organisms/Calendar.tsx

@@ -56,8 +56,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />

src/components/organisms/form/formSwitch/FormSwitch.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import * as Switch from "@radix-ui/react-switch";
+
+type FormSwitchProps = {
+  id: string;
+  label: string;
+  active: boolean;
+  setActive: () => void;
+};
+
+// eslint-disable-next-line react/display-name
+const FormSwitch: React.FC<FormSwitchProps> = ({
+  id,
+  label,
+  setActive,
+  active,
+}) => {
+  return (
+    <div>
+      <label htmlFor={id}>{label}</label>
+      <Switch.Root
+        className="bg-blackA6 shadow-blackA4 relative h-[25px] w-[42px] cursor-pointer rounded-full shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[state=checked]:bg-black"
+        id="active"
+        checked={active}
+        onCheckedChange={setActive}
+      >
+        <Switch.Thumb className="shadow-blackA4 block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+      </Switch.Root>
+    </div>
+  );
+};
+
+export default FormSwitch;

src/server/api/routers/user.ts

@@ -9,7 +9,7 @@ export const userRouter = createTRPCRouter({
     .query(async ({ input }) => {
       const result = await userService.getById(input.id);
 
-      return result;
+      return result[0];
     }),
   find: protectedProcedure
     .input(paginationQuerySchema)

src/server/auth.ts

@@ -58,7 +58,7 @@ export const authOptions: NextAuthOptions = {
         email: { label: "Email", type: "email" },
         password: { label: "Password", type: "password" },
       },
-      async authorize(credentials, req) {
+      async authorize(credentials, _req) {
         if (!credentials?.email || !credentials?.password) return null;
 
         const [user] = await db

yarn.lock

@@ -1426,6 +1426,19 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
+"@radix-ui/react-switch@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.0.tgz#fcf8e778500f1d60d4b2bec2fc3fad77a7c118e3"
+  integrity sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/[email protected]":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
@@ -1450,6 +1463,11 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
+"@radix-ui/[email protected]":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
+  integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==
+
 "@radix-ui/[email protected]":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz#13b25b913bd3e3987cc9b073a1a164bb1cf47b88"