Parse connection, Parse data fetching & manipulation

duplxey · Jan 20, 2024 · 5a5f4c2 · 5a5f4c2
1 parent 70d0145
commit 5a5f4c2
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,15 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.0",
+    "parse": "^4.3.1",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.0"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
-}
+}
diff --git a/src/app/add/page.js b/src/app/add/page.js
@@ -1,18 +1,35 @@
 "use client";
 
-import {useState} from "react";
+import {useContext, useState} from "react";
 import {useRouter} from "next/navigation";
+import ParseContext from "@/app/context/parseContext";
 
 export default function Page() {
 
   const router = useRouter();
+  const parse = useContext(ParseContext);
 
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [price, setPrice] = useState(0);
 
   const onAddClick = () => {
-    console.log("adding item...");
+    const Item = parse.Object.extend("Item");
+    const item = new Item();
+
+    item.set("name", name);
+    item.set("description", description);
+    item.set("price", parseFloat(price));
+
+    item.save().then(
+      (item) => {
+        console.log('Item created successfully with objectId: ', item.id);
+        router.push("/");
+      },
+      (error) => {
+        console.error('Error while creating Item: ', error);
+      }
+    );
   }
 
   const onCancelClick = () => {

diff --git a/src/app/context/parseContext.js b/src/app/context/parseContext.js
@@ -0,0 +1,5 @@
+import {createContext} from "react";
+
+const ParseContext = createContext();
+
+export default ParseContext;
diff --git a/src/app/delete/[objectId]/page.js b/src/app/delete/[objectId]/page.js
@@ -1,16 +1,29 @@
 "use client";
 
 import {useParams, useRouter} from "next/navigation";
+import ParseContext from "@/app/context/parseContext";
+import {useContext} from "react";
 
 export default function Page() {
 
   const router = useRouter();
+  const parse = useContext(ParseContext);
 
   const params = useParams();
   const objectId = params.objectId;
 
   const onDeleteClick = () => {
-    console.log("bloop");
+    const Item = parse.Object.extend("Item");
+    const query = new parse.Query(Item);
+
+    query.get(objectId).then((item) => {
+      return item.destroy();
+    }).then((response) => {
+      console.log('Item deleted successfully');
+      router.push("/");
+    }).catch((error) => {
+      console.error('Error while deleting Item: ', error);
+    });
   }
 
   const onCancelClick = () => {

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,24 +1,31 @@
+"use client";
+
 import {Inter} from "next/font/google";
 import "./globals.css";
 import Header from "@/app/components/Header";
 import Container from "@/app/components/Container";
+import Parse from "parse/dist/parse";
+import ParseContext from "@/app/context/parseContext";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata = {
-  title: "back4app-postgres",
-  description: "Example on how to use PostgreSQL with Back4app.",
-};
+Parse.initialize(
+  process.env.NEXT_PUBLIC_PARSE_APPLICATION_ID,
+  process.env.NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY,
+);
+Parse.serverURL = "https://parseapi.back4app.com/";
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <Header/>
-        <Container>
-          {children}
-        </Container>
-      </body>
-    </html>
+    <ParseContext.Provider value={Parse}>
+      <html lang="en">
+        <body className={inter.className}>
+          <Header/>
+          <Container>
+            {children}
+          </Container>
+        </body>
+      </html>
+    </ParseContext.Provider>
   );
 }
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,35 +1,51 @@
 "use client";
 
-import {useState} from "react";
+import {useContext, useEffect, useState} from "react";
 import {useRouter} from "next/navigation";
+import ParseContext from "@/app/context/parseContext";
 
 export default function Page() {
 
   const router = useRouter();
+  const parse = useContext(ParseContext);
 
-  const [items, setItems] = useState([
-    {
-      objectId: "1",
-      name: "Microsoft Surface Pro",
-      description: "White",
-      price: 12,
-      createdAt: "2021-01-01",
-    },
-    {
-      objectId: "2",
-      name: "Microsoft Surface Pro 2",
-      description: "Black",
-      price: 12,
-      createdAt: "2021-01-01",
-    }
-  ]);
+  const [items, setItems] = useState([]);
   const [statistics, setStatistics] = useState({
-    totalItems: 12,
-    totalSpent: 12,
-    totalBudget: 50,
-    spentPercentage: 45,
+    totalItems: 0,
+    totalSpent: 0,
+    totalBudget: 0,
+    spentPercentage: 0,
   });
 
+  const fetchItems = () => {
+    const query = new parse.Query("Item");
+    query.find().then((fetchedItems) => {
+      const items = fetchedItems.map(item => ({
+        objectId: item.id,
+        name: item.get('name'),
+        description: item.get('description'),
+        price: item.get('price'),
+        createdAt: item.get('createdAt'),
+      }));
+      setItems(items);
+    }).catch((error) => {
+      console.error('Error while fetching items:', error);
+    });
+  }
+
+  const fetchStatistics = () => {
+    parse.Cloud.run('getStatistics').then((statistics) => {
+      setStatistics(statistics);
+    }).catch((error) => {
+      console.error('Error while fetching statistics:', error);
+    });
+  }
+
+  useEffect(() => {
+    fetchItems();
+    fetchStatistics();
+  }, []);
+
   return (
     <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
       <div className="w-full basis-3/4">
@@ -75,7 +91,7 @@ export default function Page() {
                       ${item.price}
                     </td>
                     <td className="px-6 py-4">
-                      {item.createdAt}
+                      {item.createdAt.toString()}
                     </td>
                     <td className="px-6 py-4 space-x-2">
                       <button