From 7a66e12b51e967a0f34bc77178e3be899f982bbf Mon Sep 17 00:00:00 2001
From: ashnchiquita <16521248@mahasiswa.itb.ac.id>
Date: Fri, 17 Nov 2023 09:29:35 +0700
Subject: [PATCH] feat: add to collection
---
src/api/add-to-collection.ts | 8 ++++
src/api/index.ts | 2 +
src/components/ui/form.tsx | 4 +-
src/pages/recipe/[id]/AddToCollection.tsx | 57 +++++++++++++----------
src/pages/recipe/[id]/page.tsx | 1 +
5 files changed, 45 insertions(+), 27 deletions(-)
create mode 100644 src/api/add-to-collection.ts
diff --git a/src/api/add-to-collection.ts b/src/api/add-to-collection.ts
new file mode 100644
index 0000000..721ab4f
--- /dev/null
+++ b/src/api/add-to-collection.ts
@@ -0,0 +1,8 @@
+import { APIInstance } from '.';
+
+const addToCollectionAPI = async (collecId: string, recipeId: string) => {
+ const res = await APIInstance.post('/collection/' + collecId, { recipe_id: recipeId });
+ return res.data;
+};
+
+export default addToCollectionAPI;
diff --git a/src/api/index.ts b/src/api/index.ts
index 40c905e..919a18d 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -10,6 +10,7 @@ import getCollectionRecipesAPI from './getCollectionRecipes';
import addRecipeAPI from './add-recipe';
import getRecipeAPI from './get-recipe';
import getRecipeVideoAPI from './get-recipe-video';
+import addToCollectionAPI from './add-to-collection';
const APIInstance = axios.create();
APIInstance.defaults.baseURL = import.meta.env.VITE_REST_URL;
@@ -25,6 +26,7 @@ const API = {
addRecipe: addRecipeAPI,
getRecipe: getRecipeAPI,
getRecipeVideo: getRecipeVideoAPI,
+ addToCollection: addToCollectionAPI,
};
for (const key in API) {
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index df904ff..ecd47d5 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -21,8 +21,8 @@ const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
- ...props
-}: ControllerProps<TFieldValues, TName>) => {
+ ...props
+ }: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
diff --git a/src/pages/recipe/[id]/AddToCollection.tsx b/src/pages/recipe/[id]/AddToCollection.tsx
index ef8b59f..c775f3d 100644
--- a/src/pages/recipe/[id]/AddToCollection.tsx
+++ b/src/pages/recipe/[id]/AddToCollection.tsx
@@ -36,7 +36,9 @@ import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import Collection from '../../collection/page';
+import { useEffect, useState } from 'react';
+import { useAPI } from '@/contexts';
+import { useParams } from 'react-router-dom';
const FormSchema = z.object({
id: z.string({
@@ -50,28 +52,32 @@ interface Collection {
}
export function SelectForm() {
+ const { api } = useAPI();
+ const { id } = useParams();
+
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
});
- function onSubmit(data: z.infer<typeof FormSchema>) {
- console.log(data);
- }
+ const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+ await api.addToCollection(data.id, id!);
+ };
+
+ const [collections, setCollections] = useState<Collection[]>();
+
+ const fetch = async () => {
+ const result = await api.getCollections();
+ if (!result.data) {
+ return;
+ }
+
+ setCollections(result.data);
+ };
- const collections: Collection[] = [
- {
- id: 1,
- title: 'Hello',
- },
- {
- id: 2,
- title: 'Hai',
- },
- {
- id: 3,
- title: 'Ho',
- },
- ];
+ useEffect(() => {
+ fetch();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
return (
<Form {...form}>
@@ -90,13 +96,14 @@ export function SelectForm() {
</SelectTrigger>
</FormControl>
<SelectContent>
- {collections.map((collection, idx) => {
- return (
- <SelectItem value={`${collection.id}`} key={idx}>
- {collection.title}
- </SelectItem>
- );
- })}
+ {collections &&
+ collections.map((collection, idx) => {
+ return (
+ <SelectItem value={`${collection.id}`} key={idx}>
+ {collection.title}
+ </SelectItem>
+ );
+ })}
</SelectContent>
</Select>
<FormMessage />
diff --git a/src/pages/recipe/[id]/page.tsx b/src/pages/recipe/[id]/page.tsx
index e4dfc9a..beb0e18 100644
--- a/src/pages/recipe/[id]/page.tsx
+++ b/src/pages/recipe/[id]/page.tsx
@@ -16,6 +16,7 @@ interface Recipe {
}
const RecipeId = () => {
+ console.log('hai');
const { id } = useParams();
const { api } = useAPI();
const [recipe, setRecipe] = useState<Recipe | null>(null);
--
GitLab