Merge pull request #37 from shotnothing/kiahmin_mflg

Kiahmin mflg

webapp/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@ionic/react": "^7.8.3",
     "@mui/material": "^5.15.14",
     "@sgratzl/chartjs-chart-boxplot": "^4.3.0",
     "@types/faker": "^6.6.9",
@@ -19,15 +20,16 @@
     "d3": "^7.9.0",
     "faker": "^5.5.3",
     "next": "^14.1.3",
+    "next-auth": "^4.24.7",
     "plotly.js": "^2.30.1",
     "react": "^18",
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
-    "react-plotly.js": "^2.6.0",
-    "next-auth": "^4.24.7",
     "react-helmet": "^6.1.0",
-    "react-icons": "^5.0.1"
+    "react-icons": "^5.0.1",
+    "react-plotly.js": "^2.6.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
     "@types/node": "^20",

webapp/src/api/index.tsx

@@ -0,0 +1,83 @@
+import { Product, Analytics } from "./types";
+import MOCK_DATA from "./mock-data.json";
+
+const MOCK = true;
+
+const PRODUCTS_URL = "http://localhost:3000/product/all";
+const PRODUCT_URL = "http://localhost:3000/product/";
+const ANALYTICS_URL = "http://localhost:3000/analytics/"
+
+// Fetch all products
+export const fetchProducts = async (): Promise<Product[]> => {
+  if (MOCK) return MOCK_DATA.products;
+  const endpoint = PRODUCTS_URL;
+
+  try {
+    const response = await fetch(endpoint);
+
+    // Check if the response is successful
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    // Parse the JSON response
+    const data = await response.json();
+
+    // Return the data, assuming the correct data format
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    throw error; // Rethrow the error for handling by the caller
+  }
+};
+
+// Fetch a single product
+export const fetchProduct = async (
+  productId: string
+): Promise<Product | undefined> => {
+  if (MOCK) return MOCK_DATA.products.find((p) => p.product_id === productId);
+  const endpoint = `${PRODUCT_URL}${productId}`;
+
+  try {
+    const response = await fetch(endpoint);
+
+    // Check if the response is successful
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    // Parse the JSON response
+    const data = await response.json();
+
+    // Return the data, assuming the correct data format
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    throw error; // Rethrow the error for handling by the caller
+  }
+};
+
+// Fetch analytics
+export const fetchAnalytics = async (productId: string): Promise<Analytics> => {
+  if (MOCK) return MOCK_DATA.analytics;
+  const endpoint = ANALYTICS_URL;
+
+  try {
+    const response = await fetch(endpoint);
+
+    // Check if the response is successful
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
+
+    // Parse the JSON response
+    const data = await response.json();
+
+    // Return the data, assuming the correct data format
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    throw error; // Rethrow the error for handling by the caller
+  }
+};
+

webapp/src/api/mock-data.json

@@ -0,0 +1,95 @@
+{
+	"products": [
+		{
+			"product_id": "1",
+			"company": "Mount Faber Leisure Group",
+			"product_name": "Central Beach Bazaar",
+			"scrape_timestamp": "2024-04-02T00:00:00Z",
+			"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.",
+			"price": "$10",
+			"source_url": "./productA/CCB_Page.html",
+			"remarks": "",
+			"image_url": "https://firstclasse.com.my/wp-content/uploads/2022/07/Central-Beach-Bazaar-Day.jpg",
+			"tags": [
+				"Central Beach Bazaar"
+			]
+		},
+		{
+			"product_id": "2",
+			"company": "Mount Faber Leisure Group",
+			"product_name": "Singapore Cable Car",
+			"scrape_timestamp": "2024-04-02T00:00:00Z",
+			"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.",
+			"price": "$10",
+			"source_url": "CableCar_Page.html",
+			"remarks": "",
+			"image_url": "https://www.mountfaberleisure.com/wp-content/uploads/2023/04/Pokemon-Exterior-Harbour-2-scaled.jpg",
+			"tags": [
+				"Singapore Cable Car"
+			]
+		},
+		{
+			"product_id": "3",
+			"company": "Mount Faber Leisure Group",
+			"product_name": "SkyHelix",
+			"scrape_timestamp": "2024-04-02T00:00:00Z",
+			"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.",
+			"price": "",
+			"source_url": "SkyHelix_Page.html",
+			"remarks": "",
+			"image_url": "https://s.yimg.com/ny/api/res/1.2/82vUCc.8Bh5vOY60Ja1lew--/YXBwaWQ9aGlnaGxhbmRlcjt3PTY0MDtoPTM2MA--/https://s.yimg.com/os/creatr-uploaded-images/2021-11/fb7af260-42e7-11ec-aeb7-bbf878ba7ac8",
+			"tags": [
+				"SkyHelix"
+			]
+		},
+		{
+			"product_id": "4",
+			"company": "Mount Faber Leisure Group",
+			"product_name": "Wings Of Time",
+			"scrape_timestamp": "2024-04-02T00:00:00Z",
+			"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.",
+			"price": "",
+			"source_url": "WoT_Page.html",
+			"remarks": "",
+			"image_url": "https://www.mountfaberleisure.com/wp-content/uploads/2023/03/500-x-370_WOT_cleanup.png",
+			"tags": [
+				"Wings Of Time"
+			]
+		},
+		{
+			"product_id": "5",
+			"company": "Mount Faber Leisure Group",
+			"product_name": "Singapore Island Bus Tour",
+			"scrape_timestamp": "2024-04-02T00:00:00Z",
+			"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.",
+			"price": "",
+			"source_url": "BusTour_Page.html",
+			"remarks": "",
+			"image_url": "https://www.creditcard99.com/photo/HSBC/16808141.jpg",
+			"tags": [
+				"Singapore Island Bus Tour"
+			]
+		},
+		{
+			"product_id": "6",
+			"company": "Mount Faber Leisure Group",
+			"product_name": "Mount Faber Peak",
+			"scrape_timestamp": "2024-04-02T00:00:00Z",
+			"description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.",
+			"price": "",
+			"source_url": "Peak_Page.html",
+			"remarks": "",
+			"image_url": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfkbOlKxnvvWwUYTpnBsIL-0WeKuFgPMCYUg&usqp=CAU",
+			"tags": [
+				"Mount Faber Peak"
+			]
+		}
+	],
+
+	"analytics": {
+			"prices": [10.0, 12.0, 13.0],
+			"product_price": 25.0,
+			"ranking": 0.82,
+			"similar": [ 3, 5, 6]
+		}
+}

webapp/src/api/types.ts

@@ -0,0 +1,19 @@
+export type Product = {
+  product_id: string;
+  company: string;
+  product_name: string;
+  scrape_timestamp: string;
+  description: string;
+  price: string;
+  source_url: string;
+  remarks: string;
+  image_url: string;
+  tags: string[];
+};
+
+export type Analytics = {
+  prices: number[];
+  product_price: number;
+  ranking: number;
+  similar: number[]
+}