Feedback API structure

apps/next/src/components/Layout/MainLayout/Header/Feedback/Feedback.constants.tsx

@@ -21,27 +21,27 @@ const useFeedbacks = (): IFeedbackType[] => {
     {
       title: t("general.too_bad"),
       imageSrc: "/images/faces/very_bad.svg",
-      level: 0,
+      level: 1,
     },
     {
       title: t("general.bad"),
       imageSrc: "/images/faces/very_bad.svg",
-      level: 1,
+      level: 2,
     },
     {
       title: t("general.not_bad"),
       imageSrc: "/images/faces/not_bad.svg",
-      level: 2,
+      level: 3,
     },
     {
       title: t("general.good"),
       imageSrc: "/images/faces/good.svg",
-      level: 3,
+      level: 4,
     },
     {
       title: t("general.very_good"),
       imageSrc: "/images/faces/very_good.svg",
-      level: 4,
+      level: 5,
     },
   ];
 };

apps/next/src/components/Layout/MainLayout/Header/Feedback/index.tsx

@@ -1,6 +1,7 @@
 import useFeedbacksConstants, {
   type IFeedbackType,
 } from "./Feedback.constants";
+import { usePostFeedBackMutation } from "@/store/feedback/api";
 import {
   Button,
   Popover,
@@ -21,6 +22,15 @@ const Feedback = () => {
   const { t } = useTranslation();
   const [active, setActive] = useState();
   const feedbacks = useFeedbacksConstants();
+  const [inputValue, setInputValue] = useState<string>("");
+  const [FeedBack, { status, isLoading, data }] = usePostFeedBackMutation();
+
+  const handleSubmitFeedback = () => {
+    void FeedBack({
+      description: inputValue,
+      rate: active,
+    });
+  };
 
   return (
     <Popover>
@@ -35,6 +45,7 @@ const Feedback = () => {
                 id="width"
                 placeholder={t("feedback.placeholder")}
                 className="col-span-2 h-8"
+                onChange={(e) => setInputValue(e.target.value)}
               />
             </div>
           </div>
@@ -48,7 +59,9 @@ const Feedback = () => {
               />
             ))}
           </div>
-          <Button>{t("feedback.submit")}</Button>
+          <Button onClick={() => handleSubmitFeedback()}>
+            {t("feedback.submit")}
+          </Button>
         </div>
       </PopoverContent>
     </Popover>

apps/next/src/components/Modals/CopyWords/index.tsx

@@ -1,16 +1,31 @@
-import { WordPage } from "../../Translate/word.constant";
-import CButton from "@/components/UI/Button";
-import { useCreateWordMutation, useGetDictionaryWordsMutation } from "@/store/dictionarayWord/api";
+import CreateDictionary from "../CreateDictionaries";
+import {
+  useCreateWordMutation,
+  useGetDictionaryWordsMutation,
+} from "@/store/dictionarayWord/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Form, FormControl, FormField, FormItem, FormMessage, Input, Label, useToast, SelectTrigger, Select, SelectValue, SelectContent, SelectItem } from "@wordigo/ui";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Label,
+  useToast,
+  SelectTrigger,
+  Select,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@wordigo/ui";
 import { cn } from "@wordigo/ui/lib/utils";
 import { Table2Icon, X } from "lucide-react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import CreateDictionary from "../CreateDictionaries";
 
 const CreateWordSchema = z.object({
   text: z.string().nonempty(),
@@ -22,7 +37,15 @@ const CreateWordSchema = z.object({
 
 type CreateWordValues = z.infer<typeof CreateWordSchema>;
 
-export function CopyWord({ label, className, isHaveData }: { label: string | null, className?: React.ReactNode, isHaveData: any }) {
+export function CopyWord({
+  label,
+  className,
+  isHaveData,
+}: {
+  label: string | null;
+  className?: React.ReactNode;
+  isHaveData: any;
+}) {
   const [open, setOpen] = useState(false);
   const { toast } = useToast();
   const { t } = useTranslation();
@@ -44,7 +67,8 @@ export function CopyWord({ label, className, isHaveData }: { label: string | nul
     defaultValues,
   });
 
-  const [addUserDicWords, { status, isLoading, data }] = useCreateWordMutation();
+  const [addUserDicWords, { status, isLoading, data }] =
+    useCreateWordMutation();
 
   const handleAddWord = (values: CreateWordValues) => {
     void addUserDicWords({
@@ -83,7 +107,14 @@ export function CopyWord({ label, className, isHaveData }: { label: string | nul
   return (
     <Dialog open={open}>
       <DialogTrigger asChild>
-        <Button onClick={toggleShow} variant="outline" className={cn("dark:bg-white dark:text-black bg-black text-white font-semibold text-sm", className)}>
+        <Button
+          onClick={toggleShow}
+          variant="outline"
+          className={cn(
+            "dark:bg-white dark:text-black bg-black text-white font-semibold text-sm",
+            className
+          )}
+        >
           {t(label)}
         </Button>
       </DialogTrigger>
@@ -102,7 +133,9 @@ export function CopyWord({ label, className, isHaveData }: { label: string | nul
           </button>
         </DialogHeader>
         <Select>
-          <Label htmlFor="selectDictionaries" className="-mb-2">Dictionaries</Label>
+          <Label htmlFor="selectDictionaries" className="-mb-2">
+            Dictionaries
+          </Label>
           <SelectTrigger className="w-full h-[40px] px-4">
             <SelectValue placeholder="Dictionaries" />
           </SelectTrigger>
@@ -113,8 +146,10 @@ export function CopyWord({ label, className, isHaveData }: { label: string | nul
           </SelectContent>
         </Select>
         <div className="flex items-center justify-between">
-          <CreateDictionary label={"dictionaries.add_dictionaries"}></CreateDictionary>
-          <Button>{t('save')}</Button>
+          <CreateDictionary
+            label={"dictionaries.add_dictionaries"}
+          ></CreateDictionary>
+          <Button>{t("save")}</Button>
         </div>
       </DialogContent>
     </Dialog>

apps/next/src/store/feedback/api.ts

@@ -0,0 +1,20 @@
+import { axiosBaseQuery } from "../baseQuery";
+import { createApi } from "@reduxjs/toolkit/query/react";
+
+export const feedbackApi = createApi({
+  reducerPath: "feedbackApi",
+  baseQuery: axiosBaseQuery({
+    baseUrl: process.env.NEXT_PUBLIC_WORDIGO_BACKEND_URL,
+  }),
+  endpoints: (builder) => ({
+    postFeedBack: builder.mutation<any, any>({
+      query: (data) => ({
+        url: "/general/feedback",
+        data,
+        method: "post",
+      }),
+    }),
+  }),
+});
+
+export const { usePostFeedBackMutation } = feedbackApi;

apps/next/src/store/feedback/slice.ts

@@ -0,0 +1,32 @@
+import { feedbackApi } from "./api";
+import { type FeedBack } from "./type";
+import { createSlice } from "@reduxjs/toolkit";
+
+interface IWordState {
+  feedback: any;
+}
+
+const initialState: IWordState = {
+  feedback: null,
+} as IWordState;
+
+const feedbackSlice = createSlice({
+  name: "FeedBack",
+  initialState,
+  reducers: {
+    setFeedback(state, action) {
+      state.feedback = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addMatcher(
+      feedbackApi.endpoints.postFeedBack.matchFulfilled,
+      (state, action: any) => {
+        state.feedback = action.payload.data;
+      }
+    );
+  },
+});
+
+export default feedbackSlice.reducer;
+export const { setFeedback } = feedbackSlice.actions;

apps/next/src/store/feedback/type.ts

@@ -0,0 +1,4 @@
+export interface FeedBack {
+  description: string;
+  rate: 5;
+}