fix author drawer bug

=

@@ -0,0 +1,264 @@
+"use server"
+
+import { cookies } from "next/headers"
+import { createServerActionClient } from "@supabase/auth-helpers-nextjs"
+
+import {
+  Audio,
+  Author,
+  Database,
+  Reciter,
+  TablesInsert,
+  TablesUpdate,
+  Verse,
+  Xassida,
+} from "@/types/supabase"
+
+//const supabase = createClientComponentClient<Database>({})
+//
+const cookieStore = cookies()
+const supabase = createServerActionClient<Database>({
+  cookies: () => cookieStore,
+})
+
+const signInWithEmail = async (values: { email: string; password: string }) => {
+  const { error } = await supabase.auth.signInWithPassword(values)
+  if (error) throw Error
+
+  return true
+}
+
+const signOut = async () => await supabase.auth.signOut()
+
+const searchXassida = async (search: string): Promise<Xassida[]> => {
+  const { data, error } = await supabase
+    .from("xassida")
+    .select("*, author(name, tariha)")
+    .like("name", `%${search}%`)
+    .limit(10)
+  if (error) throw error
+
+  return data as any
+}
+
+const searchReciter = async (search: string): Promise<Reciter[]> => {
+  const { data, error } = await supabase
+    .from("reciter")
+    .select("*")
+    .like("name", `%${search}%`)
+    .limit(10)
+  if (error) throw error
+
+  return data as any
+}
+
+const getXassidas = async (
+  filters = {},
+  offset = 0,
+  page_size = 15
+): Promise<Xassida[]> => {
+  const from = offset * page_size
+  const to = from + page_size - 1
+  let query = supabase
+    .from("xassida")
+    .select("*, author!inner(*)")
+    .order("name")
+  // apply filters
+  Object.entries(filters).forEach(([k, v]) => {
+    if (v) query = query.filter(k, "eq", v)
+  })
+  const { data, error } = await query.range(from, to)
+  if (error) throw error
+
+  return data as any
+}
+
+const getXassidaById = async (id: number): Promise<Xassida> => {
+  const { data, error } = await supabase
+    .from("xassida")
+    .select("*, chapter(id, number), author(*), reciter(id, name)")
+    .eq("id", id)
+    .single()
+  if (error) throw error
+
+  return data as any
+}
+
+const getVersesByChapterId = async (
+  id: number,
+  offset = 1,
+  page_size = 20
+): Promise<Verse[]> => {
+  const from = offset * page_size
+  const to = from + page_size - 1
+  const { data, error } = await supabase
+    .from("verse")
+    .select("*, translations:verse_translation(*)")
+    .eq("chapter_id", id)
+    .order("number")
+    .range(from, to)
+  if (error) throw error
+
+  return data as any
+}
+
+const getAuthors = async (
+  filters = {},
+  offset = 0,
+  page_size = 15
+): Promise<Author[]> => {
+  const from = offset * page_size
+  const to = from + page_size - 1
+  let query = supabase.from("author").select().order("name")
+  // apply filters
+  Object.entries(filters).forEach(([k, v]) => {
+    if (v) query = query.filter(k, "eq", v)
+  })
+  const { data, error } = await query.range(from, to)
+  if (error) throw error
+
+  return data
+}
+
+const getAuthorById = async (id: number): Promise<Author> => {
+  const { data, error } = await supabase
+    .from("author")
+    .select()
+    .eq("id", id)
+    .single()
+  if (error) throw error
+
+  return data
+}
+
+const getReciters = async (
+  filters = {},
+  offset = 0,
+  page_size = 15
+): Promise<Reciter[]> => {
+  const from = offset * page_size
+  const to = from + page_size - 1
+  let query = supabase.from("reciter").select().order("name")
+  // apply filters
+  Object.entries(filters).forEach(([k, v]) => {
+    if (v) query = query.filter(k, "eq", v)
+  })
+  const { data, error } = await query.range(from, to)
+  if (error) throw error
+
+  return data
+}
+
+const getReciterById = async (id: number): Promise<Reciter> => {
+  const { data, error } = await supabase
+    .from("author")
+    .select()
+    .eq("id", id)
+    .single()
+  if (error) throw error
+
+  return data
+}
+
+const createReciter = async (
+  values: TablesInsert<"reciter">
+): Promise<Reciter> => {
+  const { data, error } = await supabase.from("reciter").insert(values).select()
+
+  if (error) throw error
+
+  return data as any
+}
+
+const updateReciter = async (id: number, values: TablesUpdate<"reciter">) => {
+  const { data, error } = await supabase
+    .from("reciter")
+    .update(values)
+    .eq("id", id)
+    .select()
+
+  if (error) throw error
+
+  return data as any
+}
+
+const getAudios = async (
+  filters = {},
+  offset = 0,
+  page_size = 15
+): Promise<Audio[]> => {
+  const from = offset * page_size
+  const to = from + page_size - 1
+  let query = supabase
+    .from("audio")
+    .select("*, reciter(*), xassida(id, name, reciter(id, name))")
+    .order("id")
+  // apply filters
+  Object.entries(filters).forEach(([k, v]) => {
+    if (v) query = query.filter(k, "eq", v)
+  })
+  const { data, error } = await query.range(from, to)
+  if (error) throw error
+
+  return data as any
+}
+
+const getAudioById = async (id: number): Promise<Audio> => {
+  const { data, error } = await supabase
+    .from("audio")
+    .select("*, reciter(*), xassida(id, name, reciter(id, name))")
+    .eq("id", id)
+    .single()
+  if (error) throw error
+
+  return data as any
+}
+
+const createAudio = async (values: TablesInsert<"audio">): Promise<Audio> => {
+  const { data, error } = await supabase.from("audio").insert(values).select()
+
+  if (error) throw error
+
+  return data as any
+}
+
+const updateAudio = async (id: number, values: TablesUpdate<"audio">) => {
+  const { data, error } = await supabase
+    .from("audio")
+    .update(values)
+    .eq("id", id)
+    .select()
+
+  if (error) throw error
+
+  return data as any
+}
+
+const uploadFile = async (file: File, path: string, name: string) => {
+  const { error } = await supabase.storage.from(path).upload(name, file, {
+    upsert: true,
+  })
+  if (error) return { success: false, error }
+  else return { success: true, image: name }
+}
+
+export {
+  searchXassida,
+  searchReciter,
+  getXassidas,
+  getXassidaById,
+  getVersesByChapterId,
+  getAuthors,
+  getAuthorById,
+  getReciters,
+  getReciterById,
+  createReciter,
+  updateReciter,
+  getAudios,
+  getAudioById,
+  createAudio,
+  updateAudio,
+  signInWithEmail,
+  signOut,
+  uploadFile,
+}

actions/api/client.ts

@@ -16,7 +16,7 @@ import {
 
 //const supabase = createClientComponentClient<Database>({})
 const supabase = createServerActionClient<Database>({
-  cookies,
+  cookies: () => cookies(),
 })
 
 const signInWithEmail = async (values: { email: string; password: string }) => {

app/(admin)/dashboard/audios/_components/AudioForm.tsx

@@ -1,4 +1,5 @@
 import React, { SetStateAction } from "react"
+import { useRouter } from "next/navigation"
 import { createAudio, updateAudio, uploadFile } from "@/actions/api/client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Loader } from "lucide-react"
@@ -37,6 +38,7 @@ interface Props {
 }
 
 export default function AudioForm({ setOpen, init }: Props) {
+  const router = useRouter()
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: init,
@@ -52,6 +54,7 @@ export default function AudioForm({ setOpen, init }: Props) {
       if (values.file instanceof File) await uploadFile(file, "audios", name)
 
       setOpen(false)
+      router.refresh()
     } catch {
       return toast({
         title: "Quelque chose s'est mal passé",

app/author/[id]/page.tsx

@@ -1,4 +1,5 @@
-import { fetcher, getAuthorInfo } from "@/lib/api"
+import { getAuthorById } from "@/actions/api/client"
+
 import InfiniteList from "@/components/InfiniteList"
 import XassidaList from "@/components/XassidaList"
 
@@ -9,17 +10,17 @@ interface Props {
 }
 
 export default async function AuthorPage({ params }: Props) {
-  const author = params.id
-  const bio = await fetcher(getAuthorInfo(author))
+  const { id } = params
+  const data = await getAuthorById(id)
   return (
     <div>
       <div>
-        <Biography data={bio} />
+        <Biography data={data} />
       </div>
       <div className="container">
         <h3 className="my-2 text-lg font-bold uppercase">Bibliographie</h3>
         <InfiniteList
-          params={{ author }}
+          params={{ "author.id": id }}
           Component={XassidaList}
           type="xassida"
         />

app/author/components/Biography.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { useState } from "react"
-import { Author } from "@/types"
 import ReactMarkdown from "react-markdown"
 
-import { unslugify } from "@/lib/utils"
+import { Author } from "@/types/supabase"
+import { imageUrl } from "@/lib/constants"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 
@@ -18,12 +18,12 @@ const Biography = ({ data }: Props) => {
     <div className="min-h-[330px] overflow-y-scroll bg-vert py-2 scrollbar-hide md:py-4">
       <div className="container">
         <Avatar className="float-right m-2 size-32 rounded-lg shadow md:size-40 lg:m-4">
-          <AvatarImage src={data?.picture} />
+          <AvatarImage src={`${imageUrl}${data.picture}`} />
           <AvatarFallback>CN</AvatarFallback>
         </Avatar>
         <div>
           <div className="prose max-w-none text-justify text-sm text-white prose-h1:text-white prose-a:text-gray-200 prose-a:no-underline">
-            <ReactMarkdown linkTarget="_blank">{data?.info.text}</ReactMarkdown>
+            <ReactMarkdown linkTarget="_blank">{""}</ReactMarkdown>
           </div>
           <Button
             onClick={() => setPlus(!plus)}

components/AudioList/index.tsx

@@ -6,7 +6,7 @@ interface AuthorListProps {
   data: Audio[]
 }
 
-const AudioList = ({ data }: AuthorListProps) => (
+const AudioList: React.FC<AuthorListProps> = ({ data }) => (
   <div className="grid grid-cols-1 gap-2 overflow-x-scroll px-1 py-2 scrollbar-hide sm:grid-cols-2 lg:grid-cols-3">
     {data && data.map((audio) => <AudioCard data={audio} key={audio.id} />)}
   </div>

components/ReciterList/AudioListSheet.tsx

@@ -31,9 +31,9 @@ const AudioListSheet: React.FC<Props> = ({ reciter }) => {
             <DrawerTitle className="capitalize">{reciter.name}</DrawerTitle>
             <DrawerDescription>Playlist</DrawerDescription>
           </DrawerHeader>
-          <ScrollArea className="h-full px-4 scrollbar-hide">
+          <ScrollArea className="h-full scrollbar-hide">
             <InfiniteList
-              params={{ "reciter.id": reciter.id }}
+              params={{ reciter_id: reciter.id }}
               Component={AudioList}
               type="audio"
             />