diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx new file mode 100644 index 00000000..d3a5d5c3 --- /dev/null +++ b/src/components/Directory/ManageBucket.jsx @@ -0,0 +1,226 @@ +import React, { useEffect, useState } from "react"; +import IconButton from "../common/IconButton"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { bucketScheam } from "./DirectorySchema"; +import showToast from "../../services/toastService"; +import Directory from "../../pages/Directory/Directory"; +import { DirectoryRepository } from "../../repositories/DirectoryRepository"; +import { cacheData, getCachedData } from "../../slices/apiDataManager"; +import { useBuckets } from "../../hooks/useDirectory"; + +const ManageBucket = () => +{ + const [bucketList, setBucketList] = useState([]); + + const { buckets } = useBuckets(); + const [action_bucket, setAction_bucket] = useState(false); + const [isSubmitting, setSubmitting] = useState(false); + const [selected_bucket, select_bucket] = useState(null); + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(bucketScheam), + defaultValues: { + name: "", + description: "", + }, + } ); + + const onSubmit = async (data) => { + setSubmitting(true); + try { + let response; + + if ( selected_bucket ) + { + let payload ={...data, id:selected_bucket.id} + response = await DirectoryRepository.UpdateBuckets(selected_bucket.id, payload); + const cache_buckets = getCachedData("buckets") || []; + const updatedBuckets = cache_buckets.map((bucket) => + bucket.id === selected_bucket.id ? response?.data : bucket + ); + cacheData( "buckets", updatedBuckets ); + setBucketList(updatedBuckets); + showToast("Bucket Updated Successfully", "success"); + } else { + response = await DirectoryRepository.CreateBuckets(data); + const cache_buckets = getCachedData("buckets") || []; + const updatedBuckets = [...cache_buckets, response?.data]; + cacheData( "buckets", updatedBuckets ); + setBucketList(updatedBuckets); + showToast("Bucket Created Successfully", "success"); + } + + handleBack(); + } catch (error) { + const message = + error?.response?.data?.message || + error?.message || + "Error occurred during API call"; + showToast(message, "error"); + } +}; + + + useEffect(() => { + reset({ + name: selected_bucket?.name || "", + description: selected_bucket?.description || "", + }); + }, [ selected_bucket ] ); + + useEffect( () => + { + setBucketList( buckets ) + }, [ buckets ] ) + + const handleBack = () => { + select_bucket(null); + setAction_bucket(false); + setSubmitting(false); + }; + + + return ( +
+
+

Manage Buckets

+
+
+ + +
+
+ {!action_bucket ? ( +
+ + + + + + + + + + + {bucketList.map((bucket) => ( + + + + + + ))} + +
+
+ + Name +
+
+
+ + Description +
+
+
+ + Action +
+
+ {bucket.name} + + {bucket.description} + +
+ { + select_bucket(bucket); + setAction_bucket(true); + }} + > + + + +
+
+
+ ) : ( +
+
+ + + {errors.name && ( + {errors.name.message} + )} +
+
+ +