feat: intigrate the backend with frontend for email and notifications

Author: ptdatta

backend/package.json

@@ -4,13 +4,15 @@
   "main": "index.js",
   "source": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start-local": "nodemon ./dist/index.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.20.2",
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "express-async-handler": "^1.2.0",
     "nodemailer": "^6.9.4",

backend/src/index.ts

@@ -3,12 +3,14 @@ import bodyParser from "body-parser";
 import { connectToDatabase, pool } from "./config/connectDb";
 import dbrouter from "./routes/dbroutes";
 import mailrouter from "./routes/mailroutes";
+const cors = require("cors");
 
 const app = express();
 
 connectToDatabase();
 
 app.use(bodyParser.json());
+app.use(cors());
 
 app.use("/api/users", dbrouter);
 app.use("/api/sendmail", mailrouter);

web/package.json

@@ -5,6 +5,7 @@
   "browserslist": "> 0.5%, not dead",
   "repository": "",
   "author": "",
+  "proxy": "http://localhost:3000",
   "license": "MIT",
   "alias": {
     "src": "./src",

web/src/hooks/useRelationalDB.ts

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+interface UserData {
+  email: string;
+  options: string;
+  walletaddress: string;
+}
+
+interface FetchResponse {
+  loading: boolean;
+  error: Error | null;
+  data: any;
+}
+
+export const useRelationalDB = () => {
+  const [fetchResponse, setFetchResponse] = useState<FetchResponse>({
+    loading: false,
+    error: null,
+    data: null,
+  });
+
+  const createUser = async (userData: UserData) => {
+    setFetchResponse({ loading: true, error: null, data: null });
+    try {
+      const response = await fetch("http://localhost:3000/api/users", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(userData),
+      });
+      const result = await response.json();
+      setFetchResponse({ loading: false, error: null, data: result });
+    } catch (err) {
+      setFetchResponse({ loading: false, error: err as Error, data: null });
+    }
+  };
+
+  const getUser = async (walletaddress: string) => {
+    setFetchResponse({ loading: true, error: null, data: null });
+    try {
+      const response = await fetch(`http://localhost:3000/api/users?walletaddress=${walletaddress}`);
+      const result = await response.json();
+      setFetchResponse({ loading: false, error: null, data: result });
+      return result;
+    } catch (err) {
+      setFetchResponse({ loading: false, error: err as Error, data: null });
+    }
+  };
+
+  const updateUser = async (walletaddress: string, userData: UserData) => {
+    setFetchResponse({ loading: true, error: null, data: null });
+    try {
+      const response = await fetch(`http://localhost:3000/api/users/${walletaddress}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(userData),
+      });
+      const result = await response.json();
+      setFetchResponse({ loading: false, error: null, data: result });
+    } catch (err) {
+      setFetchResponse({ loading: false, error: err as Error, data: null });
+    }
+  };
+
+  return { ...fetchResponse, createUser, getUser, updateUser };
+};

web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx

@@ -1,7 +1,15 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import { Checkbox, Button } from "@kleros/ui-components-library";
 import FormEmail from "./FormEmail";
+import { useAccount } from "wagmi";
+import { useRelationalDB } from "hooks/useRelationalDB";
+
+interface UserData {
+  email: string;
+  options: string;
+  walletaddress: string;
+}
 
 const FormContainer = styled.div`
   position: relative;
@@ -38,19 +46,48 @@ const FormNotifs: React.FC = () => {
   const [checkboxStates, setCheckboxStates] = useState<boolean[]>(new Array(OPTIONS.length).fill(false));
   const [emailInput, setEmailInput] = useState<string>("");
   const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
+  const [userExists, setUserExists] = useState<boolean>(false); // TODO: use this to determine whether to use createUser or updateUser
+  const { address } = useAccount();
+  const { createUser, getUser, updateUser } = useRelationalDB();
 
   const handleCheckboxChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const newCheckboxStates = [...checkboxStates];
     newCheckboxStates[index] = e.target.checked;
     setCheckboxStates(newCheckboxStates);
   };
 
+  useEffect(() => {
+    const fetchUser = async () => {
+      const data = await getUser(address + "");
+      if (data[0]) {
+        setUserExists(true);
+        setEmailInput(data[0].email);
+        setCheckboxStates(
+          OPTIONS.map(({ label }) => {
+            return data[0].options[label];
+          })
+        );
+      }
+    };
+    fetchUser();
+  }, []);
+
   const handleClick = async () => {
     const optionsObject: object = {};
     OPTIONS.forEach(({ label }, index: number) => {
       optionsObject[label] = checkboxStates[index];
     });
     const jsonData = JSON.stringify(optionsObject, null, 2);
+    const userData: UserData = {
+      email: emailInput,
+      options: jsonData,
+      walletaddress: address + "",
+    };
+    if (userExists) {
+      await updateUser(address + "", userData);
+    } else {
+      await createUser(userData);
+    }
   };
 
   return (

yarn.lock

@@ -5147,6 +5147,7 @@ __metadata:
     "@types/nodemailer": ^6.4.9
     "@types/pg": ^8.10.2
     body-parser: ^1.20.2
+    cors: ^2.8.5
     express: ^4.18.2
     express-async-handler: ^1.2.0
     nodemailer: ^6.9.4
@@ -13482,6 +13483,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cors@npm:^2.8.5":
+  version: 2.8.5
+  resolution: "cors@npm:2.8.5"
+  dependencies:
+    object-assign: ^4
+    vary: ^1
+  checksum: ced838404ccd184f61ab4fdc5847035b681c90db7ac17e428f3d81d69e2989d2b680cc254da0e2554f5ed4f8a341820a1ce3d1c16b499f6e2f47a1b9b07b5006
+  languageName: node
+  linkType: hard
+
 "cosmiconfig-typescript-loader@npm:^4.0.0":
   version: 4.3.0
   resolution: "cosmiconfig-typescript-loader@npm:4.3.0"
@@ -23875,7 +23886,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
+"object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.0, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
@@ -31062,7 +31073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vary@npm:~1.1.2":
+"vary@npm:^1, vary@npm:~1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
   checksum: ae0123222c6df65b437669d63dfa8c36cee20a504101b2fcd97b8bf76f91259c17f9f2b4d70a1e3c6bbcee7f51b28392833adb6b2770b23b01abec84e369660b