feat(auth): auth feature is here

src/components/SurauReview.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { StarIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
@@ -266,14 +268,14 @@ const SurauReview = () => {
                   <div key={review.id} className="py-8">
                     <div className="flex items-center">
                       <Image
-                        src={`https://api.dicebear.com/5.x/thumbs/svg?seed=${1}&background=%23fff&radius=50&width=50&height=50}`}
+                        src={`https://api.dicebear.com/5.x/thumbs/svg?seed=${review.user?.name?.trim().toLowerCase()}&background=%23fff&radius=50&width=50&height=50}`}
                         alt="nil"
                         className="h-12 w-12 rounded-full"
                         width={12}
                         height={12}
                       />
-                      <div className="ml-4">
-                        <h4 className="text-sm font-bold text-gray-900"></h4>
+                      <div className="ml-4"> 
+                        <h4 className="text-sm font-bold text-gray-900">{review.user?.name}</h4>
                         <div className="mt-1 flex items-center">
                           {[0, 1, 2, 3, 4].map((rating) => (
                             <StarIcon

src/components/profile/StatsCard.tsx

@@ -1,56 +1,36 @@
-import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/20/solid";
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import {
   CursorArrowRaysIcon,
   EnvelopeOpenIcon,
+  GlobeAsiaAustraliaIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
+import { api } from "../../utils/api";
 
-const stats = [
-  {
-    id: 1,
-    name: "Total Subscribers",
-    stat: "71,897",
-    icon: UsersIcon,
-    change: "122",
-    changeType: "increase",
-  },
-  {
-    id: 2,
-    name: "Avg. Open Rate",
-    stat: "58.16%",
-    icon: EnvelopeOpenIcon,
-    change: "5.4%",
-    changeType: "increase",
-  },
-  {
-    id: 3,
-    name: "Avg. Click Rate",
-    stat: "24.57%",
-    icon: CursorArrowRaysIcon,
-    change: "3.2%",
-    changeType: "decrease",
-  },
-];
-function classNames(...classes: string[]) {
-  return classes.filter(Boolean).join(" ");
-}
 
 const StatsCard = () => {
+
+  const {data, isLoading} = api.profile.getInfo.useQuery();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <div className="p-2">
       <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
-        <div className="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
+        <div className="relative overflow-hidden rounded-lg bg-white px-4 pb-2 pt-5 shadow sm:px-6 sm:pt-6">
           <dt>
             <div className="absolute rounded-md bg-indigo-500 p-3">
-              <UsersIcon className="h-6 w-6 text-white" aria-hidden="true" />
+              <GlobeAsiaAustraliaIcon className="h-6 w-6 text-white" aria-hidden="true" />
             </div>
             <p className="ml-16 truncate text-sm font-medium text-gray-500">
               Surau
             </p>
           </dt>
           <dd className="ml-16 flex items-baseline pb-6 sm:pb-7">
-            <p className="text-2xl font-semibold text-gray-900">0</p>
-            <div className="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
+            <p className="text-2xl font-semibold text-gray-900">{data?.Surau.length}</p>
+            {/* <div className="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
               <div className="text-sm">
                 <a
                   href="#"
@@ -59,7 +39,30 @@ const StatsCard = () => {
                   View all<span className="sr-only"> Surau stats</span>
                 </a>
               </div>
+            </div> */}
+          </dd>
+        </div>
+        <div className="relative overflow-hidden rounded-lg bg-white px-4 pb-2 pt-5 shadow sm:px-6 sm:pt-6">
+          <dt>
+            <div className="absolute rounded-md bg-indigo-500 p-3">
+              <GlobeAsiaAustraliaIcon className="h-6 w-6 text-white" aria-hidden="true" />
             </div>
+            <p className="ml-16 truncate text-sm font-medium text-gray-500">
+              Reviews
+            </p>
+          </dt>
+          <dd className="ml-16 flex items-baseline pb-6 sm:pb-7">
+            <p className="text-2xl font-semibold text-gray-900">{data?.Rating.length}</p>
+            {/* <div className="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
+              <div className="text-sm">
+                <a
+                  href="#"
+                  className="font-medium text-indigo-600 hover:text-indigo-500"
+                >
+                  View all<span className="sr-only"> Ratings stats</span>
+                </a>
+              </div>
+            </div> */}
           </dd>
         </div>
       </dl>

src/pages/profile/index.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Header from "../../components/shared/Header";
 import { useState, useEffect } from "react";
 import StatsCard from "../../components/profile/StatsCard";
+import { api } from "../../utils/api";
 
 const imagePaths = [
   "/assets/background/carisurau.jpeg",

src/server/api/root.ts

@@ -1,6 +1,7 @@
 import { createTRPCRouter } from "./trpc";
 import { surauRouter } from "./routers/surau";
 import { rateRouter } from "./routers/rate";
+import { profileRouter } from "./routers/profile";
 
 /**
  * This is the primary router for your server.
@@ -10,6 +11,7 @@ import { rateRouter } from "./routers/rate";
 export const appRouter = createTRPCRouter({
   surau: surauRouter,
   rate: rateRouter,
+  profile: profileRouter,
 });
 
 // export type definition of API

src/server/api/routers/profile.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+import { createTRPCRouter, publicProcedure } from "../trpc";
+
+export const profileRouter = createTRPCRouter({
+    getInfo: publicProcedure
+    .query(async ({ ctx }) => {
+        return ctx.prisma.user.findUnique({
+            where: {
+                id: ctx.session?.user.id,
+            },
+            include: {
+                Surau: true,
+                Rating: true,
+            },
+        });
+    }),
+});

src/server/api/routers/rate.ts

@@ -50,6 +50,11 @@ export const rateRouter = createTRPCRouter({
               id: input.surau_id,
             },
           },
+          user: {
+            connect: {
+              id: ctx.session?.user.id,
+            }
+          },
           rating: input.rating,
           review: input.review,
         },
@@ -62,10 +67,13 @@ export const rateRouter = createTRPCRouter({
       })
     )
     .query(async ({ ctx, input }) => {
-      const ratings: Rating[] = await ctx.prisma.rating.findMany({
+      const ratings = await ctx.prisma.rating.findMany({
         where: {
           surau_id: input.surau_id,
         },
+        include: {
+          user: true,
+        },
       });
       const totalRating = ratings.reduce((acc, curr) => acc + curr.rating, 0);
 

src/server/api/routers/surau.ts

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { createTRPCRouter, publicProcedure } from "../trpc";
 import type { SurauTableColumn } from "./types";
 import { sendApprovalMail } from "../../services/generate-surau-verification";
-import { Surau } from "../../../../prisma/client";
+import type { Surau } from "../../../../prisma/client";
 
 export const surauRouter = createTRPCRouter({
   addSurau: publicProcedure
@@ -43,6 +43,11 @@ export const surauRouter = createTRPCRouter({
             })),
           },
         },
+        user: {
+          connect: {
+            id: ctx.session?.user.id,
+          },
+        },
         state: {
           connect: {
             id: input.state_id,

src/server/services/generate-surau-verification.ts

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import nodemailer from 'nodemailer';
 import { Buffer } from 'buffer';
 import {prisma} from '../../server/db';
@@ -45,5 +49,9 @@ export async function sendApprovalMail(surauId: string): Promise<void> {
         html: emailContent
     };
 
-    await transport.sendMail(mailOptions);
+    try {
+      await transport.sendMail(mailOptions);
+    }catch(err) {
+      console.error(err);
+    }
 }

yarn.lock

@@ -3438,6 +3438,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.13.0.tgz#0400d1e6ce87e9d3032c19eb6c58205b0d3f7850"
   integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg==
 
+"@types/nodemailer@^6.4.8":
+  version "6.4.8"
+  resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.8.tgz#f06c661e9b201fc2acc3a00a0fded42ba7eaca9d"
+  integrity sha512-oVsJSCkqViCn8/pEu2hfjwVO+Gb3e+eTWjg3PcjeFKRItfKpKwHphQqbYmPQrlMk+op7pNNWPbsJIEthpFN/OQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -6962,6 +6969,11 @@ node-releases@^2.0.8:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
   integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
+nodemailer@^6.9.3:
+  version "6.9.3"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.3.tgz#e4425b85f05d83c43c5cd81bf84ab968f8ef5cbe"
+  integrity sha512-fy9v3NgTzBngrMFkDsKEj0r02U7jm6XfC3b52eoNV+GCrGj+s8pt5OqhiJdWKuw51zCTdiNR/IUD1z33LIIGpg==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"