From d7eb4da4f9f415ddf8a28ec11421f821b453db65 Mon Sep 17 00:00:00 2001 From: Ali Reza Samadi Date: Sun, 12 Nov 2023 09:10:14 +0800 Subject: [PATCH] feat(save-button): it is workign as expected --- .../building-website/contact/DraftButton.tsx | 3 +- .../building-website/contact/ImageItem.tsx | 33 +++++++++++ .../service/building-website/contact/page.tsx | 57 +++++++++++++------ src/context/Contact.context.ts | 4 ++ 4 files changed, 79 insertions(+), 18 deletions(-) diff --git a/src/app/service/building-website/contact/DraftButton.tsx b/src/app/service/building-website/contact/DraftButton.tsx index 54b43ea..2ee5c53 100644 --- a/src/app/service/building-website/contact/DraftButton.tsx +++ b/src/app/service/building-website/contact/DraftButton.tsx @@ -10,7 +10,7 @@ export default function DraftButton() { const [status, setStatus] = useState({ isLoading: false, isSuccess: false }); const { currentUser } = UseUserContext(); - const { name, email, page } = useContactStore(); + const { name, email, page, imagesLink } = useContactStore(); const onDraftHandler = async () => { setStatus({ isLoading: true, isSuccess: false }); @@ -21,6 +21,7 @@ export default function DraftButton() { name, page, status: "DRAFT", + images: imagesLink, }, { onConflict: "email" } ); diff --git a/src/app/service/building-website/contact/ImageItem.tsx b/src/app/service/building-website/contact/ImageItem.tsx index f1e65bc..4e03b42 100644 --- a/src/app/service/building-website/contact/ImageItem.tsx +++ b/src/app/service/building-website/contact/ImageItem.tsx @@ -6,6 +6,7 @@ import { UseUserContext } from "@/context/User.context"; import { supabase } from "@/utils/supabase"; import { RotatingLines } from "react-loader-spinner"; import { Button } from "@/components/ui/button"; +import { useContactStore } from "@/context/Contact.context"; interface Props { file: File; @@ -15,6 +16,7 @@ function ImageItem({ file }: Props) { const { currentUser } = UseUserContext(); const [isLoading, setIsLoading] = useState(true); const [isDeleting, setIsDeleting] = useState(false); + const { imagesLink, setImagesLink } = useContactStore(); useEffect(() => { const uploadingFiles = async () => { @@ -30,12 +32,43 @@ function ImageItem({ file }: Props) { ); setIsLoading(false); + console.log("done"); + + const { data } = await supabase.storage + .from("contact-form") + .list( + `${ + currentUser?.user.user_metadata.full_name + + "-" + + currentUser?.user.user_metadata.provider_id + }`, + { + limit: 100, + offset: 0, + } + ); + + if (data) { + setImagesLink( + data.map((d) => { + return `${ + process.env.NEXT_PUBLIC_SUPABASE_URL + }/storage/v1/object/public/contact-form/${ + currentUser?.user.user_metadata.full_name + + "-" + + currentUser?.user.user_metadata.provider_id + }/${d.name}`; + }) + ); + } }; uploadingFiles(); }, [file]); + console.log(imagesLink); + const deletingFiles = async () => { setIsDeleting(true); diff --git a/src/app/service/building-website/contact/page.tsx b/src/app/service/building-website/contact/page.tsx index 185dae5..37f5e32 100644 --- a/src/app/service/building-website/contact/page.tsx +++ b/src/app/service/building-website/contact/page.tsx @@ -23,6 +23,8 @@ import { RotatingLines } from "react-loader-spinner"; import { BiSolidLock } from "react-icons/bi"; import ImageItem from "./ImageItem"; import DraftButton from "./DraftButton"; +import { useQuery } from "@tanstack/react-query"; +import { Skeleton } from "@/components/ui/skeleton"; type inputSelected = "name" | "email" | "page" | "url"; @@ -33,10 +35,36 @@ export default function Contact() { useContactStore(); const { currentUser } = UseUserContext(); + const { data, isLoading } = useQuery({ + queryKey: ["myData"], + queryFn: async () => { + const { data, error } = await supabase + .from("contact-form") + .select("page, email, name") + .eq("userId", currentUser?.user.user_metadata.provider_id); + + if (data) { + return data; + } else if (error) { + return null; + } + }, + enabled: !!currentUser, + }); + useEffect(() => { - currentUser && setEmail(currentUser.user.email); - currentUser && setName(currentUser.user.user_metadata.full_name); - }, [currentUser]); + if (data) { + if (data.length > 0) { + setEmail(data[0].email); + setName(data[0].name); + setPage(data[0].page); + } else { + console.log("not data found"); + currentUser && setEmail(currentUser.user.email); + currentUser && setName(currentUser.user.user_metadata.full_name); + } + } + }, [data]); const signInWithGoogle = async () => { await supabase.auth.signInWithOAuth({ @@ -56,7 +84,7 @@ export default function Contact() { email, name, page, - status: "SENT", + status: "DRAFT", }, { onConflict: "email" } ); @@ -88,19 +116,6 @@ export default function Contact() { } }; - useEffect(() => { - const fetchingData = async () => { - const { data } = await supabase - .from("contact-form") - .select("status") - .eq("userId", currentUser?.user.user_metadata.provider_id); - - console.log(data); - }; - - fetchingData(); - }, []); - return currentUser ? (
{ setName(e.target.value); }} + isLoading={isLoading} /> { setPage(Number(e.target.value)); }} + isLoading={isLoading} /> ); diff --git a/src/context/Contact.context.ts b/src/context/Contact.context.ts index 1c36737..7103fa0 100644 --- a/src/context/Contact.context.ts +++ b/src/context/Contact.context.ts @@ -13,6 +13,8 @@ interface ContactType { setPage: (a: number) => void; images: FileList | null; setImages: (a: FileList | null) => void; + imagesLink: string[]; + setImagesLink: (a: string[]) => void; isDelete: boolean; setIsDelete: (a: boolean) => void; } @@ -38,6 +40,8 @@ const useContactStore = create()((set) => ({ setImages: (images: FileList | null) => { set({ images }); }, + imagesLink: [], + setImagesLink: (imagesLink) => { set({ imagesLink }); }, isDelete: false, setIsDelete: (isDelete: boolean) => { set({ isDelete });