From 40059a4cb4ecaee0871ba417875cafbc86b54f61 Mon Sep 17 00:00:00 2001
From: Aatman Vaidya <aatmanvaidya@gmail.com>
Date: Mon, 11 Sep 2023 15:09:29 +0530
Subject: [PATCH] axios to frontend

---
 browser-extension/api-server/index.js         | 12 +++++-----
 .../plugin/src/ui-components/pages/Api.js     |  5 -----
 .../plugin/src/ui-components/pages/Slur.jsx   | 22 +++++++++++++++++++
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/browser-extension/api-server/index.js b/browser-extension/api-server/index.js
index f9fa6fe1..f6d9c81d 100644
--- a/browser-extension/api-server/index.js
+++ b/browser-extension/api-server/index.js
@@ -7,8 +7,9 @@ const port = 3000;
 const cors = require("cors");
 const { upload } = require("./s3");
 
-const { preference, post, feedback, slur, category } = require("./db/models");
-const { Op } = require("sequelize");
+const { preference, post, feedback, slur, category, sequelize } = require("./db/models");
+
+
 const { registerAnonymousUser, resetUser } = require("./controller-auth");
 const { sendEmail } = require("./email");
 const {
@@ -229,6 +230,7 @@ app.get("/slur", async (req, res) => {
 app.post("/slur/create", async (req, res) => {
   const { userId, label, labelMeaning, appropriated, appropriationContext, categories } = req.body;
   // const t = await Op.transaction();
+  const t = await sequelize.transaction()
 
   try {
     const newSlur = await slur.create(
@@ -239,7 +241,7 @@ app.post("/slur/create", async (req, res) => {
         appropriated,
         appropriationContext,
       },
-      // { transaction: t }
+      { transaction: t }
     );
 
     const categoryPromises = categories.map(async (categoryData) => {
@@ -248,7 +250,7 @@ app.post("/slur/create", async (req, res) => {
           slurId: newSlur.id,
           category: categoryData.category,
         },
-        // { transaction: t }
+        { transaction: t }
       );
       return newCategory;
     });
@@ -257,7 +259,7 @@ app.post("/slur/create", async (req, res) => {
     // https://stackoverflow.com/questions/28897708/sequelize-save-in-multiple-tables
     const createdCategories = await Promise.all(categoryPromises);
 
-    // await t.commit();
+    await t.commit();
 
     res.send({
       slur: newSlur,
diff --git a/browser-extension/plugin/src/ui-components/pages/Api.js b/browser-extension/plugin/src/ui-components/pages/Api.js
index 85db6239..6a4bbbfd 100644
--- a/browser-extension/plugin/src/ui-components/pages/Api.js
+++ b/browser-extension/plugin/src/ui-components/pages/Api.js
@@ -99,11 +99,6 @@ async function resetAccount(accessToken) {
     );
 }
 
-//https://www.freecodecamp.org/news/axios-react-how-to-make-get-post-and-delete-api-requests/
-// const axiosInstance = axios.create({
-//     baseURL: API_URL,
-// });
-
 // GET request for slur and category
 async function getSlurAndCategory(accessToken) {
     const result = await axios.get(`${API_URL}/slur`, {
diff --git a/browser-extension/plugin/src/ui-components/pages/Slur.jsx b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
index 3ab44a7f..af01b387 100644
--- a/browser-extension/plugin/src/ui-components/pages/Slur.jsx
+++ b/browser-extension/plugin/src/ui-components/pages/Slur.jsx
@@ -1,12 +1,34 @@
+import { useState, useEffect, useContext } from 'react';
 import { Box, Text, Button } from 'grommet';
 import { Add } from 'grommet-icons';
 import { useNavigate } from 'react-router-dom';
+import Api from './Api';
+import { UserContext } from '../atoms/AppContext';
+
+const { getSlurAndCategory } = Api;
 
 export function Slur() {
     let navigate = useNavigate();
+    const [, setGetSlurs] = useState([]);
+    const { user } = useContext(UserContext);
+    // const { notification, showNotification } = useContext(NotificationContext);
+
     const navigateToAddSlur = () => {
         navigate('/slur/create');
     };
+    async function fetchSlurs() {
+        try {
+            const slur = await getSlurAndCategory(user.accessToken);
+            setGetSlurs(slur);
+            console.log(slur);
+        } catch (error) {
+            console.error('error fetching slurs', error);
+        }
+    }
+
+    useEffect(() => {
+        fetchSlurs();
+    }, []);
 
     return (
         <Box fill gap={'medium'}>