chore: fetch graphql API for Asma'ul Husna

.dockerignore

@@ -7,7 +7,6 @@ apps/jadwal-sholat/cypress.config.ts
 .husky
 .vscode
 apps/jadwal-sholat/node_modules
-apps/jadwal-sholat/.next
 packages/eslint-config/node_modules
 .turbo
 node_modules

Dockerfile

@@ -19,6 +19,7 @@ RUN pnpm install --filter jadwal-sholat
 
 COPY . ./
 RUN pnpm run build
+COPY apps/jadwal-sholat/.next ./apps/jadwal-sholat/.next
 
 # run dev
 CMD ["pnpm", "run", "dev"]

LICENSE

@@ -6,4 +6,4 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

apps/jadwal-sholat/package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.50.1",
+    "@urql/next": "^1.1.1",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

apps/jadwal-sholat/src/app/(data)/asmaul-husna/page.tsx → apps/jadwal-sholat/src/app/(pages)/asmaul-husna/page.tsx

@@ -1,11 +1,12 @@
+import { cacheExchange, createClient, fetchExchange } from "@urql/next";
+import { registerUrql } from "@urql/next/rsc";
 import dynamic from "next/dynamic";
 import TransitionLayout from "~components/transition-layout";
 import { env } from "~env.mjs";
-import { AsmaulHusnaProps } from "~interfaces";
-import { getData } from "~lib/utils/axios-config";
 import { cn } from "~lib/utils/cn";
 import { MetaUrl } from "~lib/utils/enums";
 import { bitter } from "~lib/utils/fonts";
+import { GetAllAsmaulHusnaQuery } from "~lib/utils/graphql";
 
 const AsmaulHusnaClient = dynamic(() => import("./client"));
 
@@ -44,19 +45,19 @@ export const metadata = {
   metadataBase: new URL(url),
 };
 
-async function getAsmaulHusna(): Promise<AsmaulHusnaProps[]> {
-  try {
-    const response: { data: AsmaulHusnaProps[] } = await getData(
-      `${NEXT_PUBLIC_ASMAUL_HUSNA_API}/api/all`
-    );
-    return response.data;
-  } catch (err: any) {
-    throw new Error(err.message);
-  }
-}
+/**
+ * @see https://commerce.nearform.com/open-source/urql/docs/advanced/server-side-rendering/#invalidating-data-from-a-server-component
+ */
+const urqlClient = () =>
+  createClient({
+    url: `${NEXT_PUBLIC_ASMAUL_HUSNA_API}/api/graphql`,
+    exchanges: [cacheExchange, fetchExchange],
+  });
+
+const { getClient } = registerUrql(urqlClient);
 
 export default async function AsmaulHusna() {
-  const asmaulHusna = await getAsmaulHusna();
+  const asmaulHusna = await getClient().query(GetAllAsmaulHusnaQuery, {});
 
   return (
     <TransitionLayout
@@ -84,7 +85,7 @@ export default async function AsmaulHusna() {
           Berikut daftar Asma&#39;ul Husna
         </p>
       </div>
-      <AsmaulHusnaClient asmaulHusna={asmaulHusna} />
+      <AsmaulHusnaClient asmaulHusna={asmaulHusna.data.allAsmaulHusna.data} />
     </TransitionLayout>
   );
 }

apps/jadwal-sholat/src/app/(data)/doa-harian/page.tsx → apps/jadwal-sholat/src/app/(pages)/doa-harian/page.tsx

@@ -80,7 +80,7 @@ export default async function DoaHarian() {
               bitter.className
             )}
           >
-            Do'a Harian
+            Do'a Harian
           </h1>
           <Image
             src="/img/pray.svg"
@@ -92,7 +92,7 @@ export default async function DoaHarian() {
           />
         </div>
         <p data-cy="description" className="mt-2 text-lg font-medium">
-          Berikut daftar do'a harian yang tersedia
+          Berikut daftar do&#39;a harian yang tersedia
         </p>
       </div>
       <DoaHarianClient doaHarian={doaHarian} />

apps/jadwal-sholat/src/app/(data)/quran/surat/[number]/client.tsx → apps/jadwal-sholat/src/app/(pages)/quran/surat/[number]/client.tsx

@@ -12,11 +12,93 @@ import { env } from "~env.mjs";
 import { useFetch } from "~hooks";
 import { cn } from "~lib/utils/cn";
 import { bitter } from "~lib/utils/fonts";
-import { qoriOptions } from "~lib/utils/qori-options";
 import useGlobalStore from "~store";
 
 const { NEXT_PUBLIC_QURAN_API } = env;
 
+export const qoriOptions: Array<{ id: number; name: string }> = [
+  {
+    id: 1,
+    name: "Abdul Basit Murattal",
+  },
+  {
+    id: 2,
+    name: "Abdul Basit Mujawwad",
+  },
+  {
+    id: 3,
+    name: "Abdullah Basfar",
+  },
+  {
+    id: 4,
+    name: "Abdurrahmaan As-Sudais",
+  },
+  {
+    id: 5,
+    name: "Abu Bakr Ash-Shaatri",
+  },
+  {
+    id: 6,
+    name: "Ahmed ibn Ali al-Ajamy",
+  },
+  {
+    id: 7,
+    name: "Mishari Rashid Al-Afasy",
+  },
+  {
+    id: 8,
+    name: "Saad Al-Ghamidi",
+  },
+  {
+    id: 9,
+    name: "Hani Ar-Rifai",
+  },
+  {
+    id: 10,
+    name: "Mahmoud Khalil Al-Hussary",
+  },
+  {
+    id: 11,
+    name: "Mahmoud Khalil Al-Hussary Mujawwad",
+  },
+  {
+    id: 12,
+    name: "Al Hudhaify",
+  },
+  {
+    id: 13,
+    name: "Ibrahim Akhdar",
+  },
+  {
+    id: 14,
+    name: "Maher Al Muaiqly",
+  },
+  {
+    id: 15,
+    name: "Menshawi",
+  },
+  {
+    id: 16,
+    name: "Minshawy Mujawwad",
+  },
+  {
+    id: 17,
+    name: "Mohammad al Tablaway",
+  },
+  {
+    id: 18,
+    name: "Muhammad Ayyoub",
+  },
+  {
+    id: 19,
+    name: "Muhammad Jibreel",
+  },
+  {
+    id: 20,
+    name: "Saood bin Ibraaheem Ash-Shuraym",
+  },
+];
+
 export default function Client({ number }: { number: string }) {
   const {
     audio,

apps/jadwal-sholat/src/components/map.tsx

@@ -18,20 +18,19 @@ import useGlobalStore from "~store";
 
 function SearchField() {
   const provider = new OpenStreetMapProvider();
-
-  // @ts-ignore
-  const searchControl = new GeoSearchControl({
-    provider: provider,
-    style: "bar",
-  });
-
   const map = useMap();
 
   // @ts-ignore
   useEffect(() => {
+    // @ts-ignore
+    const searchControl = new GeoSearchControl({
+      provider: provider,
+      style: "bar",
+    });
+
     map.addControl(searchControl);
     return () => map.removeControl(searchControl);
-  }, [map, searchControl]);
+  }, [map]);
 
   return null;
 }

apps/jadwal-sholat/src/components/previous-or-next.tsx

@@ -1,7 +1,6 @@
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { P, match } from "ts-pattern";
-import { SuratProps } from "~interfaces";
 import { removeSelectedSurat } from "~lib/helpers";
 import { cn } from "~lib/utils/cn";
 

apps/jadwal-sholat/src/components/ui/card.tsx

@@ -4,54 +4,62 @@ import { cn } from "~lib/utils/cn";
 const Card = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <div
     ref={ref}
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
       className
     )}
     {...props}
-  />
+  >
+    {children}
+  </div>
 ));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
-  />
+  >
+    {children}
+  </div>
 ));
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <h3
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
       className
     )}
     {...props}
-  />
+  >
+    {children}
+  </h3>
 ));
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <p
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
-  />
+  >
+    {children}
+  </p>
 ));
 CardDescription.displayName = "CardDescription";
 
@@ -66,12 +74,14 @@ CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
-  />
+  >
+    {children}
+  </div>
 ));
 CardFooter.displayName = "CardFooter";
 

apps/jadwal-sholat/src/hooks/use-ascending.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { Dispatch, SetStateAction, useDeferredValue, useState } from "react";
 
 interface UseAscendingProps {

apps/jadwal-sholat/src/hooks/use-fetch.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import {
   UseQueryResult,
   keepPreviousData,

apps/jadwal-sholat/src/hooks/use-geolocation.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import useGlobalStore from "~store";
 

apps/jadwal-sholat/src/hooks/use-play-next-audio.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useRouter } from "next/navigation";
 import { Dispatch, SetStateAction, useState } from "react";
 import { AudioLoadOptions, useAudioPlayer } from "react-use-audio-player";

apps/jadwal-sholat/src/hooks/use-scroll-ayat.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { LastReadProps } from "~interfaces";
 
@@ -19,17 +17,14 @@ interface ScrollAyatProps {
  * @param {boolean} param0.isAudioEnded
  * @param {(isAudioEnded: boolean) => void} param0.setIsAudioEnded
  */
-export function useScrollAyat({
-  lastRead,
-  ayat,
-  isAudioEnded,
-  setIsAudioEnded,
-}: ScrollAyatProps) {
+export function useScrollAyat(
+  { lastRead, ayat, isAudioEnded, setIsAudioEnded }: ScrollAyatProps
+) {
   useEffect(() => {
+    const ayatId = document.getElementById(ayat);
     const lastReadId = document.getElementById(
-      `ayat-${lastRead.ayat?.toString()}`
+      `ayat-${lastRead.ayat?.toString() as string}`
     );
-    const ayatId = document.getElementById(ayat);
 
     if (
       lastReadId &&
@@ -38,7 +33,10 @@ export function useScrollAyat({
       lastReadId.scrollIntoView({ behavior: "smooth" });
     }
 
-    if (isAudioEnded) ayatId?.scrollIntoView({ behavior: "smooth" });
+    if (isAudioEnded) {
+      ayatId?.scrollIntoView({ behavior: "smooth" });
+    }
+
     setIsAudioEnded(false);
   }, [lastRead, isAudioEnded, setIsAudioEnded, ayat]);
 }

apps/jadwal-sholat/src/hooks/use-scroll.ts

@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback, useEffect } from "react";
 import useGlobalStore from "~store";