create and get categories with database for user

frontend/src/logic/category/CreateCategory.js

@@ -0,0 +1,20 @@
+import routes from "../../routes";
+
+const CreateCategory = async (category) => {
+  try {
+    const response = await fetch(routes.categories, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(category),
+    });
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching categories:", error);
+    return [];
+  }
+};
+export default CreateCategory;

frontend/src/modals/AddCategoryModal/AddCategoryModal.jsx

@@ -2,13 +2,34 @@ import { useState } from "react";
 import { useTheme } from "../../contexts/ThemeContext";
 import { Modal, Button, Card, Form } from "react-bootstrap";
 import EmojiPickerButton from "./components/EmojiPickerButton/EmojiPickerButton";
+import CreateCategory from "../../logic/category/CreateCategory";
 
-const AddCategoryModal = ({ variant, ...props }) => {
+const AddCategoryModal = ({
+  variant,
+  type,
+  showParent,
+  closeParent,
+  ...props
+}) => {
   const { theme } = useTheme();
   const [show, setShow] = useState(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   const [title, setTitle] = useState("");
+  const [emojivalue, setEmojivate] = useState("😀");
+  const createCategory = async () => {
+    closeParent();
+    console.log({ title: title, icon: emojivalue, type: type });
+    var result = await CreateCategory({
+      title: title,
+      icon: emojivalue,
+      type: type,
+    });
+    if (result.status === "ok") {
+      setShow(false);
+      showParent();
+    }
+  };
   return (
     <>
       <Button variant={theme} onClick={handleShow} className="m-0" {...props}>
@@ -34,7 +55,10 @@ const AddCategoryModal = ({ variant, ...props }) => {
         </Modal.Header>
         <Modal.Body className="p-3">
           <div className="d-flex align-items-center justify-content-center">
-            <EmojiPickerButton />
+            <EmojiPickerButton
+              inputValue={emojivalue}
+              setInputValue={setEmojivate}
+            />
           </div>
           <Form.Control
             type="text"
@@ -59,7 +83,9 @@ const AddCategoryModal = ({ variant, ...props }) => {
                 Add subcategory
               </Button>
               <spacer />
-              <Button className="w-100">Add</Button>
+              <Button className="w-100" onClick={() => createCategory()}>
+                Add
+              </Button>
             </Card.Body>
           </Card>
         </Modal.Body>

frontend/src/modals/AddCategoryModal/components/EmojiPickerButton/EmojiPickerButton.jsx

@@ -3,10 +3,10 @@ import { Button, Overlay, Popover, InputGroup } from "react-bootstrap";
 import EmojiPicker from "emoji-picker-react";
 import { useTheme } from "../../../../contexts/ThemeContext";
 
-const EmojiPickerButton = () => {
+const EmojiPickerButton = ({ inputValue, setInputValue }) => {
   const { theme } = useTheme();
   const [showPicker, setShowPicker] = useState(false);
-  const [inputValue, setInputValue] = useState("😀");
+  // const [inputValue, setInputValue] = useState("😀");
   const target = useRef(null);
 
   const handleEmojiSelect = (emoji) => {

frontend/src/modals/CategoriesModal/CategoriesModal.jsx

@@ -21,6 +21,7 @@ const CategoriesModal = ({ variant }) => {
   const { theme } = useTheme();
   const [show, setShow] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [categoriestype, setCategoriestype] = useState("expense");
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   useEffect(() => {
@@ -33,7 +34,7 @@ const CategoriesModal = ({ variant }) => {
       );
       console.log(data);
     });
-  }, []);
+  }, [show]);
   const filteredExpenseCategories = useMemo(() => {
     if (!searchTerm) return expenseCategories;
     const term = searchTerm.toLowerCase();
@@ -80,6 +81,9 @@ const CategoriesModal = ({ variant }) => {
                   <AddCategoryModal
                     className="w-100"
                     style={{ paddingLeft: "0" }}
+                    type={categoriestype}
+                    showParent={handleShow}
+                    closeParent={handleClose}
                   />
                 </Dropdown.Item>
                 <Dropdown.Item>Reorder</Dropdown.Item>
@@ -101,18 +105,22 @@ const CategoriesModal = ({ variant }) => {
         </Modal.Header>
         <Modal.Body className="p-0">
           <Tabs
-            defaultActiveKey="Expenses"
+            defaultActiveKey="expense"
             id="categories-tabs"
             className="nav nav-tabs"
+            onSelect={(selectedKey) => {
+              setCategoriestype(selectedKey);
+              console.log(selectedKey, categoriestype);
+            }}
           >
-            <Tab eventKey="Incomes" title="Incomes">
+            <Tab eventKey="income" title="Incomes">
               <div
                 className={styles.scrollableContent}
                 style={{ padding: "10px" }}
               >
                 {filteredIncomeCategories.map((category) => (
                   <CategorySign
-                    key={`${category.id}/expense`}
+                    key={`${category.id}`}
                     icon={category.icon}
                     title={category.title}
                     subcategories={
@@ -122,14 +130,14 @@ const CategoriesModal = ({ variant }) => {
                 ))}
               </div>
             </Tab>
-            <Tab eventKey="Expenses" title="Expenses">
+            <Tab eventKey="expense" title="Expenses">
               <div
                 className={styles.scrollableContent}
                 style={{ padding: "10px" }}
               >
                 {filteredExpenseCategories.map((category) => (
                   <CategorySign
-                    key={`${category.id}/income`}
+                    key={`${category.id}`}
                     icon={category.icon}
                     title={category.title}
                     subcategories={

frontend/src/modals/CategoriesModal/components/CategorySign/CategorySign.jsx

@@ -45,11 +45,18 @@ const CategorySign = ({ icon, title, subcategories }) => {
             >
               <div>&#10142;</div>
             </div>
-            <div className={classNames("d-flex gap-3", styles.hideScrollbar)}>
+            <div
+              className={classNames("d-flex gap-3", styles.hideScrollbar)}
+              style={{ overflowX: "auto" }}
+            >
               {subcategories.map((subcategory) => (
                 <div
                   className="btn btn-secondary"
-                  style={{ borderRadius: "25px", padding: "0 15px" }}
+                  style={{
+                    borderRadius: "25px",
+                    padding: "0 15px",
+                    textWrap: "nowrap",
+                  }}
                   key={subcategory.id}
                 >
                   {subcategory.title}