From b488d751bfa9642c14c5e781395bebc42ab47e21 Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Thu, 21 Mar 2024 17:22:51 -0700
Subject: [PATCH 01/28] Create ImageStorage

add image Storage file
---
 package-lock.json                 | 345 +++++++++++++++++++++++++++++-
 package.json                      |   4 +
 server/index.js                   |  11 +-
 server/package-lock.json          |  14 ++
 server/package.json               |   1 +
 server/src/articles/controller.js |   1 -
 server/src/articles/routes.js     |   3 +
 server/src/images/config.js       |  13 ++
 server/src/images/controller.js   | 103 +++++++++
 server/src/images/multer.js       |  12 ++
 server/src/images/routes.js       |  11 +
 11 files changed, 510 insertions(+), 8 deletions(-)
 create mode 100644 server/src/images/config.js
 create mode 100644 server/src/images/controller.js
 create mode 100644 server/src/images/multer.js
 create mode 100644 server/src/images/routes.js

diff --git a/package-lock.json b/package-lock.json
index a0dd4dd..a593783 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,13 @@
             "license": "ISC",
             "dependencies": {
                 "@vitejs/plugin-react": "^4.2.1",
+                "cloudinary": "^2.0.3",
                 "cors": "^2.8.5",
+                "dotenv": "^16.4.5",
                 "express": "^4.18.2",
                 "jsonwebtoken": "^9.0.2",
+                "modules": "^0.4.0",
+                "multer": "^1.4.5-lts.1",
                 "man": "^2.0.0",
                 "vite": "^5.0.12"
             },
@@ -1159,6 +1163,11 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/append-field": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+            "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
+        },
         "node_modules/array-flatten": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -1273,6 +1282,22 @@
             "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
             "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
         },
+        "node_modules/buffer-from": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+        },
+        "node_modules/busboy": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+            "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+            "dependencies": {
+                "streamsearch": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=10.16.0"
+            }
+        },
         "node_modules/bytes": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -1382,6 +1407,18 @@
                 "node": ">=12"
             }
         },
+        "node_modules/cloudinary": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.0.3.tgz",
+            "integrity": "sha512-2JPxAUuV4iHwiW4ATSOZvii6+BhhKI9+9KscgUkxJPKa6V6wOnZJHlYyovBGrrIbIgEdmGSZgqEsLfD0wWBhBg==",
+            "dependencies": {
+                "lodash": "^4.17.21",
+                "q": "^1.5.1"
+            },
+            "engines": {
+                "node": ">=9"
+            }
+        },
         "node_modules/color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1406,6 +1443,20 @@
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
             "dev": true
         },
+        "node_modules/concat-stream": {
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+            "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+            "engines": [
+                "node >= 0.8"
+            ],
+            "dependencies": {
+                "buffer-from": "^1.0.0",
+                "inherits": "^2.0.3",
+                "readable-stream": "^2.2.2",
+                "typedarray": "^0.0.6"
+            }
+        },
         "node_modules/concurrently": {
             "version": "8.2.2",
             "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
@@ -1470,6 +1521,11 @@
             "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
             "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
         },
+        "node_modules/core-util-is": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+        },
         "node_modules/cors": {
             "version": "2.8.5",
             "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@@ -1549,6 +1605,17 @@
                 "npm": "1.2.8000 || >= 1.4.16"
             }
         },
+        "node_modules/dotenv": {
+            "version": "16.4.5",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+            "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://dotenvx.com"
+            }
+        },
         "node_modules/ecdsa-sig-formatter": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -1997,6 +2064,11 @@
                 "node": ">=0.12.0"
             }
         },
+        "node_modules/isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2067,8 +2139,7 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "node_modules/lodash.includes": {
             "version": "4.3.0",
@@ -2203,11 +2274,55 @@
                 "node": "*"
             }
         },
+        "node_modules/minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "dependencies": {
+                "minimist": "^1.2.6"
+            },
+            "bin": {
+                "mkdirp": "bin/cmd.js"
+            }
+        },
+        "node_modules/modules": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/modules/-/modules-0.4.0.tgz",
+            "integrity": "sha512-LX4JgwPHJr1FurPDKp1BlGgMXqZXtxO1O8ABGmj2g15CbLGlInTHcA9flqw6uN6oYKE2T0ngWdiHvcX97mdBsw==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         },
+        "node_modules/multer": {
+            "version": "1.4.5-lts.1",
+            "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+            "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+            "dependencies": {
+                "append-field": "^1.0.0",
+                "busboy": "^1.0.0",
+                "concat-stream": "^1.5.2",
+                "mkdirp": "^0.5.4",
+                "object-assign": "^4.1.1",
+                "type-is": "^1.6.4",
+                "xtend": "^4.0.0"
+            },
+            "engines": {
+                "node": ">= 6.0.0"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.7",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -2395,6 +2510,11 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/process-nextick-args": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+        },
         "node_modules/proxy-addr": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -2413,6 +2533,15 @@
             "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
             "dev": true
         },
+        "node_modules/q": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+            "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
+            "engines": {
+                "node": ">=0.6.0",
+                "teleport": ">=0.2.0"
+            }
+        },
         "node_modules/qs": {
             "version": "6.11.0",
             "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -2516,6 +2645,25 @@
                 "react-dom": ">=16.8"
             }
         },
+        "node_modules/readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            }
+        },
+        "node_modules/readable-stream/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
         "node_modules/readdirp": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2773,6 +2921,27 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/streamsearch": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+            "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
+        "node_modules/string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "dependencies": {
+                "safe-buffer": "~5.1.0"
+            }
+        },
+        "node_modules/string_decoder/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
         "node_modules/string-width": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -2881,6 +3050,11 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/typedarray": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+            "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+        },
         "node_modules/undefsafe": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -2924,6 +3098,11 @@
                 "browserslist": ">= 4.21.0"
             }
         },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+        },
         "node_modules/utils-merge": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -3011,6 +3190,14 @@
                 "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
             }
         },
+        "node_modules/xtend": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+            "engines": {
+                "node": ">=0.4"
+            }
+        },
         "node_modules/y18n": {
             "version": "5.0.8",
             "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -3756,6 +3943,11 @@
                 "picomatch": "^2.0.4"
             }
         },
+        "append-field": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+            "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw=="
+        },
         "array-flatten": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -3842,6 +4034,19 @@
             "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
             "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
         },
+        "buffer-from": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+        },
+        "busboy": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+            "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+            "requires": {
+                "streamsearch": "^1.1.0"
+            }
+        },
         "bytes": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -3910,6 +4115,15 @@
                 "wrap-ansi": "^7.0.0"
             }
         },
+        "cloudinary": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.0.3.tgz",
+            "integrity": "sha512-2JPxAUuV4iHwiW4ATSOZvii6+BhhKI9+9KscgUkxJPKa6V6wOnZJHlYyovBGrrIbIgEdmGSZgqEsLfD0wWBhBg==",
+            "requires": {
+                "lodash": "^4.17.21",
+                "q": "^1.5.1"
+            }
+        },
         "color-convert": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3931,6 +4145,17 @@
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
             "dev": true
         },
+        "concat-stream": {
+            "version": "1.6.2",
+            "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+            "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+            "requires": {
+                "buffer-from": "^1.0.0",
+                "inherits": "^2.0.3",
+                "readable-stream": "^2.2.2",
+                "typedarray": "^0.0.6"
+            }
+        },
         "concurrently": {
             "version": "8.2.2",
             "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
@@ -3976,6 +4201,11 @@
             "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
             "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
         },
+        "core-util-is": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+        },
         "cors": {
             "version": "2.8.5",
             "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@@ -4029,6 +4259,11 @@
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
             "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
         },
+        "dotenv": {
+            "version": "16.4.5",
+            "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+            "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg=="
+        },
         "ecdsa-sig-formatter": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -4374,6 +4609,11 @@
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
             "devOptional": true
         },
+        "isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4428,8 +4668,7 @@
         "lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "lodash.includes": {
             "version": "4.3.0",
@@ -4531,11 +4770,43 @@
                 "brace-expansion": "^1.1.7"
             }
         },
+        "minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+        },
+        "mkdirp": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+            "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+            "requires": {
+                "minimist": "^1.2.6"
+            }
+        },
+        "modules": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/modules/-/modules-0.4.0.tgz",
+            "integrity": "sha512-LX4JgwPHJr1FurPDKp1BlGgMXqZXtxO1O8ABGmj2g15CbLGlInTHcA9flqw6uN6oYKE2T0ngWdiHvcX97mdBsw=="
+        },
         "ms": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         },
+        "multer": {
+            "version": "1.4.5-lts.1",
+            "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.5-lts.1.tgz",
+            "integrity": "sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==",
+            "requires": {
+                "append-field": "^1.0.0",
+                "busboy": "^1.0.0",
+                "concat-stream": "^1.5.2",
+                "mkdirp": "^0.5.4",
+                "object-assign": "^4.1.1",
+                "type-is": "^1.6.4",
+                "xtend": "^4.0.0"
+            }
+        },
         "nanoid": {
             "version": "3.3.7",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -4650,6 +4921,11 @@
                 "source-map-js": "^1.0.2"
             }
         },
+        "process-nextick-args": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+        },
         "proxy-addr": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -4665,6 +4941,11 @@
             "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
             "dev": true
         },
+        "q": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+            "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
+        },
         "qs": {
             "version": "6.11.0",
             "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -4734,6 +5015,27 @@
                 "react-router": "6.18.0"
             }
         },
+        "readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "requires": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            },
+            "dependencies": {
+                "safe-buffer": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                    "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+                }
+            }
+        },
         "readdirp": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4930,6 +5232,26 @@
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
             "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
         },
+        "streamsearch": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+            "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="
+        },
+        "string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "requires": {
+                "safe-buffer": "~5.1.0"
+            },
+            "dependencies": {
+                "safe-buffer": {
+                    "version": "5.1.2",
+                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+                    "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+                }
+            }
+        },
         "string-width": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -5008,6 +5330,11 @@
                 "mime-types": "~2.1.24"
             }
         },
+        "typedarray": {
+            "version": "0.0.6",
+            "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+            "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+        },
         "undefsafe": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -5028,6 +5355,11 @@
                 "picocolors": "^1.0.0"
             }
         },
+        "util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+        },
         "utils-merge": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -5060,6 +5392,11 @@
                 "strip-ansi": "^6.0.0"
             }
         },
+        "xtend": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+        },
         "y18n": {
             "version": "5.0.8",
             "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index 78768df..025f23e 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,13 @@
     },
     "dependencies": {
         "@vitejs/plugin-react": "^4.2.1",
+        "cloudinary": "^2.0.3",
         "cors": "^2.8.5",
+        "dotenv": "^16.4.5",
         "express": "^4.18.2",
         "jsonwebtoken": "^9.0.2",
+        "modules": "^0.4.0",
+        "multer": "^1.4.5-lts.1",
         "man": "^2.0.0",
         "vite": "^5.0.12"
     }
diff --git a/server/index.js b/server/index.js
index ac79b21..7306422 100644
--- a/server/index.js
+++ b/server/index.js
@@ -3,15 +3,20 @@ const create_delete_articleRoutes = require("./src/articles/cdroutes.js");
 const articleRoutes = require("./src/articles/routes.js");
 const courseRoutes = require("./src/courses/routes.js");
 const userRoutes = require("./src/users/routes.js");
+const imagesRoutes = require("./src/images/routes.js");
 const cors = require("cors");
-require("dotenv").config();
+const dotenv = require("dotenv");
+dotenv.config();
+// require("dotenv").config();
 
 console.log(process.env.PGUSER);
 
 const app = express();
+// const number = 8080
 
 const port = process.env.PORT;
 
+const port1= 8080
 
 app.use(cors());
 app.use(express.json());
@@ -25,6 +30,6 @@ app.use("/api/articles", create_delete_articleRoutes);//the create_delete will h
 
 app.use("/api/courses", courseRoutes);
 app.use('/api/users', userRoutes);
+app.use("/api/images", imagesRoutes); // images routes
 
-
-app.listen(port, () => console.log(`app listening on port ${port}`));
+app.listen(port1, () => console.log(`app listening on port ${port1}`));
\ No newline at end of file
diff --git a/server/package-lock.json b/server/package-lock.json
index 10864c4..0263623 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -16,6 +16,7 @@
         "express": "^4.18.2",
         "firebase-admin": "^12.0.0",
         "jsonwebtoken": "^9.0.2",
+        "modules": "^0.4.0",
         "oauth": "^0.10.0",
         "pg": "^8.11.3"
       }
@@ -1893,6 +1894,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/modules": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/modules/-/modules-0.4.0.tgz",
+      "integrity": "sha512-LX4JgwPHJr1FurPDKp1BlGgMXqZXtxO1O8ABGmj2g15CbLGlInTHcA9flqw6uN6oYKE2T0ngWdiHvcX97mdBsw==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -4281,6 +4290,11 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
     },
+    "modules": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/modules/-/modules-0.4.0.tgz",
+      "integrity": "sha512-LX4JgwPHJr1FurPDKp1BlGgMXqZXtxO1O8ABGmj2g15CbLGlInTHcA9flqw6uN6oYKE2T0ngWdiHvcX97mdBsw=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/server/package.json b/server/package.json
index 10d1d7c..ef7459a 100644
--- a/server/package.json
+++ b/server/package.json
@@ -16,6 +16,7 @@
     "express": "^4.18.2",
     "firebase-admin": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
+    "modules": "^0.4.0",
     "oauth": "^0.10.0",
     "pg": "^8.11.3"
   }
diff --git a/server/src/articles/controller.js b/server/src/articles/controller.js
index a0aa9d9..4ee9bf3 100644
--- a/server/src/articles/controller.js
+++ b/server/src/articles/controller.js
@@ -26,7 +26,6 @@ const addArticles = (req, res) => {
     const { title,headers,author_id } = req.body;
     let headers_json = JSON.stringify(headers);
 
-    
     pool.query(queries.addArticles, [title, author_id,headers_json], (error, results) => {
       if (error) {
         console.error(error);
diff --git a/server/src/articles/routes.js b/server/src/articles/routes.js
index 1a0d284..41a1fab 100644
--- a/server/src/articles/routes.js
+++ b/server/src/articles/routes.js
@@ -10,4 +10,7 @@ const router = Router();
 router.get("/", async (req, res) => controller.getArticles(req, res));
 router.get("/:id", (req, res) => controller.getArticlesById(req, res));
 
+router.post("/", (req, res) => controller.addArticles(req, res));
+router.delete('/:id', authorizeArticle, controller.deleteArticle);
+
 module.exports = router;
diff --git a/server/src/images/config.js b/server/src/images/config.js
new file mode 100644
index 0000000..a5b0fb0
--- /dev/null
+++ b/server/src/images/config.js
@@ -0,0 +1,13 @@
+const cloudinary = require('cloudinary').v2;
+// export const cloudinary1 = cloudinary
+cloudinary.config({
+    cloud_name: 'dfqmccik2',
+    api_key: '274176942952433',
+    api_secret: 'xTN2VnnA_ePTXg9eYlaFu-SNQtw'
+});
+
+module.exports = {
+    cloudinary1:cloudinary
+}
+
+
diff --git a/server/src/images/controller.js b/server/src/images/controller.js
new file mode 100644
index 0000000..9d13cd1
--- /dev/null
+++ b/server/src/images/controller.js
@@ -0,0 +1,103 @@
+const { createSearchParams } = require("react-router-dom")
+const { cloudinary1 } = require("./config");
+const { upload } = require("./multer");
+
+const getImages = async (req, res) => {
+    try {
+        const images = await cloudinary1.api.resources();
+        res.json(images);
+        console.log(images);
+    }
+    catch (err) {
+        console.error(err);
+        res.status(500).message(err.message);
+    }
+}
+
+const getImagesById = async (req, res) => {
+    const {id} = req.params;    
+    try {
+        const image = await cloudinary1.api.resource(id);
+        res.json(image);
+    }
+    catch (err) {
+        console.log(err);
+        res.status(404).message(err.message);
+    }
+
+}
+
+const postImage = async (req, res) => {
+    try {
+        // Use multer's single() middleware to handle single file upload with field name 'image'
+        upload.single('image')(req, res, async (err) => {
+            if (err) {
+                console.error(err);
+                return res.status(400).json({
+                    success: false,
+                    message: 'Error uploading image'
+                });
+            }
+
+            // If multer successfully parsed the file, you can proceed with Cloudinary upload
+            try {
+                const result = await cloudinary1.uploader.upload(req.file.path);
+                res.status(200).json({
+                    success: true,
+                    message: 'Image uploaded successfully',
+                    data: result // Optionally, you can send uploaded image data back to the client
+                });
+            } catch (uploadError) {
+                console.error(uploadError);
+                res.status(500).json({
+                    success: false,
+                    message: 'Error uploading image to Cloudinary'
+                });
+            }
+        });
+    } catch (multerError) {
+        console.error(multerError);
+        res.status(500).json({
+            success: false,
+            message: 'Error processing file upload'
+        });
+    }
+};
+const deleteImageById = async (req, res) => {
+    const {id} = req.params;
+    try {
+        const image = await cloudinary1.api.resource(id);
+        if (!image) {
+            res.status(404).json({
+                message: 'Image not found'
+            })
+        }
+        else {
+            await cloudinary1.api.delete_resources(id)
+                .then(resp => {
+                    console.log(resp);
+                    res.status(200).json({
+                        message: "the image was successfully deleted",
+                    });
+                })
+                .catch(err => {
+                    console.log(err);
+                    res.status(500).json({ message: "there has been an error deleting the image", })
+
+                });
+        }
+    }
+    catch (err) {
+        console.error(err);
+        res.status(500).json({ message: err.message });
+
+    }
+}
+
+
+module.exports = {
+    getImages,
+    getImagesById,
+    postImage,
+    deleteImageById
+}
\ No newline at end of file
diff --git a/server/src/images/multer.js b/server/src/images/multer.js
new file mode 100644
index 0000000..2544c91
--- /dev/null
+++ b/server/src/images/multer.js
@@ -0,0 +1,12 @@
+const multer = require ("multer")
+// multer middleware to handle files
+const storage = multer.diskStorage({
+    filename: function(req,file,cb){
+        cb(null, file.originalname)
+    }
+});
+// export const upload = multer({storage: storage});
+
+module.exports = {
+    upload:multer({storage: storage})
+}
\ No newline at end of file
diff --git a/server/src/images/routes.js b/server/src/images/routes.js
new file mode 100644
index 0000000..2dc4160
--- /dev/null
+++ b/server/src/images/routes.js
@@ -0,0 +1,11 @@
+const {Router} = require("express")
+const controller = require("./controller");
+const upload = require("multer")
+const router = new Router();
+
+router.get("/" , controller.getImages);
+router.get("/:id", controller.getImagesById);
+router.post("/" , controller.postImage);
+router.delete("/:id", controller.deleteImageById);
+
+module.exports = router;
\ No newline at end of file

From 6e7d1b8ef9f65bb1e477b491aefee08f29bd42e8 Mon Sep 17 00:00:00 2001
From: Darren52BT <darrenbt52@gmail.com>
Date: Mon, 10 Jun 2024 16:26:11 -0700
Subject: [PATCH 02/28] created basic hooks for bookmarks

---
 frontend/src/hooks/useCreateBookmark.jsx | 42 ++++++++++++++++++++++++
 frontend/src/hooks/useDeleteBookmark.jsx | 39 ++++++++++++++++++++++
 frontend/src/hooks/useGetBookmarks.jsx   | 39 ++++++++++++++++++++++
 frontend/src/pages/HomePage/Home.jsx     |  6 ++--
 4 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/hooks/useCreateBookmark.jsx
 create mode 100644 frontend/src/hooks/useDeleteBookmark.jsx
 create mode 100644 frontend/src/hooks/useGetBookmarks.jsx

diff --git a/frontend/src/hooks/useCreateBookmark.jsx b/frontend/src/hooks/useCreateBookmark.jsx
new file mode 100644
index 0000000..023567a
--- /dev/null
+++ b/frontend/src/hooks/useCreateBookmark.jsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { useAuthContext } from "./useAuthContext";
+
+export default function useDeleteBookmark() {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(null);
+  const { user } = useAuthContext();
+
+  const createBookmark = async (article_id) => {
+    if (!user) {
+      setError("You need to be logged in");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    let response = await fetch(
+      `http://localhost:3002/api/users/bookmarks/${article_id}`,
+      {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${user.token}`,
+        },
+        body: JSON.stringify({
+          articleID: article_id,
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      setIsLoading(false);
+      setError(json.error);
+    }
+
+    if (response.ok) {
+      setIsLoading(false);
+    }
+  };
+
+  return { createBookmark, isLoading, error };
+}
diff --git a/frontend/src/hooks/useDeleteBookmark.jsx b/frontend/src/hooks/useDeleteBookmark.jsx
new file mode 100644
index 0000000..235362b
--- /dev/null
+++ b/frontend/src/hooks/useDeleteBookmark.jsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useAuthContext } from "./useAuthContext";
+
+export default function useDeleteBookmark() {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(null);
+  const { user } = useAuthContext();
+
+  const deleteBookmark = async (article_id) => {
+    if (!user) {
+      setError("You need to be logged in");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    let response = await fetch(
+      `http://localhost:3002/api/users/bookmarks/${article_id}`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${user.token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      setIsLoading(false);
+      setError(json.error);
+    }
+
+    if (response.ok) {
+      setIsLoading(false);
+    }
+  };
+
+  return { deleteBookmark, isLoading, error };
+}
diff --git a/frontend/src/hooks/useGetBookmarks.jsx b/frontend/src/hooks/useGetBookmarks.jsx
new file mode 100644
index 0000000..f898f33
--- /dev/null
+++ b/frontend/src/hooks/useGetBookmarks.jsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useAuthContext } from "./useAuthContext";
+
+export default function useGetBookmarks() {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(null);
+  const { user } = useAuthContext();
+
+  const getBookmarks = async () => {
+    if (!user) {
+      setError("You need to be logged in");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    const bookmarks = null;
+
+    let response = await fetch("http://localhost:3002/api/users/bookmarks", {
+      headers: {
+        Authorization: `Bearer ${user.token}`,
+      },
+    });
+
+    bookmarks = response.json();
+
+    if (!response.ok) {
+      setIsLoading(false);
+      setError(json.error);
+    }
+    if (response.ok) {
+      setIsLoading(false);
+    }
+
+    return bookmarks;
+  };
+
+  return { getBookmarks, isLoading, error };
+}
diff --git a/frontend/src/pages/HomePage/Home.jsx b/frontend/src/pages/HomePage/Home.jsx
index 358d6da..ee2842d 100644
--- a/frontend/src/pages/HomePage/Home.jsx
+++ b/frontend/src/pages/HomePage/Home.jsx
@@ -14,7 +14,6 @@ import devin_ai from "../../assets/Article_Images/devin_ai.png";
 import ai_in_business from "../../assets/Article_Images/ai_in_business.png";
 import quantum from "../../assets/Article_Images/quantum.png";
 import ai_brain from "../../assets/ml_brain.jpg";
-
 export default function Home() {
   // demo feature article
   const feature_article_example = {
@@ -74,8 +73,11 @@ export default function Home() {
     },
   ];
 
+
+
   // useEffect to fetch the main feature article from the database (added later)
-  useEffect(() => {}, []);
+  useEffect(() => {
+  }, []);
 
   return (
     <>

From eb17014167c613fafd1d18e2d39a420da817b6a6 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Thu, 13 Jun 2024 11:36:14 -0700
Subject: [PATCH 03/28] added a hook called useBookmark to keep track of
 bookmark status and toggling functionality

---
 frontend/src/App.jsx                         |  2 +
 frontend/src/Components/Article/Article.jsx  | 87 +++++++++++++-------
 frontend/src/Components/Article/Article.scss | 14 ++++
 frontend/src/hooks/useBookmark.jsx           | 50 +++++++++++
 4 files changed, 124 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/hooks/useBookmark.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8943852..d3850bc 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -12,6 +12,7 @@ import ProfileEdit from "./Components/Settings/Profile/ProfileEdit.jsx";
 import SavedArticles from "./Components/Settings/SavedArticles/SavedArticles.jsx";
 import CustomizationsEdit from "./Components/Settings/Customizations/CustomizationsEdit.jsx";
 import SignWelcome from "./pages/SignPages/SignWelcome.jsx";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   return (
@@ -42,6 +43,7 @@ function App() {
           />
         </Route>
       </Routes>
+      <Toaster />
     </>
   );
 }
diff --git a/frontend/src/Components/Article/Article.jsx b/frontend/src/Components/Article/Article.jsx
index f0d5ff2..ab0ac08 100644
--- a/frontend/src/Components/Article/Article.jsx
+++ b/frontend/src/Components/Article/Article.jsx
@@ -7,6 +7,10 @@ import { Container, Row, Col, Stack } from "react-bootstrap";
 import "./ArticleComponents.scss";
 import "./Article.scss";
 import { useEffect, useState } from "react";
+import useBookmark from "../../hooks/useBookmark.jsx";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import { toast } from "react-hot-toast";
+
 //dummy data for table of contents
 const tableOfContents = [
   "Introduction to Machine Learning",
@@ -74,11 +78,14 @@ const relatedTopicsList = [
 
 //this component accepts an article object and displays the corresponding article
 export default function Article({ article }) {
+  const { isLoading, error, updateBookmark } = useBookmark();
+  // State to track when the bookmark action is completed
+  const [bookmarkActionCompleted, setBookmarkActionCompleted] = useState(false);
+
   //extracts article data pieces from provided article
 
   //these properties that i'm defining aside from title don't exist in the database yet,
   //mostly made up so feel free to change later on
-
   //will display default data from figma for now
 
   const [articleData, setArticleData] = useState({
@@ -121,39 +128,61 @@ export default function Article({ article }) {
   //handler for toggling bookmark
   const toggleBookmark = () =>
     setArticleData({ ...articleData, isBookmarked: !articleData.isBookmarked });
+
+  // toggleBookmark() function will be called only if there is a successful response from the server
+  const handleToggleBookmark = () => {
+    updateBookmark(article.id, article.isBookmarked, toggleBookmark);
+  };
+
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+    
+    if (!isLoading) {
+      toast.success("Bookmark status updated");
+    }
+  }, [error, isLoading]);
+
   return (
     <>
-      <Container fluid className="h-100">
-        <Row className="mt-4 mb-4">
-          <Col>
-            <ArticleHeader
-              title={articleData.title}
-              description={articleData.desc}
-              author={articleData.author}
-              date={articleData.date}
-              isBookmarked={articleData.isBookmarked}
-              bookmarkToggler={toggleBookmark}
-            />
-          </Col>
-        </Row>
+      {isLoading ? (
+        <div className="flex flex-grow-1 text-center align-content-center">
+          <AiOutlineLoading3Quarters className="loading" />
+        </div>
+      ) : (
+        <Container fluid className="h-100">
+          <Row className="mt-4 mb-4">
+            <Col>
+              <ArticleHeader
+                title={articleData.title}
+                description={articleData.desc}
+                author={articleData.author}
+                date={articleData.date}
+                isBookmarked={articleData.isBookmarked}
+                bookmarkToggler={handleToggleBookmark}
+              />
+            </Col>
+          </Row>
 
-        <Row className=" gx-4 gy-5">
-          <Col xs={12} md={8}>
-            <ArticleImage image={"/ai_image.jpg"} alt_text={"AI-image"} />
-            <Stack className="gap-3">
-              <TableOfContents contentSequence={contentHeaderSequence} />
+          <Row className=" gx-4 gy-5">
+            <Col xs={12} md={8}>
+              <ArticleImage image={"/ai_image.jpg"} alt_text={"AI-image"} />
+              <Stack className="gap-3">
+                <TableOfContents contentSequence={contentHeaderSequence} />
 
-              {contentHeaderSequence.map(({ id, heading, body }, index) => {
-                return <BodySection id={id} title={heading} body={body} />;
-              })}
-            </Stack>
-          </Col>
+                {contentHeaderSequence.map(({ id, heading, body }, index) => {
+                  return <BodySection id={id} title={heading} body={body} />;
+                })}
+              </Stack>
+            </Col>
 
-          <Col xs={12} md={4} className="rel-topics-container ps-3">
-            <RelatedTopicsList topicLists={relatedTopicsList} />
-          </Col>
-        </Row>
-      </Container>
+            <Col xs={12} md={4} className="rel-topics-container ps-3">
+              <RelatedTopicsList topicLists={relatedTopicsList} />
+            </Col>
+          </Row>
+        </Container>
+      )}
     </>
   );
 }
diff --git a/frontend/src/Components/Article/Article.scss b/frontend/src/Components/Article/Article.scss
index a2377e0..69801f6 100644
--- a/frontend/src/Components/Article/Article.scss
+++ b/frontend/src/Components/Article/Article.scss
@@ -16,6 +16,20 @@
   }
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading {
+  font-size: 4em;
+  animation: spin 500ms infinite;
+}
+
 @include color-mode(light) {
   .rel-topics-container {
     border-color: $divider-light;
diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
new file mode 100644
index 0000000..cfa8003
--- /dev/null
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { useAuthContext } from "./useAuthContext";
+
+
+export default function useBookmark() {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const { user } = useAuthContext();
+
+  const updateBookmark = async (article_id, isBookmarked, toggleBookmark) => {
+    if (!user) {
+      setError("You need to be logged in");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `http://localhost:3002/api/bookmarks/${article_id}`,
+        {
+          method: isBookmarked ? "DELETE" : "POST",
+          headers: {
+            Authorization: `Bearer ${user.token}`,
+            "Content-Type": isBookmarked ? undefined : "application/json",
+          },
+          body: isBookmarked
+            ? undefined
+            : JSON.stringify({ articleID: article_id }),
+        }
+      );
+
+      const json = await response.json();
+
+      if (json.error) {
+        throw new Error(json.error || "Failed to toggle bookmark");
+      }
+
+      // Call the bookmark toggle function if the request is successful
+      toggleBookmark();
+    } catch (error) {
+      setError(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { isLoading, error, updateBookmark };
+}

From 5acab0f7923c2d7bba5cd073ffc2464d65eae802 Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Tue, 18 Jun 2024 16:59:38 -0700
Subject: [PATCH 04/28] Make some changes about .env and connection refused

Make some changes about .env and connection refused
---
 .../Signin_Signup/Signin/SigninCard.jsx       | 124 ++----
 .../Signin_Signup/Signup/SignupCard.jsx       |  39 +-
 frontend/src/hooks/useLogin.jsx               |  16 +-
 frontend/src/hooks/useSignup.jsx              |  79 ++--
 frontend/vite.config.js                       |  21 +-
 package-lock.json                             | 398 +++++++++++++++++-
 package.json                                  |   3 +-
 server/db.js                                  |   2 +-
 server/index.js                               |   6 +-
 server/src/users/controller.js                |  10 +-
 10 files changed, 532 insertions(+), 166 deletions(-)

diff --git a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
index 5bdbd87..fd068f4 100644
--- a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
@@ -1,10 +1,25 @@
 import { useState } from "react";
 import { Form, Button, InputGroup, Container, Row, Col } from "react-bootstrap";
 import * as auth from "../../auth/auth";
-
+import { useLogin } from "../../../hooks/useLogin";
 import { EyeFill, EyeSlashFill } from "react-bootstrap-icons";
 import "./Signin.scss";
 import "../SignForm.scss";
+
+const GoogleIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="30"
+    height="30"
+    viewBox="0 0 64 64"
+    className="my-auto me-2"
+  >
+    {/* SVG content */}
+  </svg>
+);
+
 export default function SigninCard() {
   const [formVal, setFormVal] = useState({
     username: "",
@@ -12,44 +27,47 @@ export default function SigninCard() {
   });
 
   const [showPassword, setShowPassword] = useState(false);
-  //whether form has run through validation yet
   const [isValidated, setValidated] = useState(false);
-
-  // error messages
   const [errorMessages, setErrorMessages] = useState({});
+  const { login, isLoading, error } = useLogin();
 
-  // handle input entered
   const handleInput = (e) => {
     const { name, value } = e.target;
-
-    setFormVal({
-      ...formVal,
+    setFormVal((prevState) => ({
+      ...prevState,
       [name]: value,
-    });
+    }));
   };
 
   const handlePasswordToggle = () => {
     setShowPassword(!showPassword);
   };
 
-  // handle submit
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-
     const errMessagesList = {};
     const checkEmpty = auth.validationFunctions.checkEmpty;
 
-    // check empty for now (will add more authentication from backend soon)
+    // Validation
     for (const fieldName in formVal) {
-      let validateResult = checkEmpty(fieldName, formVal[fieldName]);
-
+      const validateResult = checkEmpty(fieldName, formVal[fieldName]);
       if (typeof validateResult === "string") {
         errMessagesList[fieldName] = validateResult;
       }
     }
 
-    setValidated(true);
-    setErrorMessages(errMessagesList);
+    if (Object.keys(errMessagesList).length === 0) {
+      // If no errors, proceed with login
+      try {
+        await login(formVal.username, formVal.password);
+        // Redirect or perform other actions on successful login
+      } catch (err) {
+        setErrorMessages({ form: "Invalid credentials" });
+      }
+    } else {
+      setValidated(true);
+      setErrorMessages(errMessagesList);
+    }
   };
 
   return (
@@ -65,15 +83,13 @@ export default function SigninCard() {
           name="username"
           value={formVal.username}
           placeholder="Username"
-          isInvalid={errorMessages.hasOwnProperty("username")}
+          isInvalid={!!errorMessages.username}
           onChange={handleInput}
           required
           className="sign-text-input"
         />
         <Form.Control.Feedback type="invalid">
-          {errorMessages.hasOwnProperty("username")
-            ? errorMessages.username
-            : ""}
+          {errorMessages.username || ""}
         </Form.Control.Feedback>
       </Form.Group>
       <Form.Group className="my-4">
@@ -83,7 +99,7 @@ export default function SigninCard() {
             value={formVal.password}
             type={showPassword ? "text" : "password"}
             placeholder="Password"
-            isInvalid={errorMessages.hasOwnProperty("password")}
+            isInvalid={!!errorMessages.password}
             onChange={handleInput}
             required
             className="sign-text-input"
@@ -92,21 +108,21 @@ export default function SigninCard() {
             title={showPassword ? "hide password" : "show password"}
             className="my-auto bg-white border-white sign-password-visbility-button"
             onClick={handlePasswordToggle}
+            type="button"
           >
             {showPassword ? <EyeSlashFill /> : <EyeFill />}
           </Button>
           <Form.Control.Feedback type="invalid">
-            {errorMessages.hasOwnProperty("password")
-              ? errorMessages.password
-              : ""}
+            {errorMessages.password || ""}
           </Form.Control.Feedback>
         </InputGroup>
       </Form.Group>
-
+      {errorMessages.form && <p className="text-danger">{errorMessages.form}</p>}
+      {error && <p className="text-danger">{error}</p>}
       <div className="d-grid">
-        <Button type="submit" className="py-2">
+        <Button type="submit" className="py-2" disabled={isLoading}>
           <span className="text-uppercase fw-semibold text-white sign-action-text">
-            Login
+            {isLoading ? "Logging in..." : "Login"}
           </span>
         </Button>
 
@@ -144,55 +160,3 @@ export default function SigninCard() {
     </Form>
   );
 }
-
-const GoogleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="30"
-    height="30"
-    viewBox="0 0 64 64"
-    className="my-auto me-2"
-  >
-    <ellipse cx="32" cy="60.999" opacity=".3" rx="19" ry="3"></ellipse>
-    <path
-      fill="#fd3c4f"
-      d="M32,18.2c2.3,0,4.464,0.568,6.369,1.566c1.817,0.952,4.025,0.692,5.476-0.759	c2.174-2.173,1.656-5.853-1.056-7.305C39.574,9.98,35.903,9,32,9c-8.825,0-16.482,4.977-20.339,12.275l7.592,5.435	C21.33,21.714,26.252,18.2,32,18.2z"
-    ></path>
-    <path
-      fill="#ffce29"
-      d="M19.009,36.627C18.494,35.178,18.2,33.626,18.2,32c0-1.875,0.377-3.659,1.053-5.29l-7.592-5.435	C9.968,24.479,9,28.125,9,32c0,3.777,0.927,7.33,2.539,10.474l0.003-0.002c0,0,0,0,0,0L19.009,36.627z"
-    ></path>
-    <path
-      fill="#98c900"
-      d="M32,45.8c-5.996,0-11.084-3.832-12.988-9.175l-0.002,0.002c0,0,0,0,0,0l-7.468,5.845	C15.353,49.903,23.074,55,32,55c5.932,0,11.321-2.263,15.398-5.95l-7.155-6.012C37.943,44.763,35.098,45.8,32,45.8z"
-    ></path>
-    <polygon
-      fill="#68e5fd"
-      points="19.009,36.627 11.542,42.472 11.542,42.472 19.01,36.628"
-    ></polygon>
-    <path
-      fill="#9c34c2"
-      d="M54.985,31.244c-0.085-2.176-1.841-3.913-4.019-3.904L36.6,27.4c-2.542,0-4.6,2.059-4.6,4.6	s2.058,4.6,4.6,4.6h8.397c-0.918,2.592-2.597,4.818-4.754,6.438l7.155,6.012C52.056,44.841,55,38.771,55,32	C55,31.751,54.995,31.499,54.985,31.244z"
-    ></path>
-    <path
-      fill="#fff"
-      d="M32,14c2.574,0,4.668-1.952,4.945-4.452C35.352,9.196,33.7,9,32,9 c-8.825,0-16.482,4.977-20.339,12.275c-0.773,1.463-1.386,3.021-1.833,4.648c0.596,0.236,1.216,0.353,1.83,0.353 c1.794,0,3.527-0.968,4.425-2.665C19.215,17.683,25.314,14,32,14z"
-      opacity=".3"
-    ></path>
-    <path
-      d="M54.985,31.244c-0.063-1.612-1.046-2.979-2.435-3.578C51.034,28.526,50,30.134,50,32 c0,5.058-2.17,9.92-5.955,13.341C40.722,48.345,36.444,50,32,50c-2.578,0-4.675,1.958-4.946,4.463C28.647,54.813,30.301,55,32,55 c5.932,0,11.321-2.263,15.398-5.95C52.056,44.841,55,38.771,55,32C55,31.751,54.995,31.499,54.985,31.244z"
-      opacity=".15"
-    ></path>
-    <path
-      fill="none"
-      stroke="#fff"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      stroke-width="3"
-      d="M19.481,17.051c1.15-0.965,2.406-1.793,3.742-2.467s2.753-1.195,4.224-1.548"
-    ></path>
-  </svg>
-);
diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index 95c4037..4a9e4c1 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { Card, Form, Button, InputGroup } from "react-bootstrap";
-import { Link, useNavigate } from "react-router-dom";
+import { Form, Button, InputGroup } from "react-bootstrap";
+import { Link } from "react-router-dom";
 import * as auth from "../../auth/auth";
 import "./Signup.scss";
 import "../SignForm.scss";
-
+import { useSignup } from "../../../hooks/useSignup";
 import { EyeFill, EyeSlashFill } from "react-bootstrap-icons";
 
 export default function SignupCard() {
@@ -18,15 +18,17 @@ export default function SignupCard() {
   });
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const navigate = useNavigate();
 
-  //whether form has run through validation yet
+  // Whether form has run through validation yet
   const [isValidated, setValidated] = useState(false);
 
-  // error messages
+  // Error messages
   const [errorMessages, setErrorMessages] = useState({});
 
-  // handle input entered
+  // Import the useSignup hook
+  const { signup, isLoading, error } = useSignup();
+
+  // Handle input entered
   const handleInput = (e) => {
     const { name, value } = e.target;
 
@@ -45,18 +47,11 @@ export default function SignupCard() {
   };
 
   const isValidationPassed = () => {
-    return Object.keys(errorMessages).length === 0 ? true : false;
+    return Object.keys(errorMessages).length === 0;
   };
 
-  useEffect(() => {
-    // might add API endpoints to handle backend authentication here
-    if (isValidated && isValidationPassed()) {
-      navigate("/signin");
-    }
-  }, [isValidationPassed]);
-
-  // handle submit
-  const handleSubmit = (e) => {
+  // Handle submit
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
     const newErrMessages = {};
@@ -80,6 +75,11 @@ export default function SignupCard() {
 
     setValidated(true);
     setErrorMessages(newErrMessages);
+
+    // Call the signup function if no validation errors
+    if (isValidationPassed()) {
+      await signup(formVal.username, formVal.password);
+    }
   };
 
   return (
@@ -204,10 +204,11 @@ export default function SignupCard() {
           </Form.Control.Feedback>
         </InputGroup>
       </Form.Group>
+      {error && <div className="text-danger text-center mb-3">{error}</div>}
       <div className="d-grid">
-        <Button type="submit">
+        <Button type="submit" disabled={isLoading}>
           <span className="text-uppercase text-white fw-semibold sign-action-text">
-            Register
+            {isLoading ? "Registering..." : "Register"}
           </span>
         </Button>
       </div>
diff --git a/frontend/src/hooks/useLogin.jsx b/frontend/src/hooks/useLogin.jsx
index b821e2c..89ff9a1 100644
--- a/frontend/src/hooks/useLogin.jsx
+++ b/frontend/src/hooks/useLogin.jsx
@@ -1,23 +1,29 @@
 import { useState } from "react";
 import { useAuthContext } from "./useAuthContext";
 
+
 export const useLogin = () =>
 {
     const [error, setError] = useState(null)
-    const [isLoading, setIsLoading] = useState(null)
+    const [isLoading, setIsLoading] = useState(false)
     const { dispatch } = useAuthContext()
-
-    const login = async (username,user_password) =>
+    const apiUrl = import.meta.env.VITE_API_URL; //change to .env
+    // const api = process.env.REACT_APP_API_URL
+    
+    
+        const login = async (username,user_password) => 
     {
         setIsLoading(true);
         setError(null);
-
-        const response = await fetch('http://localhost:3002/api/users/login',
+        const response = await fetch(`${apiUrl}/api/users/login`,
         {
             method : 'POST',
             headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({ username, user_password })
+            
         })
+        console.log(apiUrl)
+
 
         const json = await response.json();
 
diff --git a/frontend/src/hooks/useSignup.jsx b/frontend/src/hooks/useSignup.jsx
index e9d989c..c04fecc 100644
--- a/frontend/src/hooks/useSignup.jsx
+++ b/frontend/src/hooks/useSignup.jsx
@@ -1,40 +1,57 @@
 import { useState } from "react";
 import { useAuthContext } from "./useAuthContext";
+import { useNavigate } from "react-router-dom";
 
-export const useSignup = () =>
-{
-    const [error, setError] = useState(null)
-    const [isLoading, setIsLoading] = useState(null)
-    const { dispatch } = useAuthContext()
 
-    const signup = async (username,user_password) =>
-    {
-        setIsLoading(true);
-        setError(null);
+export const useSignup = () => {
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const { dispatch } = useAuthContext();
+    const navigate = useNavigate();
+    const apiUrl = import.meta.env.VITE_API_URL;
+    // const api = process.env.REACT_APP_API_URL
+    
 
-        const response = await fetch('http://localhost:3002/api/users/',
-        {
-            method : 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({ username, user_password })
-        })
+    console.log("API URL from environment:", apiUrl); // Debug log
 
-        const json = await response.json();
-
-        if (!response.ok) {
-            setIsLoading(false)
-            setError(json.error)
-        }
-        if (response.ok) {
-            //save user to local storage
-            localStorage.setItem('user', JSON.stringify(json))
-
-            //update authcontext
-            dispatch({type: 'LOGIN', payload: json})
+    const signup = async (username, user_password) => {
+        setIsLoading(true);
+        setError(null);
 
-            setIsLoading(false)
+        try {
+            const response = await fetch(`http://localhost:3002/api/users`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, user_password })
+            });
+
+            let json;
+            try {
+                json = await response.json();
+            } catch (err) {
+                setError("Invalid response from server");
+                setIsLoading(false);
+                return;
+            }
+
+            if (!response.ok) {
+                setError(json.error);
+                setIsLoading(false);
+                return;
+            }
+
+            // Save user to local storage
+            localStorage.setItem('user', JSON.stringify(json));
+
+            // Update auth context
+            dispatch({ type: 'LOGIN', payload: json });
+
+            navigate("/signin");
+        } catch (err) {
+            setError("Something went wrong. Please try again.");
+            setIsLoading(false);
         }
-    }
+    };
 
-    return {signup, isLoading, error}
-}
\ No newline at end of file
+    return { signup, isLoading, error };
+};
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 081c8d9..a93e4a2 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,6 +1,17 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
 
-export default defineConfig({
-  plugins: [react()],
-});
+export default ({ mode }) => {
+  // Load environment variables based on the current mode
+  const env = loadEnv(mode, process.cwd());
+
+  return defineConfig({
+    plugins: [react()],
+    define: {
+      // Make sure to stringify the environment variables
+      'process.env': {
+        VITE_API_URL: JSON.stringify(env.VITE_API_URL),
+      },
+    },
+  });
+};
diff --git a/package-lock.json b/package-lock.json
index a593783..08b675a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,9 +15,10 @@
                 "dotenv": "^16.4.5",
                 "express": "^4.18.2",
                 "jsonwebtoken": "^9.0.2",
+                "man": "^2.0.0",
                 "modules": "^0.4.0",
                 "multer": "^1.4.5-lts.1",
-                "man": "^2.0.0",
+                "react-bootstrap-typeahead": "^6.3.2",
                 "vite": "^5.0.12"
             },
             "devDependencies": {
@@ -441,7 +442,6 @@
             "version": "7.23.2",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
             "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
-            "dev": true,
             "dependencies": {
                 "regenerator-runtime": "^0.14.0"
             },
@@ -883,6 +883,15 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@remix-run/router": {
             "version": "1.11.0",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
@@ -892,6 +901,17 @@
                 "node": ">=14.0.0"
             }
         },
+        "node_modules/@restart/hooks": {
+            "version": "0.4.16",
+            "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+            "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+            "dependencies": {
+                "dequal": "^2.0.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
         "node_modules/@rollup/rollup-android-arm-eabi": {
             "version": "4.9.6",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
@@ -1090,6 +1110,25 @@
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
             "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
         },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.12",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+            "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+        },
+        "node_modules/@types/react": {
+            "version": "18.3.3",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+            "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/warning": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+            "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+        },
         "node_modules/@vitejs/plugin-react": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
@@ -1393,6 +1432,11 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/classnames": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+            "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+        },
         "node_modules/cliui": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -1437,6 +1481,11 @@
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
             "dev": true
         },
+        "node_modules/compute-scroll-into-view": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+            "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1538,6 +1587,11 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+        },
         "node_modules/date-fns": {
             "version": "2.30.0",
             "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -1596,6 +1650,14 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/destroy": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -1605,6 +1667,15 @@
                 "npm": "1.2.8000 || >= 1.4.16"
             }
         },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
         "node_modules/dotenv": {
             "version": "16.4.5",
             "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
@@ -1768,6 +1839,11 @@
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
             "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
         "node_modules/fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2005,6 +2081,14 @@
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
+        "node_modules/invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/ipaddr.js": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -2141,6 +2225,11 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "node_modules/lodash.debounce": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+            "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+        },
         "node_modules/lodash.includes": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -2180,8 +2269,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
             "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-            "dev": true,
-            "peer": true,
             "dependencies": {
                 "js-tokens": "^3.0.0 || ^4.0.0"
             },
@@ -2515,6 +2602,16 @@
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
             "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
         },
+        "node_modules/prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
         "node_modules/proxy-addr": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -2582,7 +2679,6 @@
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
             "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-            "dev": true,
             "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
@@ -2591,11 +2687,36 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-bootstrap-typeahead": {
+            "version": "6.3.2",
+            "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-6.3.2.tgz",
+            "integrity": "sha512-N5Mb0WlSSMcD7Z0pcCypILgIuECybev0hl4lsnCa5lbXTnN4QdkuHLGuTLSlXBwm1ZMFpOc2SnsdSRgeFiF+Ow==",
+            "dependencies": {
+                "@babel/runtime": "^7.14.6",
+                "@popperjs/core": "^2.10.2",
+                "@restart/hooks": "^0.4.0",
+                "classnames": "^2.2.0",
+                "fast-deep-equal": "^3.1.1",
+                "invariant": "^2.2.1",
+                "lodash.debounce": "^4.0.8",
+                "prop-types": "^15.5.8",
+                "react-overlays": "^5.2.0",
+                "react-popper": "^2.2.5",
+                "scroll-into-view-if-needed": "^3.1.0",
+                "warning": "^4.0.1"
+            },
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/react-dom": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
             "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-            "dev": true,
             "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
@@ -2605,6 +2726,54 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-fast-compare": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+            "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+        },
+        "node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "node_modules/react-lifecycles-compat": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+        },
+        "node_modules/react-overlays": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
+            "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.8",
+                "@popperjs/core": "^2.11.6",
+                "@restart/hooks": "^0.4.7",
+                "@types/warning": "^3.0.0",
+                "dom-helpers": "^5.2.0",
+                "prop-types": "^15.7.2",
+                "uncontrollable": "^7.2.1",
+                "warning": "^4.0.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.3.0",
+                "react-dom": ">=16.3.0"
+            }
+        },
+        "node_modules/react-popper": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+            "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+            "dependencies": {
+                "react-fast-compare": "^3.0.1",
+                "warning": "^4.0.2"
+            },
+            "peerDependencies": {
+                "@popperjs/core": "^2.0.0",
+                "react": "^16.8.0 || ^17 || ^18",
+                "react-dom": "^16.8.0 || ^17 || ^18"
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -2679,8 +2848,7 @@
         "node_modules/regenerator-runtime": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-            "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-            "dev": true
+            "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
         },
         "node_modules/require-directory": {
             "version": "2.1.1",
@@ -2776,12 +2944,19 @@
             "version": "0.23.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
             "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-            "dev": true,
             "peer": true,
             "dependencies": {
                 "loose-envify": "^1.1.0"
             }
         },
+        "node_modules/scroll-into-view-if-needed": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+            "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+            "dependencies": {
+                "compute-scroll-into-view": "^3.0.2"
+            }
+        },
         "node_modules/semver": {
             "version": "7.5.4",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -3055,6 +3230,20 @@
             "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
             "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
         },
+        "node_modules/uncontrollable": {
+            "version": "7.2.1",
+            "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+            "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.6.3",
+                "@types/react": ">=16.9.11",
+                "invariant": "^2.2.4",
+                "react-lifecycles-compat": "^3.0.4"
+            },
+            "peerDependencies": {
+                "react": ">=15.0.0"
+            }
+        },
         "node_modules/undefsafe": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -3173,6 +3362,14 @@
                 }
             }
         },
+        "node_modules/warning": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+            "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/wrap-ansi": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -3551,7 +3748,6 @@
             "version": "7.23.2",
             "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
             "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
-            "dev": true,
             "requires": {
                 "regenerator-runtime": "^0.14.0"
             }
@@ -3765,12 +3961,25 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "@popperjs/core": {
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+        },
         "@remix-run/router": {
             "version": "1.11.0",
             "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
             "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
             "dev": true
         },
+        "@restart/hooks": {
+            "version": "0.4.16",
+            "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+            "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+            "requires": {
+                "dequal": "^2.0.3"
+            }
+        },
         "@rollup/rollup-android-arm-eabi": {
             "version": "4.9.6",
             "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
@@ -3891,6 +4100,25 @@
             "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
             "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
         },
+        "@types/prop-types": {
+            "version": "15.7.12",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+            "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+        },
+        "@types/react": {
+            "version": "18.3.3",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+            "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
+            "requires": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "@types/warning": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+            "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+        },
         "@vitejs/plugin-react": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
@@ -4104,6 +4332,11 @@
                 "readdirp": "~3.6.0"
             }
         },
+        "classnames": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+            "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+        },
         "cliui": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -4139,6 +4372,11 @@
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
             "dev": true
         },
+        "compute-scroll-into-view": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+            "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+        },
         "concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4215,6 +4453,11 @@
                 "vary": "^1"
             }
         },
+        "csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+        },
         "date-fns": {
             "version": "2.30.0",
             "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -4254,11 +4497,25 @@
             "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
             "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
         },
+        "dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+        },
         "destroy": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
             "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
         },
+        "dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "requires": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
         "dotenv": {
             "version": "16.4.5",
             "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
@@ -4396,6 +4653,11 @@
                 }
             }
         },
+        "fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
         "fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -4568,6 +4830,14 @@
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
+        "invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "requires": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "ipaddr.js": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -4670,6 +4940,11 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
+        "lodash.debounce": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+            "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+        },
         "lodash.includes": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -4709,8 +4984,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
             "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-            "dev": true,
-            "peer": true,
             "requires": {
                 "js-tokens": "^3.0.0 || ^4.0.0"
             }
@@ -4926,6 +5199,16 @@
             "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
             "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
         },
+        "prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "requires": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
         "proxy-addr": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -4974,23 +5257,79 @@
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
             "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-            "dev": true,
             "peer": true,
             "requires": {
                 "loose-envify": "^1.1.0"
             }
         },
+        "react-bootstrap-typeahead": {
+            "version": "6.3.2",
+            "resolved": "https://registry.npmjs.org/react-bootstrap-typeahead/-/react-bootstrap-typeahead-6.3.2.tgz",
+            "integrity": "sha512-N5Mb0WlSSMcD7Z0pcCypILgIuECybev0hl4lsnCa5lbXTnN4QdkuHLGuTLSlXBwm1ZMFpOc2SnsdSRgeFiF+Ow==",
+            "requires": {
+                "@babel/runtime": "^7.14.6",
+                "@popperjs/core": "^2.10.2",
+                "@restart/hooks": "^0.4.0",
+                "classnames": "^2.2.0",
+                "fast-deep-equal": "^3.1.1",
+                "invariant": "^2.2.1",
+                "lodash.debounce": "^4.0.8",
+                "prop-types": "^15.5.8",
+                "react-overlays": "^5.2.0",
+                "react-popper": "^2.2.5",
+                "scroll-into-view-if-needed": "^3.1.0",
+                "warning": "^4.0.1"
+            }
+        },
         "react-dom": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
             "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-            "dev": true,
             "peer": true,
             "requires": {
                 "loose-envify": "^1.1.0",
                 "scheduler": "^0.23.0"
             }
         },
+        "react-fast-compare": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+            "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+        },
+        "react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        },
+        "react-lifecycles-compat": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+            "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+        },
+        "react-overlays": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz",
+            "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
+            "requires": {
+                "@babel/runtime": "^7.13.8",
+                "@popperjs/core": "^2.11.6",
+                "@restart/hooks": "^0.4.7",
+                "@types/warning": "^3.0.0",
+                "dom-helpers": "^5.2.0",
+                "prop-types": "^15.7.2",
+                "uncontrollable": "^7.2.1",
+                "warning": "^4.0.3"
+            }
+        },
+        "react-popper": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+            "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+            "requires": {
+                "react-fast-compare": "^3.0.1",
+                "warning": "^4.0.2"
+            }
+        },
         "react-refresh": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -5048,8 +5387,7 @@
         "regenerator-runtime": {
             "version": "0.14.0",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-            "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-            "dev": true
+            "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
         },
         "require-directory": {
             "version": "2.1.1",
@@ -5113,12 +5451,19 @@
             "version": "0.23.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
             "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-            "dev": true,
             "peer": true,
             "requires": {
                 "loose-envify": "^1.1.0"
             }
         },
+        "scroll-into-view-if-needed": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+            "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+            "requires": {
+                "compute-scroll-into-view": "^3.0.2"
+            }
+        },
         "semver": {
             "version": "7.5.4",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -5335,6 +5680,17 @@
             "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
             "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
         },
+        "uncontrollable": {
+            "version": "7.2.1",
+            "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+            "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+            "requires": {
+                "@babel/runtime": "^7.6.3",
+                "@types/react": ">=16.9.11",
+                "invariant": "^2.2.4",
+                "react-lifecycles-compat": "^3.0.4"
+            }
+        },
         "undefsafe": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -5381,6 +5737,14 @@
                 "rollup": "^4.2.0"
             }
         },
+        "warning": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+            "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+            "requires": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "wrap-ansi": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
diff --git a/package.json b/package.json
index 025f23e..374bab7 100644
--- a/package.json
+++ b/package.json
@@ -33,9 +33,10 @@
         "dotenv": "^16.4.5",
         "express": "^4.18.2",
         "jsonwebtoken": "^9.0.2",
+        "man": "^2.0.0",
         "modules": "^0.4.0",
         "multer": "^1.4.5-lts.1",
-        "man": "^2.0.0",
+        "react-bootstrap-typeahead": "^6.3.2",
         "vite": "^5.0.12"
     }
 }
diff --git a/server/db.js b/server/db.js
index 7541cf7..6f76e93 100644
--- a/server/db.js
+++ b/server/db.js
@@ -9,7 +9,7 @@ const pool = new Pool(
         host: process.env.PGHOST,
         database: process.env.PGDATABASE,
         password: process.env.PGPASSWORD,
-        port: process.env.PGPORT,
+        port: process.env.PGPORT,    
     }
 )
 
diff --git a/server/index.js b/server/index.js
index 7306422..e824652 100644
--- a/server/index.js
+++ b/server/index.js
@@ -16,7 +16,7 @@ const app = express();
 
 const port = process.env.PORT;
 
-const port1= 8080
+// const port1= 8080
 
 app.use(cors());
 app.use(express.json());
@@ -29,7 +29,7 @@ app.use("/api/articles", articleRoutes);// must go BEFORE create_delete because
 app.use("/api/articles", create_delete_articleRoutes);//the create_delete will have authorization checked, but the regular articleRoutes will not
 
 app.use("/api/courses", courseRoutes);
-app.use('/api/users', userRoutes);
+app.use("/api/users", userRoutes);
 app.use("/api/images", imagesRoutes); // images routes
 
-app.listen(port1, () => console.log(`app listening on port ${port1}`));
\ No newline at end of file
+app.listen(port, () => console.log(`app listening on port ${port}`));
\ No newline at end of file
diff --git a/server/src/users/controller.js b/server/src/users/controller.js
index f2a7afd..79f93de 100644
--- a/server/src/users/controller.js
+++ b/server/src/users/controller.js
@@ -57,10 +57,11 @@ const loginUser = async (req, res) => {
         if(result.rows.length === 0){
             return res.status(400).send("Error finding username")
         }
-        const user = result.rows[0];
-        console.log("password:", user_password);
-        console.log("password hased:", user.user_password);
-        if(await bcrypt.compare(user_password, user.user_password)){
+        const user = result.rows[0]; //find the first user
+        // console.log(user); 
+        console.log("password:", user_password); //body request user_password, how response password 
+        console.log("password hashed:", user.password);
+        if(await bcrypt.compare(user_password, user.password)){
             //res.send("Success");
             const token = createToken(username);
             res.json({username,token})
@@ -70,6 +71,7 @@ const loginUser = async (req, res) => {
         }
     } catch (error) {
         res.status(500).send();
+        console.log(error);
     }
 }
 

From 02b7ecc27eb5ac87d9b437f69bccc60f9bf3cc78 Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Wed, 19 Jun 2024 14:29:34 -0700
Subject: [PATCH 05/28] login/signup 90%

fix some issues
---
 frontend/src/hooks/useLogin.jsx  | 13 ++++++++++++-
 frontend/src/hooks/useSignup.jsx |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/hooks/useLogin.jsx b/frontend/src/hooks/useLogin.jsx
index 89ff9a1..1bed9b7 100644
--- a/frontend/src/hooks/useLogin.jsx
+++ b/frontend/src/hooks/useLogin.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useAuthContext } from "./useAuthContext";
+import { Navigate, useNavigate } from "react-router-dom";
 
 
 export const useLogin = () =>
@@ -7,14 +8,16 @@ export const useLogin = () =>
     const [error, setError] = useState(null)
     const [isLoading, setIsLoading] = useState(false)
     const { dispatch } = useAuthContext()
+    const navigate = useNavigate()
     const apiUrl = import.meta.env.VITE_API_URL; //change to .env
     // const api = process.env.REACT_APP_API_URL
     
     
-        const login = async (username,user_password) => 
+        const login = async (username,user_password,error) => 
     {
         setIsLoading(true);
         setError(null);
+        try {
         const response = await fetch(`${apiUrl}/api/users/login`,
         {
             method : 'POST',
@@ -39,8 +42,16 @@ export const useLogin = () =>
             dispatch({type: 'LOGIN', payload: json})
 
             setIsLoading(false)
+            console.log(localStorage)
+            navigate("/")
         }
+    
+    }
+    catch (err) {
+        setError("Something went wrong. Please try again.");
+        setIsLoading(false);
     }
+}
 
     return {login, isLoading, error}
 }
\ No newline at end of file
diff --git a/frontend/src/hooks/useSignup.jsx b/frontend/src/hooks/useSignup.jsx
index c04fecc..e8466e6 100644
--- a/frontend/src/hooks/useSignup.jsx
+++ b/frontend/src/hooks/useSignup.jsx
@@ -19,7 +19,7 @@ export const useSignup = () => {
         setError(null);
 
         try {
-            const response = await fetch(`http://localhost:3002/api/users`, {
+            const response = await fetch(`${apiUrl}/api/users`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ username, user_password })

From 4fbea6977fb1b71b86ade4dd34bd316701c86b4b Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Wed, 19 Jun 2024 17:31:30 -0700
Subject: [PATCH 06/28] fixed the fetch link between DELETE and POST methods in
 useBookmark hook

---
 frontend/src/Components/Article/Article.jsx | 7 +++----
 frontend/src/hooks/useBookmark.jsx          | 5 +++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/Article/Article.jsx b/frontend/src/Components/Article/Article.jsx
index ab0ac08..3e0f4ba 100644
--- a/frontend/src/Components/Article/Article.jsx
+++ b/frontend/src/Components/Article/Article.jsx
@@ -79,8 +79,6 @@ const relatedTopicsList = [
 //this component accepts an article object and displays the corresponding article
 export default function Article({ article }) {
   const { isLoading, error, updateBookmark } = useBookmark();
-  // State to track when the bookmark action is completed
-  const [bookmarkActionCompleted, setBookmarkActionCompleted] = useState(false);
 
   //extracts article data pieces from provided article
 
@@ -125,6 +123,7 @@ export default function Article({ article }) {
       };
     }
   );
+  
   //handler for toggling bookmark
   const toggleBookmark = () =>
     setArticleData({ ...articleData, isBookmarked: !articleData.isBookmarked });
@@ -138,8 +137,8 @@ export default function Article({ article }) {
     if (error) {
       toast.error(error);
     }
-    
-    if (!isLoading) {
+
+    if (!isLoading && articleData.isBookmarked) {
       toast.success("Bookmark status updated");
     }
   }, [error, isLoading]);
diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
index cfa8003..9981e73 100644
--- a/frontend/src/hooks/useBookmark.jsx
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
 import { useAuthContext } from "./useAuthContext";
 
-
 export default function useBookmark() {
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -18,7 +17,9 @@ export default function useBookmark() {
 
     try {
       const response = await fetch(
-        `http://localhost:3002/api/bookmarks/${article_id}`,
+        isBookmarked
+          ? `http://localhost:3002/api/bookmarks/${article_id}`
+          : "http://localhost:3002/api/bookmarks",
         {
           method: isBookmarked ? "DELETE" : "POST",
           headers: {

From 4bcedba0143a2e663066d5651e7c0d0a0467b4dc Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Wed, 19 Jun 2024 21:04:49 -0700
Subject: [PATCH 07/28] added useBookmark hook to handle bookmark toggling
 logic

---
 .../Article/ArticleHeader/ArticleHeader.jsx   |   7 +-
 .../RecentArticleItem/RecentArticleItem.jsx   |   8 +-
 .../Home/RecentArticles/RecentArticles.jsx    |  75 +++++++---
 .../Settings/SavedArticles/SavedArticles.jsx  |  55 ++++++--
 frontend/src/hooks/useBookmark.jsx            |  16 +--
 .../ArticleResultsPage/ArticleResultsPage.jsx | 130 ++++++++++++------
 6 files changed, 196 insertions(+), 95 deletions(-)

diff --git a/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx b/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx
index 5935b14..8ffdebe 100644
--- a/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx
+++ b/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx
@@ -33,12 +33,7 @@ export default function ArticleHeader({
         bookmarkToggler={bookmarkToggler}
       />
       <ArticleHeaderDesc desc={description} />
-      <ArticleHeaderAuthorDate
-        author={author}
-        date={date}
-        bookmarkToggler={bookmarkToggler}
-        isBookmarked={isBookmarked}
-      />
+      <ArticleHeaderAuthorDate author={author} date={date} />
     </Stack>
   );
 }
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
index dd0fc1b..c0dc80b 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
@@ -26,12 +26,12 @@ export default function RecentArticleItem({
         <div className="d-flex gap-3 justify-content-between w-100">
           <div>
             {toBeBookmarked ? (
-              <Bookmark
+              <BookmarkFill
                 className="recent-article-bookmark"
                 onClick={bookmarkToggler}
               />
             ) : (
-              <BookmarkFill
+              <Bookmark
                 className="recent-article-bookmark"
                 onClick={bookmarkToggler}
               />
@@ -44,7 +44,9 @@ export default function RecentArticleItem({
             {/* <p className="recent-article-desc my-2 fst-italic">{articleDesc}</p> */}
             <div className="recent-article-date-time-author-container">
               <p className="recent-article-author">By {articleAuthor}</p>
-              <p className="recent-article-date-time">Published {articleDatePublished}</p>
+              <p className="recent-article-date-time">
+                Published {articleDatePublished}
+              </p>
             </div>
           </div>
 
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx b/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx
index 0bba7ac..e740dc4 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx
@@ -3,8 +3,13 @@ import "./RecentArticles.scss";
 
 import { useEffect, useState } from "react";
 import RecentArticleItem from "./RecentArticleItem/RecentArticleItem";
+import useBookmark from "../../../hooks/useBookmark";
+import toast from "react-hot-toast";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 export default function RecentArticles({ recent_articles }) {
+  const { isLoading, error, updateBookmark } = useBookmark();
+
   //array all the articles currently not deleted
   const [articles, setArticles] = useState([]);
 
@@ -18,22 +23,42 @@ export default function RecentArticles({ recent_articles }) {
       return { ...prevArticles, [id]: !prevArticles[id] };
     });
 
+  const handleToggleBookmark = (article_id) => {
+    const toggleBookmark = () => articleToggleHandler(article_id);
+    updateBookmark(
+      article_id,
+      isBookmarkedArticles[article_id],
+      toggleBookmark
+    );
+  };
+
   //use effect to get articles upon page load once, also init selected state of every article as false
   //just simulating retrieving articles
   useEffect(() => {
-    let initArticles = async () => {
-      let retrieved_articles = await recent_articles;
-      setArticles(retrieved_articles);
+    const initArticles = async () => {
+      try {
+        const retrieved_articles = await recent_articles;
+        setArticles(retrieved_articles);
 
-      let initIsBookmarkedArticles = {};
-      retrieved_articles.forEach(({ id }) => {
-        initIsBookmarkedArticles[id] = false;
-      });
-      setIsBookmarkedArticles(initIsBookmarkedArticles);
+        const initIsBookmarkedArticles = {};
+        retrieved_articles.forEach(({ id }) => {
+          initIsBookmarkedArticles[id] = false;
+        });
+        setIsBookmarkedArticles(initIsBookmarkedArticles);
+      } catch (error) {
+        toast.error(error.message);
+      }
     };
 
     initArticles();
-  }, []);
+  }, [recent_articles]);
+
+  // Handle errors from the bookmark hook
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+  }, [error]);
 
   return (
     <>
@@ -41,19 +66,25 @@ export default function RecentArticles({ recent_articles }) {
         <div className="articles-divider mt-4 mb-3"></div>
         <h3 className="fw-medium">Recent Articles</h3>
         <div className="d-flex flex-column gap-5 my-3">
-          {recent_articles.map((article) => (
-            <RecentArticleItem
-              key={article.id}
-              articleTitle={article.title}
-              articleAuthor={article.author}
-              articleImg={article.article_img}
-              articleDesc={article.article_desc}
-              articleDatePublished={article.article_date}
-              // articleReadTime={article.article_read_time}
-              toBeBookmarked={isBookmarkedArticles[article.id]}
-              bookmarkToggler={articleToggleHandler(article.id)}
-            />
-          ))}
+          {isLoading ? (
+            <div className="flex flex-grow-1 text-center align-content-center">
+              <AiOutlineLoading3Quarters className="loading" />
+            </div>
+          ) : (
+            articles.map((article) => (
+              <RecentArticleItem
+                key={article.id}
+                articleTitle={article.title}
+                articleAuthor={article.author}
+                articleImg={article.article_img}
+                articleDesc={article.article_desc}
+                articleDatePublished={article.article_date}
+                // articleReadTime={article.article_read_time}
+                toBeBookmarked={isBookmarkedArticles[article.id]}
+                bookmarkToggler={() => handleToggleBookmark(article.id)}
+              />
+            ))
+          )}
           {/** May add onClick function to fetch more articles */}
         </div>
         <a className="see-more-link" href="/">
diff --git a/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx b/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
index 0d8788c..9d46548 100644
--- a/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
+++ b/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
@@ -5,6 +5,9 @@ import ConfirmDeleteModal from "./ConfirmDeleteModal";
 import ArrowMarker from "../../ArrowMarker/ArrowMarker";
 import "../Settings.scss";
 import SavedArticlesSearchBar from "./SearchBar/SavedArticlesSearchBar";
+import useBookmark from "../../../hooks/useBookmark";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import toast from "react-hot-toast";
 const test_articles = [
   {
     id: 0,
@@ -30,6 +33,8 @@ const test_articles = [
 ];
 
 export default function SavedArticles() {
+  const { isLoading, error, updateBookmark } = useBookmark();
+
   //array all the articles currently not deleted
   const [articles, setArticles] = useState([]);
 
@@ -54,7 +59,12 @@ export default function SavedArticles() {
 
   //use effect to get articles upon page load once, also init selected state of every article as false
   //just simulating retrieving articles
+  // Show any error from the server if possible
   useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+
     let initArticles = async () => {
       let retrieved_articles = await test_articles;
       setArticles(retrieved_articles);
@@ -67,12 +77,11 @@ export default function SavedArticles() {
     };
 
     initArticles();
-  }, []);
+  }, [error]);
 
-  //submit handler (the yes button in modal does not trigger submit event)
   //simply removed the selected articles from the displayed articles state
   //insert backend actions here
-  const submitHandler = () => {
+  const updateSavedArticles = () => {
     //filter out kept articles, replace articles state with them
     let keptArticles = articles.filter(
       (article) => !isDeletedArticles[article.id]
@@ -87,6 +96,18 @@ export default function SavedArticles() {
     setIsDeletedArticles(initIsDeletedArticles);
   };
 
+  // Submit handler (the yes button in modal does not trigger submit event)
+  // The function updateSavedArticles will be only executed if the server returns a response successfully
+  const submitHandler = () => {
+    articles.forEach((article, article_id) =>
+      updateBookmark(
+        article_id,
+        isDeletedArticles[article_id],
+        updateSavedArticles
+      )
+    );
+  };
+
   //state for whether delete confirmation modal is displayed or now
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
 
@@ -118,7 +139,9 @@ export default function SavedArticles() {
                 <div className="settings-arrow-marker-container">
                   <ArrowMarker />
                 </div>
-                <h4 className="text-uppercase settings-section-header">My Bookmarks</h4>
+                <h4 className="text-uppercase settings-section-header">
+                  My Bookmarks
+                </h4>
               </div>
             </Col>
             <Col
@@ -136,15 +159,21 @@ export default function SavedArticles() {
         </Container>
 
         <div className="d-flex flex-wrap gap-4 p-0 pt-4">
-          {articles.map((article) => (
-            <SavedArticleItem
-              key={article.id}
-              articleImg={article.image}
-              articleTitle={article.title}
-              toBeDeleted={isDeletedArticles[article.id]}
-              deleteToggler={articleToggleHandler(article.id)}
-            />
-          ))}
+          {isLoading ? (
+            <div className="flex flex-grow-1 text-center align-content-center">
+              <AiOutlineLoading3Quarters className="loading" />
+            </div>
+          ) : (
+            articles.map((article) => (
+              <SavedArticleItem
+                key={article.id}
+                articleImg={article.image}
+                articleTitle={article.title}
+                toBeDeleted={isDeletedArticles[article.id]}
+                deleteToggler={articleToggleHandler(article.id)}
+              />
+            ))
+          )}
         </div>
         {/*Remove/Cancel will only show if there are any articles selected to be deleted*/}
         {Object.values(isDeletedArticles).some((isDeleted) => isDeleted) && (
diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
index 9981e73..3e2304d 100644
--- a/frontend/src/hooks/useBookmark.jsx
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -7,15 +7,15 @@ export default function useBookmark() {
   const { user } = useAuthContext();
 
   const updateBookmark = async (article_id, isBookmarked, toggleBookmark) => {
-    if (!user) {
-      setError("You need to be logged in");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
     try {
+      if (!user) {
+        setError("You need to be logged in");
+        return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      
       const response = await fetch(
         isBookmarked
           ? `http://localhost:3002/api/bookmarks/${article_id}`
diff --git a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
index 2ee102a..35379fe 100644
--- a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
+++ b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 import RelatedTags from "../../Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx";
-import ArticleResultsList from "../../Components/ArticleResults/ArticleResultsList.jsx";
 import { Col, Container, Row } from "react-bootstrap";
 import "./ArticleResultsPage.scss";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import toast from "react-hot-toast";
+import ArticleResult from "../../Components/ArticleResults/ArticleResult/ArticleResult.jsx";
+import useBookmark from "../../hooks/useBookmark.jsx";
+
 const dummy_topic_tags = [
   { label: "Deep Learning" },
   { label: "Artifical Intelligence" },
@@ -23,7 +27,9 @@ const dummmy_articles = [
 ];
 
 export default function ArticleResultsPage({}) {
-  const [articles, setArticles] = useState();
+  const { isLoading, error, updateBookmark } = useBookmark();
+
+  const [articles, setArticles] = useState([]);
   const [searchParams, setSearchParams] = useSearchParams();
   const [specificArticle, setSpecificArticle] = useState();
   const titleQuery = searchParams.get("title");
@@ -39,51 +45,89 @@ export default function ArticleResultsPage({}) {
     }
   };
 
+  const handleToggleBookmark = (article_id) => {
+    const article = articles.find((a) => a.id === article_id);
+    if (!article) return;
+
+    const toggleBookmark = bookmarkTogglerCreator(article_id);
+    updateBookmark(article_id, article.isBookmarked, toggleBookmark);
+  };
+
   useEffect(() => {
-    fetch(`http://localhost:3002/api/articles/?title=${titleQuery}`)
-      .then((res) =>
-        res.json().then((data) => {
-          let dataCopy = [...data];
+    const fetchArticles = async () => {
+      try {
+        const response = await fetch(
+          `http://localhost:3002/api/articles/?title=${titleQuery}`
+        );
+        const data = await response.json();
 
-          //we dont have author names, date, bookmarked, or image, so just inserting default in for now
-          dataCopy.forEach((articleObject) => {
-            articleObject.image =
-              "https://emeritus.org/in/wp-content/uploads/sites/3/2023/03/types-of-machine-learning.jpg.optimal.jpg";
-            articleObject.author = "jeff";
-            articleObject.date = "October 24, 2023";
-            articleObject.isBookmarked = false;
-          });
-          setArticles(dataCopy);
-        })
-      )
-      .catch((error) => {
-        console.error("error fetching data");
-      });
+        const enrichedData = data.map((articleObject) => ({
+          ...articleObject,
+          image:
+            "https://emeritus.org/in/wp-content/uploads/sites/3/2023/03/types-of-machine-learning.jpg.optimal.jpg",
+          author: "jeff",
+          date: "October 24, 2023",
+          isBookmarked: false,
+        }));
+
+        setArticles(enrichedData);
+      } catch (error) {
+        toast.error(error.message);
+      }
+    };
+
+    fetchArticles();
   }, [titleQuery, setSearchParams]);
 
+  // Handle errors from the bookmark hook
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+  }, [error]);
+
   return (
-    <Container
-      className="flex-grow-1 mt-5"
-      fluid
-      style={{
-        maxWidth: "1600px",
-      }}
-    >
-      <Row>
-        <Col xs={{ order: 1 }} md={{ order: 0, span: 9 }}>
-          <h2 className="article-results-title mb-5">
-            Displaying results for{" "}
-            <span className="article-results-title-query">"{titleQuery}"</span>
-          </h2>
-          <ArticleResultsList
-            articles={articles}
-            bookmarkTogglerCreator={bookmarkTogglerCreator}
-          />
-        </Col>
-        <Col md={3} className="side-sections-container">
-          <RelatedTags tags={dummy_topic_tags} />
-        </Col>
-      </Row>
-    </Container>
+    <>
+      {isLoading ? (
+        <div className="flex flex-grow-1 text-center align-content-center">
+          <AiOutlineLoading3Quarters className="loading" />
+        </div>
+      ) : (
+        <Container
+          className="flex-grow-1 mt-5"
+          fluid
+          style={{
+            maxWidth: "1600px",
+          }}
+        >
+          <Row>
+            <Col xs={{ order: 1 }} md={{ order: 0, span: 9 }}>
+              <h2 className="article-results-title mb-5">
+                Displaying results for{" "}
+                <span className="article-results-title-query">
+                  "{titleQuery}"
+                </span>
+              </h2>
+              <div className="d-flex flex-column gap-3">
+                {articles && articles.length > 0 ? (
+                  articles.map((article) => (
+                    <ArticleResult
+                      article={article}
+                      key={article.id}
+                      bookmarkToggler={() => handleToggleBookmark(article.id)}
+                    />
+                  ))
+                ) : (
+                  <h2>Your query did not match any results</h2>
+                )}
+              </div>
+            </Col>
+            <Col md={3} className="side-sections-container">
+              <RelatedTags tags={dummy_topic_tags} />
+            </Col>
+          </Row>
+        </Container>
+      )}
+    </>
   );
 }

From d8c67be6dad8d967a3638d81e81f06c35b6e12db Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Wed, 19 Jun 2024 21:30:21 -0700
Subject: [PATCH 08/28] added signup logic using useSignup hook

---
 .../Signin_Signup/Signup/SignupCard.jsx       | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index 95c4037..2ce38d6 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -6,8 +6,12 @@ import "./Signup.scss";
 import "../SignForm.scss";
 
 import { EyeFill, EyeSlashFill } from "react-bootstrap-icons";
+import { useSignup } from "../../../hooks/useSignup";
+import toast from "react-hot-toast";
 
 export default function SignupCard() {
+  const { signup, isLoading, error } = useSignup();
+
   const [formVal, setFormVal] = useState({
     username: "",
     fname: "",
@@ -48,17 +52,13 @@ export default function SignupCard() {
     return Object.keys(errorMessages).length === 0 ? true : false;
   };
 
-  useEffect(() => {
-    // might add API endpoints to handle backend authentication here
-    if (isValidated && isValidationPassed()) {
-      navigate("/signin");
-    }
-  }, [isValidationPassed]);
-
-  // handle submit
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
+  // useEffect(() => {
+  //   // might add API endpoints to handle backend authentication here
+  //   if (isValidated && isValidationPassed()) {
+  //     navigate("/");
+  //   }
+  // }, [isValidationPassed]);
+  const validateInputField = () => {
     const newErrMessages = {};
     const formValidation = auth.formValidation;
 
@@ -82,6 +82,22 @@ export default function SignupCard() {
     setErrorMessages(newErrMessages);
   };
 
+  // handle submit
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    try {
+      validateInputField();
+
+      if (isValidated && isValidationPassed) {
+        signup(formVal.username, formVal.password);
+        navigate("/");
+      }
+    } catch (error) {
+      toast.error(error.message);
+    }
+  };
+
   return (
     <Form
       noValidate
@@ -89,7 +105,9 @@ export default function SignupCard() {
       onSubmit={handleSubmit}
       className="sign-form"
     >
-      <h2 className="text-uppercase sign-page-title text-center fs-2 fw-bold">Sign Up</h2>
+      <h2 className="text-uppercase sign-page-title text-center fs-2 fw-bold">
+        Sign Up
+      </h2>
       <div className="d-flex justify-content-between gap-2">
         <Form.Group className="my-4">
           <Form.Control
@@ -205,7 +223,7 @@ export default function SignupCard() {
         </InputGroup>
       </Form.Group>
       <div className="d-grid">
-        <Button type="submit">
+        <Button type="submit" disabled={isLoading}>
           <span className="text-uppercase text-white fw-semibold sign-action-text">
             Register
           </span>

From b82e3a660d197edf0bcfb16de6b3d36921cf50e8 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Thu, 20 Jun 2024 11:34:51 -0700
Subject: [PATCH 09/28] added Signup logic and modified RecentArticles,
 SavedArticles, and useBookmark hook

---
 frontend/src/Components/Article/Article.jsx   |  8 +--
 frontend/src/Components/Header/Header.jsx     | 36 ++++++++++---
 .../Home/RecentArticles/RecentArticles.jsx    |  4 +-
 .../Settings/SavedArticles/SavedArticles.jsx  | 14 ++---
 .../Signin_Signup/Signup/SignupCard.jsx       | 51 ++++++++++++++-----
 frontend/src/hooks/useBookmark.jsx            |  7 +--
 frontend/src/hooks/useCreateBookmark.jsx      | 42 ---------------
 frontend/src/hooks/useDeleteBookmark.jsx      | 39 --------------
 frontend/src/hooks/useGetBookmarks.jsx        | 39 --------------
 .../ArticleResultsPage/ArticleResultsPage.jsx | 17 ++++---
 10 files changed, 91 insertions(+), 166 deletions(-)
 delete mode 100644 frontend/src/hooks/useCreateBookmark.jsx
 delete mode 100644 frontend/src/hooks/useDeleteBookmark.jsx
 delete mode 100644 frontend/src/hooks/useGetBookmarks.jsx

diff --git a/frontend/src/Components/Article/Article.jsx b/frontend/src/Components/Article/Article.jsx
index 3e0f4ba..343d9af 100644
--- a/frontend/src/Components/Article/Article.jsx
+++ b/frontend/src/Components/Article/Article.jsx
@@ -123,14 +123,14 @@ export default function Article({ article }) {
       };
     }
   );
-  
+
   //handler for toggling bookmark
   const toggleBookmark = () =>
     setArticleData({ ...articleData, isBookmarked: !articleData.isBookmarked });
 
   // toggleBookmark() function will be called only if there is a successful response from the server
-  const handleToggleBookmark = () => {
-    updateBookmark(article.id, article.isBookmarked, toggleBookmark);
+  const handleToggleBookmark = async () => {
+    await updateBookmark(article.id, article.isBookmarked, toggleBookmark);
   };
 
   useEffect(() => {
@@ -141,7 +141,7 @@ export default function Article({ article }) {
     if (!isLoading && articleData.isBookmarked) {
       toast.success("Bookmark status updated");
     }
-  }, [error, isLoading]);
+  }, [error, isLoading, articleData.isBookmarked]);
 
   return (
     <>
diff --git a/frontend/src/Components/Header/Header.jsx b/frontend/src/Components/Header/Header.jsx
index 75ffdaf..887f51e 100644
--- a/frontend/src/Components/Header/Header.jsx
+++ b/frontend/src/Components/Header/Header.jsx
@@ -19,9 +19,17 @@ import { SunFill, MoonFill } from "react-bootstrap-icons";
 
 import "./Header.scss";
 import { useState } from "react";
+import { useAuthContext } from "../../hooks/useAuthContext";
+import { useLogout } from "../../hooks/useLogout";
 
 export default function Header() {
   const [isDark, setIsDark] = useState(false);
+  const { user } = useAuthContext();
+  const { logout } = useLogout();
+
+  const handleLogout = () => {
+    logout();
+  };
 
   return (
     <>
@@ -113,14 +121,26 @@ export default function Header() {
                           </Nav.Item>
                           <div id="profile_menu_divider"></div>
                           <Nav.Item>
-                            <Nav.Link
-                              className="fw-medium"
-                              href="/signin"
-                              id="dropdown_items"
-                              style={{ color: "red" }}
-                            >
-                              Sign out
-                            </Nav.Link>
+                            {user ? (
+                              <Nav.Link
+                                className="fw-medium"
+                                href="/signin"
+                                id="dropdown_items"
+                                style={{ color: "red" }}
+                                onClick={handleLogout}
+                              >
+                                Sign out
+                              </Nav.Link>
+                            ) : (
+                              <Nav.Link
+                                className="fw-bold"
+                                href="/signin"
+                                id="dropdown_items"
+                                style={{ color: "lightblue" }}
+                              >
+                                Sign in
+                              </Nav.Link>
+                            )}
                           </Nav.Item>
                         </Nav>
                       </Popover.Body>
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx b/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx
index e740dc4..091c364 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticles.jsx
@@ -23,9 +23,9 @@ export default function RecentArticles({ recent_articles }) {
       return { ...prevArticles, [id]: !prevArticles[id] };
     });
 
-  const handleToggleBookmark = (article_id) => {
+  const handleToggleBookmark = async (article_id) => {
     const toggleBookmark = () => articleToggleHandler(article_id);
-    updateBookmark(
+    await updateBookmark(
       article_id,
       isBookmarkedArticles[article_id],
       toggleBookmark
diff --git a/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx b/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
index 9d46548..6a8382c 100644
--- a/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
+++ b/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
@@ -98,14 +98,14 @@ export default function SavedArticles() {
 
   // Submit handler (the yes button in modal does not trigger submit event)
   // The function updateSavedArticles will be only executed if the server returns a response successfully
-  const submitHandler = () => {
-    articles.forEach((article, article_id) =>
-      updateBookmark(
-        article_id,
-        isDeletedArticles[article_id],
+  const submitHandler = async () => {
+    for (const article of articles) {
+      await updateBookmark(
+        article.id,
+        isDeletedArticles[article.id],
         updateSavedArticles
-      )
-    );
+      );
+    }
   };
 
   //state for whether delete confirmation modal is displayed or now
diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index 2ce38d6..ecf2804 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -49,7 +49,7 @@ export default function SignupCard() {
   };
 
   const isValidationPassed = () => {
-    return Object.keys(errorMessages).length === 0 ? true : false;
+    return Object.keys(errorMessages).length === 0;
   };
 
   // useEffect(() => {
@@ -60,10 +60,20 @@ export default function SignupCard() {
   // }, [isValidationPassed]);
   const validateInputField = () => {
     const newErrMessages = {};
-    const formValidation = auth.formValidation;
+    const { username, password, confirmPassword, fname, lname, email } =
+      auth.formValidation;
 
-    for (const fieldName in formValidation) {
-      const validationFuncs = formValidation[fieldName];
+    const fieldsToValidate = {
+      username,
+      password,
+      fname,
+      lname,
+      email,
+      confirmPassword,
+    };
+
+    for (const fieldName in fieldsToValidate) {
+      const validationFuncs = fieldsToValidate[fieldName];
 
       validationFuncs.forEach((validationFunc) => {
         let validateResult = validationFunc(
@@ -82,21 +92,34 @@ export default function SignupCard() {
     setErrorMessages(newErrMessages);
   };
 
-  // handle submit
+  // handle submit - validate all input fields on the client side before directing
+  // the user to Home page
   const handleSubmit = (e) => {
     e.preventDefault();
+    validateInputField();
+  };
 
-    try {
-      validateInputField();
-
-      if (isValidated && isValidationPassed) {
-        signup(formVal.username, formVal.password);
-        navigate("/");
+  useEffect(() => {
+    const handleSignup = async () => {
+      if (isValidated && isValidationPassed()) {
+        try {
+          await signup(formVal.username, formVal.password);
+          navigate("/");
+        } catch (error) {
+          toast.error(error.message);
+        }
       }
-    } catch (error) {
-      toast.error(error.message);
+    };
+
+    handleSignup();
+  }, [errorMessages]);
+
+  // Handle errors from the bookmark hook
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
     }
-  };
+  }, [error]);
 
   return (
     <Form
diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
index 3e2304d..e3631bd 100644
--- a/frontend/src/hooks/useBookmark.jsx
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useAuthContext } from "./useAuthContext";
+import toast from "react-hot-toast";
 
 export default function useBookmark() {
   const [error, setError] = useState(null);
@@ -8,14 +9,14 @@ export default function useBookmark() {
 
   const updateBookmark = async (article_id, isBookmarked, toggleBookmark) => {
     try {
+      setError(null);
+      setIsLoading(true);
+
       if (!user) {
         setError("You need to be logged in");
         return;
       }
 
-      setIsLoading(true);
-      setError(null);
-      
       const response = await fetch(
         isBookmarked
           ? `http://localhost:3002/api/bookmarks/${article_id}`
diff --git a/frontend/src/hooks/useCreateBookmark.jsx b/frontend/src/hooks/useCreateBookmark.jsx
deleted file mode 100644
index 023567a..0000000
--- a/frontend/src/hooks/useCreateBookmark.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState } from "react";
-import { useAuthContext } from "./useAuthContext";
-
-export default function useDeleteBookmark() {
-  const [error, setError] = useState(null);
-  const [isLoading, setIsLoading] = useState(null);
-  const { user } = useAuthContext();
-
-  const createBookmark = async (article_id) => {
-    if (!user) {
-      setError("You need to be logged in");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    let response = await fetch(
-      `http://localhost:3002/api/users/bookmarks/${article_id}`,
-      {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${user.token}`,
-        },
-        body: JSON.stringify({
-          articleID: article_id,
-        }),
-      }
-    );
-
-    if (!response.ok) {
-      setIsLoading(false);
-      setError(json.error);
-    }
-
-    if (response.ok) {
-      setIsLoading(false);
-    }
-  };
-
-  return { createBookmark, isLoading, error };
-}
diff --git a/frontend/src/hooks/useDeleteBookmark.jsx b/frontend/src/hooks/useDeleteBookmark.jsx
deleted file mode 100644
index 235362b..0000000
--- a/frontend/src/hooks/useDeleteBookmark.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState } from "react";
-import { useAuthContext } from "./useAuthContext";
-
-export default function useDeleteBookmark() {
-  const [error, setError] = useState(null);
-  const [isLoading, setIsLoading] = useState(null);
-  const { user } = useAuthContext();
-
-  const deleteBookmark = async (article_id) => {
-    if (!user) {
-      setError("You need to be logged in");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-
-    let response = await fetch(
-      `http://localhost:3002/api/users/bookmarks/${article_id}`,
-      {
-        method: "DELETE",
-        headers: {
-          Authorization: `Bearer ${user.token}`,
-        },
-      }
-    );
-
-    if (!response.ok) {
-      setIsLoading(false);
-      setError(json.error);
-    }
-
-    if (response.ok) {
-      setIsLoading(false);
-    }
-  };
-
-  return { deleteBookmark, isLoading, error };
-}
diff --git a/frontend/src/hooks/useGetBookmarks.jsx b/frontend/src/hooks/useGetBookmarks.jsx
deleted file mode 100644
index f898f33..0000000
--- a/frontend/src/hooks/useGetBookmarks.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState } from "react";
-import { useAuthContext } from "./useAuthContext";
-
-export default function useGetBookmarks() {
-  const [error, setError] = useState(null);
-  const [isLoading, setIsLoading] = useState(null);
-  const { user } = useAuthContext();
-
-  const getBookmarks = async () => {
-    if (!user) {
-      setError("You need to be logged in");
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    const bookmarks = null;
-
-    let response = await fetch("http://localhost:3002/api/users/bookmarks", {
-      headers: {
-        Authorization: `Bearer ${user.token}`,
-      },
-    });
-
-    bookmarks = response.json();
-
-    if (!response.ok) {
-      setIsLoading(false);
-      setError(json.error);
-    }
-    if (response.ok) {
-      setIsLoading(false);
-    }
-
-    return bookmarks;
-  };
-
-  return { getBookmarks, isLoading, error };
-}
diff --git a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
index 35379fe..91675fc 100644
--- a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
+++ b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
@@ -45,14 +45,6 @@ export default function ArticleResultsPage({}) {
     }
   };
 
-  const handleToggleBookmark = (article_id) => {
-    const article = articles.find((a) => a.id === article_id);
-    if (!article) return;
-
-    const toggleBookmark = bookmarkTogglerCreator(article_id);
-    updateBookmark(article_id, article.isBookmarked, toggleBookmark);
-  };
-
   useEffect(() => {
     const fetchArticles = async () => {
       try {
@@ -79,6 +71,15 @@ export default function ArticleResultsPage({}) {
     fetchArticles();
   }, [titleQuery, setSearchParams]);
 
+  // handle bookmark toggling with an article with its specified ID
+  const handleToggleBookmark = async (article_id) => {
+    const article = articles.find((a) => a.id === article_id);
+    if (!article) return;
+
+    const toggleBookmark = bookmarkTogglerCreator(article_id);
+    await updateBookmark(article_id, article.isBookmarked, toggleBookmark);
+  };
+
   // Handle errors from the bookmark hook
   useEffect(() => {
     if (error) {

From edee84898260159a248827300867393c92101458 Mon Sep 17 00:00:00 2001
From: Darren52BT <darrenbt52@gmail.com>
Date: Thu, 20 Jun 2024 12:52:00 -0700
Subject: [PATCH 10/28] fixed bug allowing user to be empty by restricting no
 white spacesl, did same with password

---
 frontend/src/Components/auth/auth.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Components/auth/auth.js b/frontend/src/Components/auth/auth.js
index 49b039e..97428a8 100644
--- a/frontend/src/Components/auth/auth.js
+++ b/frontend/src/Components/auth/auth.js
@@ -23,7 +23,8 @@ const patterns = {
 export const validationFunctions = {
   checkEmpty: (name = "", value1 = "", value2 = "") =>
     value1.length > 0 || `${errorLabels[name]} field is required`,
-
+  noSpaces: (name = "", value1 = "", value2 = "") =>
+    !value1.includes(" ") || `${errorLabels[name]} cannot have any spaces`,
   checkPasswordLength: (name = "", value1 = "", value2 = "") =>
     value1.length >= 8 ||
     value1.length === 0 ||
@@ -37,21 +38,22 @@ export const validationFunctions = {
 
     return regex.test(value1) || value1.length === 0 ? true : "Invalid email";
   },
-  checkboxRequired: (name="", value1=false, value2="") =>{
-    return value1 || "This is required."
-  }
+  checkboxRequired: (name = "", value1 = false, value2 = "") => {
+    return value1 || "This is required.";
+  },
 };
 
 // an object containing input fields (keys)
 // and their associated validation funciton (values as an array)
 export const formValidation = {
-  username: [validationFunctions.checkEmpty],
+  username: [validationFunctions.checkEmpty, validationFunctions.noSpaces],
   fname: [validationFunctions.checkEmpty],
   lname: [validationFunctions.checkEmpty],
   email: [validationFunctions.checkEmpty, validationFunctions.checkValidEmail],
   password: [
     validationFunctions.checkEmpty,
     validationFunctions.checkPasswordLength,
+    validationFunctions.noSpaces,
   ],
   oldPassword: [
     validationFunctions.checkEmpty,
@@ -60,16 +62,17 @@ export const formValidation = {
   newPassword: [
     validationFunctions.checkEmpty,
     validationFunctions.checkPasswordLength,
+    validationFunctions.noSpaces,
   ],
   confirmPassword: [
     validationFunctions.checkEmpty,
     validationFunctions.checkPasswordMatch,
+    validationFunctions.noSpaces,
   ],
   confirmNewPassword: [
     validationFunctions.checkEmpty,
     validationFunctions.checkPasswordMatch,
+    validationFunctions.noSpaces,
   ],
-  confirmNewPasswordCheckbox: [
-    validationFunctions.checkboxRequired
-  ]
+  confirmNewPasswordCheckbox: [validationFunctions.checkboxRequired],
 };

From f92c07546cfffc24552f078e82bf62a678f06b67 Mon Sep 17 00:00:00 2001
From: Darren52BT <darrenbt52@gmail.com>
Date: Thu, 20 Jun 2024 14:11:55 -0700
Subject: [PATCH 11/28] fixed bug with moving on to login even if there are
 errors

---
 frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index 4a9e4c1..f4682ab 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -46,6 +46,7 @@ export default function SignupCard() {
     setShowConfirmPassword(!showConfirmPassword);
   };
 
+  //does not work because state is not manipulated instantly, so this can potentially be checking before errors are being pushed here
   const isValidationPassed = () => {
     return Object.keys(errorMessages).length === 0;
   };
@@ -77,7 +78,7 @@ export default function SignupCard() {
     setErrorMessages(newErrMessages);
 
     // Call the signup function if no validation errors
-    if (isValidationPassed()) {
+    if (Object.keys(newErrMessages).length === 0) {
       await signup(formVal.username, formVal.password);
     }
   };

From 99120a0f277bafa3bea5bdb74c215739148c875f Mon Sep 17 00:00:00 2001
From: Darren52BT <darrenbt52@gmail.com>
Date: Thu, 20 Jun 2024 15:24:29 -0700
Subject: [PATCH 12/28] fixed bug with fieldnames in sign up

---
 .../src/Components/Signin_Signup/Signin/SigninCard.jsx    | 8 ++++++--
 .../src/Components/Signin_Signup/Signup/SignupCard.jsx    | 3 +--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
index fd068f4..ab11362 100644
--- a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
@@ -77,7 +77,9 @@ export default function SigninCard() {
       onSubmit={handleSubmit}
       className="sign-form"
     >
-      <h2 className="text-uppercase sign-page-title text-center fs-2 fw-bold">Login</h2>
+      <h2 className="text-uppercase sign-page-title text-center fs-2 fw-bold">
+        Login
+      </h2>
       <Form.Group className="my-4">
         <Form.Control
           name="username"
@@ -117,7 +119,9 @@ export default function SigninCard() {
           </Form.Control.Feedback>
         </InputGroup>
       </Form.Group>
-      {errorMessages.form && <p className="text-danger">{errorMessages.form}</p>}
+      {errorMessages.form && (
+        <p className="text-danger">{errorMessages.form}</p>
+      )}
       {error && <p className="text-danger">{error}</p>}
       <div className="d-grid">
         <Button type="submit" className="py-2" disabled={isLoading}>
diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index f4682ab..7c037ee 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -58,7 +58,7 @@ export default function SignupCard() {
     const newErrMessages = {};
     const formValidation = auth.formValidation;
 
-    for (const fieldName in formValidation) {
+    for (const fieldName in formVal) {
       const validationFuncs = formValidation[fieldName];
 
       validationFuncs.forEach((validationFunc) => {
@@ -76,7 +76,6 @@ export default function SignupCard() {
 
     setValidated(true);
     setErrorMessages(newErrMessages);
-
     // Call the signup function if no validation errors
     if (Object.keys(newErrMessages).length === 0) {
       await signup(formVal.username, formVal.password);

From 74734c0681366c5a66427197b76597b30f163db3 Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Sat, 22 Jun 2024 17:42:33 -0700
Subject: [PATCH 13/28] small change

small change
---
 server/src/users/controller.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/server/src/users/controller.js b/server/src/users/controller.js
index 79f93de..18ff695 100644
--- a/server/src/users/controller.js
+++ b/server/src/users/controller.js
@@ -1,3 +1,4 @@
+const { json } = require("body-parser");
 const pool = require("../../db.js");
 const queries = require("./queries");
 const bcrypt = require('bcrypt');
@@ -10,8 +11,12 @@ const createToken = (id) =>
 
 const getUsers = async (req, res) => {
     try {
+        console.log("GET user");
+        /*
         const allUsers = await pool.query(queries.getUsers);
         res.status(200).json(allUsers.rows);
+        */
+       res.json(req.user);
     } catch (err) {
         console.error(err.message);
     }
@@ -34,7 +39,15 @@ const createUser = async (req, res) => {
         const salt = await bcrypt.genSalt()
         const hashedPassword = await bcrypt.hash(req.body.user_password, salt)
         const { username } = req.body;
-        pool.query(queries.createUser, [username, hashedPassword])
+        pool.query(queries.createUser, [username, hashedPassword], (err, results) => {
+            if(err){
+                console.error(err);
+                return res.status(500).json({
+                    
+                })
+            }
+
+        })
 
         const token = createToken(username);
 
@@ -57,10 +70,9 @@ const loginUser = async (req, res) => {
         if(result.rows.length === 0){
             return res.status(400).send("Error finding username")
         }
-        const user = result.rows[0]; //find the first user
-        // console.log(user); 
-        console.log("password:", user_password); //body request user_password, how response password 
-        console.log("password hashed:", user.password);
+        const user = result.rows[0];
+        console.log("password:", user_password);
+        console.log("password hased:", user.password);
         if(await bcrypt.compare(user_password, user.password)){
             //res.send("Success");
             const token = createToken(username);
@@ -71,7 +83,6 @@ const loginUser = async (req, res) => {
         }
     } catch (error) {
         res.status(500).send();
-        console.log(error);
     }
 }
 
@@ -86,8 +97,6 @@ const changeUser = async (req, res) => {
     }
 };
 
-
-
 const deleteAccount = async (req, res) => {
     try {
         const id = req.params.id;
@@ -98,6 +107,7 @@ const deleteAccount = async (req, res) => {
         console.error(err.message);
     }
 };
+
 module.exports = {
     getUsers,
     getUsersById,

From e2adb9602f092a1107eadf9f01e172ea7a14e094 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Thu, 27 Jun 2024 10:05:06 -0700
Subject: [PATCH 14/28] added login logic on client side and modified the
 padding of menu options of the avatar

---
 frontend/src/Components/Header/Header.scss    |  2 +-
 .../Home/PopularArticles/PopularArticles.jsx  |  2 +-
 .../Signin_Signup/Signin/SigninCard.jsx       | 37 ++++++++++++++++---
 frontend/src/hooks/useBookmark.jsx            | 11 +++---
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Components/Header/Header.scss b/frontend/src/Components/Header/Header.scss
index 3f19960..1d6c712 100644
--- a/frontend/src/Components/Header/Header.scss
+++ b/frontend/src/Components/Header/Header.scss
@@ -28,7 +28,7 @@
 
 #dropdown_items {
   color: $link-text;
-  padding-left: 10px;
+  padding: 8px 10px;
   font-size: 1.2em;
   &:hover {
     font-weight: 600 !important;
diff --git a/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx b/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx
index f49e0e1..1f7cce4 100644
--- a/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx
+++ b/frontend/src/Components/Home/PopularArticles/PopularArticles.jsx
@@ -33,7 +33,7 @@ export default function PopularArticles() {
           <div className="popular-article-container">
             {popular_article_sample.map((article, id) => (
               <PopularArticleItem
-                key={article.id}
+                key={id}
                 number={id + 1}
                 title={article.title}
                 article_img={article.article_img}
diff --git a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
index 5bdbd87..1116cd7 100644
--- a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
@@ -1,11 +1,14 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Form, Button, InputGroup, Container, Row, Col } from "react-bootstrap";
 import * as auth from "../../auth/auth";
 
 import { EyeFill, EyeSlashFill } from "react-bootstrap-icons";
 import "./Signin.scss";
 import "../SignForm.scss";
+import { useLogin } from "../../../hooks/useLogin";
 export default function SigninCard() {
+  const { isLoading, error, login } = useLogin();
+
   const [formVal, setFormVal] = useState({
     username: "",
     password: "",
@@ -32,10 +35,11 @@ export default function SigninCard() {
     setShowPassword(!showPassword);
   };
 
-  // handle submit
-  const handleSubmit = (e) => {
-    e.preventDefault();
+  const isValidationPassed = () => {
+    return Object.keys(errorMessages).length === 0;
+  };
 
+  const validateInputField = () => {
     const errMessagesList = {};
     const checkEmpty = auth.validationFunctions.checkEmpty;
 
@@ -52,6 +56,27 @@ export default function SigninCard() {
     setErrorMessages(errMessagesList);
   };
 
+  // handle submit
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    validateInputField();
+  };
+
+  useEffect(() => {
+    const handleSignin = async () => {
+      if (isValidated && isValidationPassed()) {
+        try {
+          await login(formVal.username, formVal.password);
+          navigate("/");
+        } catch (error) {
+          toast.error(error.message);
+        }
+      }
+    };
+
+    handleSignin();
+  }, [errorMessages]);
+
   return (
     <Form
       noValidate
@@ -59,7 +84,9 @@ export default function SigninCard() {
       onSubmit={handleSubmit}
       className="sign-form"
     >
-      <h2 className="text-uppercase sign-page-title text-center fs-2 fw-bold">Login</h2>
+      <h2 className="text-uppercase sign-page-title text-center fs-2 fw-bold">
+        Login
+      </h2>
       <Form.Group className="my-4">
         <Form.Control
           name="username"
diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
index e3631bd..6652fbe 100644
--- a/frontend/src/hooks/useBookmark.jsx
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -8,13 +8,12 @@ export default function useBookmark() {
   const { user } = useAuthContext();
 
   const updateBookmark = async (article_id, isBookmarked, toggleBookmark) => {
-    try {
-      setError(null);
-      setIsLoading(true);
+    setError(null);
+    setIsLoading(true);
 
+    try {
       if (!user) {
-        setError("You need to be logged in");
-        return;
+        throw new Error("You need to be logged in first!");
       }
 
       const response = await fetch(
@@ -34,7 +33,7 @@ export default function useBookmark() {
       );
 
       const json = await response.json();
-
+      // console.log(json);
       if (json.error) {
         throw new Error(json.error || "Failed to toggle bookmark");
       }

From a39b75d047e2ac224f8115172eb1c5dc53e96feb Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Thu, 27 Jun 2024 13:15:26 -0700
Subject: [PATCH 15/28] add authorizeArticle

---
 server/src/articles/routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/articles/routes.js b/server/src/articles/routes.js
index ee93e60..9861f9e 100644
--- a/server/src/articles/routes.js
+++ b/server/src/articles/routes.js
@@ -1,7 +1,7 @@
 const { Router } = require("express");
 const controller = require("./controller");
 
-//const authorizeArticle = require('../middleware/authorizeArticle')
+const authorizeArticle = require('../middleware/authorizeArticle')
 const optionalAuth = require('../middleware/optionalAuth');
 const router = Router();
 

From 393d4ee4f9f5217a9e6860d08aa0ae39a8925a4b Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Thu, 27 Jun 2024 15:58:03 -0700
Subject: [PATCH 16/28] modifed SigninCard and SignupCard

---
 .../Components/Signin_Signup/Signin/SigninCard.jsx   |  5 ++++-
 .../Components/Signin_Signup/Signup/SignupCard.jsx   | 12 ++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
index f2f1c6c..2386ac8 100644
--- a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
@@ -21,8 +21,11 @@ const GoogleIcon = () => (
 );
 
 import { useLogin } from "../../../hooks/useLogin";
+import { useNavigate } from "react-router-dom";
+
 export default function SigninCard() {
   const { isLoading, error, login } = useLogin();
+  const navigate = useNavigate();
 
   const [formVal, setFormVal] = useState({
     username: "",
@@ -32,7 +35,6 @@ export default function SigninCard() {
   const [showPassword, setShowPassword] = useState(false);
   const [isValidated, setValidated] = useState(false);
   const [errorMessages, setErrorMessages] = useState({});
-  const { login, isLoading, error } = useLogin();
 
   const handleInput = (e) => {
     const { name, value } = e.target;
@@ -63,6 +65,7 @@ export default function SigninCard() {
       // If no errors, proceed with login
       try {
         await login(formVal.username, formVal.password);
+        navigate("/");
         // Redirect or perform other actions on successful login
       } catch (err) {
         setErrorMessages({ form: "Invalid credentials" });
diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index 78ed0d3..d10b174 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Form, Button, InputGroup } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import * as auth from "../../auth/auth";
 import "./Signup.scss";
 import "../SignForm.scss";
@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
 
 export default function SignupCard() {
   const { signup, isLoading, error } = useSignup();
+  const navigate = useNavigate();
 
   const [formVal, setFormVal] = useState({
     username: "",
@@ -29,9 +30,6 @@ export default function SignupCard() {
   // Error messages
   const [errorMessages, setErrorMessages] = useState({});
 
-  // Import the useSignup hook
-  const { signup, isLoading, error } = useSignup();
-
   // Handle input entered
   const handleInput = (e) => {
     const { name, value } = e.target;
@@ -55,12 +53,6 @@ export default function SignupCard() {
     return Object.keys(errorMessages).length === 0;
   };
 
-  // useEffect(() => {
-  //   // might add API endpoints to handle backend authentication here
-  //   if (isValidated && isValidationPassed()) {
-  //     navigate("/");
-  //   }
-  // }, [isValidationPassed]);
   const validateInputField = () => {
     const newErrMessages = {};
     const { username, password, confirmPassword, fname, lname, email } =

From 25db2b063c2fdae8934e513c66d45cb5a9354b35 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Thu, 27 Jun 2024 16:08:55 -0700
Subject: [PATCH 17/28] fixed duplicate imports in SigninCard and SignupCard

---
 frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx | 4 +---
 frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
index 2386ac8..d5e117c 100644
--- a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
@@ -5,6 +5,7 @@ import { useLogin } from "../../../hooks/useLogin";
 import { EyeFill, EyeSlashFill } from "react-bootstrap-icons";
 import "./Signin.scss";
 import "../SignForm.scss";
+import { useNavigate } from "react-router-dom";
 
 const GoogleIcon = () => (
   <svg
@@ -20,9 +21,6 @@ const GoogleIcon = () => (
   </svg>
 );
 
-import { useLogin } from "../../../hooks/useLogin";
-import { useNavigate } from "react-router-dom";
-
 export default function SigninCard() {
   const { isLoading, error, login } = useLogin();
   const navigate = useNavigate();
diff --git a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
index d10b174..72a2112 100644
--- a/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signup/SignupCard.jsx
@@ -6,7 +6,6 @@ import "./Signup.scss";
 import "../SignForm.scss";
 import { useSignup } from "../../../hooks/useSignup";
 import { EyeFill, EyeSlashFill } from "react-bootstrap-icons";
-import { useSignup } from "../../../hooks/useSignup";
 import toast from "react-hot-toast";
 
 export default function SignupCard() {

From 11dd502c72d02de942036d7a437a06eac5c01e01 Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Mon, 1 Jul 2024 09:53:01 -0700
Subject: [PATCH 18/28] Changed articleID to article_id

Creates conflict when converting to a JSON object
---
 frontend/src/hooks/useBookmark.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
index 6652fbe..d0573d2 100644
--- a/frontend/src/hooks/useBookmark.jsx
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -28,7 +28,7 @@ export default function useBookmark() {
           },
           body: isBookmarked
             ? undefined
-            : JSON.stringify({ articleID: article_id }),
+            : JSON.stringify({ article_id: article_id }),
         }
       );
 

From 95696d925a34fa16bcead8e7be505110c57f1f9b Mon Sep 17 00:00:00 2001
From: CerealAaa <86446120+CerealAaa@users.noreply.github.com>
Date: Fri, 5 Jul 2024 23:11:12 -0700
Subject: [PATCH 19/28] small testing fixes

---
 frontend/package-lock.json       | 33 ++++++++++++++++++++++++++++++++
 frontend/package.json            |  2 ++
 frontend/src/hooks/useLogin.jsx  |  2 +-
 frontend/src/hooks/useSignup.jsx |  2 +-
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 524d8bb..12a53b4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,8 @@
         "react-bootstrap-icons": "^1.10.3",
         "react-bootstrap-typeahead": "^6.3.2",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.4.1",
+        "react-icons": "^5.2.1",
         "react-router-dom": "^6.18.0",
         "web-vitals": "^2.1.4"
       },
@@ -2491,6 +2493,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -3246,6 +3256,29 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1f53551..27d1f40 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,8 @@
     "react-bootstrap-icons": "^1.10.3",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.18.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/frontend/src/hooks/useLogin.jsx b/frontend/src/hooks/useLogin.jsx
index 1bed9b7..aa99248 100644
--- a/frontend/src/hooks/useLogin.jsx
+++ b/frontend/src/hooks/useLogin.jsx
@@ -18,7 +18,7 @@ export const useLogin = () =>
         setIsLoading(true);
         setError(null);
         try {
-        const response = await fetch(`${apiUrl}/api/users/login`,
+        const response = await fetch(`http://localhost:3002/api/users/login`,
         {
             method : 'POST',
             headers: {'Content-Type': 'application/json'},
diff --git a/frontend/src/hooks/useSignup.jsx b/frontend/src/hooks/useSignup.jsx
index e8466e6..c04fecc 100644
--- a/frontend/src/hooks/useSignup.jsx
+++ b/frontend/src/hooks/useSignup.jsx
@@ -19,7 +19,7 @@ export const useSignup = () => {
         setError(null);
 
         try {
-            const response = await fetch(`${apiUrl}/api/users`, {
+            const response = await fetch(`http://localhost:3002/api/users`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ username, user_password })

From dfb62b9d7e7decc08461f6eca4c5ad09dd54dea2 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Sat, 6 Jul 2024 21:34:17 -0700
Subject: [PATCH 20/28] added JWT to GET article endpoint in ArticleView.jsx
 and changed the intital state of isBookmarked field in Article.jsx

---
 frontend/src/Components/Article/Article.jsx | 16 +++++++++-------
 frontend/src/pages/ArticleView.jsx          | 21 ++++++++++++++++++---
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Components/Article/Article.jsx b/frontend/src/Components/Article/Article.jsx
index 343d9af..93548aa 100644
--- a/frontend/src/Components/Article/Article.jsx
+++ b/frontend/src/Components/Article/Article.jsx
@@ -95,7 +95,7 @@ export default function Article({ article }) {
       : "Embark on a journey through the basics; explore what machine learning entails and how one can apply it in the real world.",
     author: article.author ? article.author : "David Lam",
     date: article.date ? article.date : "October 29, 2023",
-    isBookmarked: false,
+    isBookmarked: article.isBookmarked,
     headers:
       article.headers && Array.isArray(article.headers)
         ? article.headers
@@ -107,6 +107,8 @@ export default function Article({ article }) {
           ],
   });
 
+  useEffect(() => {}, []);
+
   console.log(articleData.headers);
   //create array of content header objects to be used for body sections and table of contents
   const contentHeaderSequence = articleData.headers.map(
@@ -130,18 +132,18 @@ export default function Article({ article }) {
 
   // toggleBookmark() function will be called only if there is a successful response from the server
   const handleToggleBookmark = async () => {
-    await updateBookmark(article.id, article.isBookmarked, toggleBookmark);
+    await updateBookmark(
+      articleData.id,
+      articleData.isBookmarked,
+      toggleBookmark
+    );
   };
 
   useEffect(() => {
     if (error) {
       toast.error(error);
     }
-
-    if (!isLoading && articleData.isBookmarked) {
-      toast.success("Bookmark status updated");
-    }
-  }, [error, isLoading, articleData.isBookmarked]);
+  }, [error]);
 
   return (
     <>
diff --git a/frontend/src/pages/ArticleView.jsx b/frontend/src/pages/ArticleView.jsx
index 4bcc953..22b43cc 100644
--- a/frontend/src/pages/ArticleView.jsx
+++ b/frontend/src/pages/ArticleView.jsx
@@ -1,15 +1,30 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import Article from "../Components/Article/Article.jsx";
+import { useAuthContext } from "../hooks/useAuthContext.jsx";
 
 export default function ArticleView() {
   const [article, setArticle] = useState();
   const { name = "" } = useParams();
 
   useEffect(() => {
-    fetch(`http://localhost:3002/api/articles/${name}`)
-      .then((res) => res.json()
-      .then((data) => {
+    const authUser = localStorage.getItem("user");
+
+    if (!authUser) {
+      throw new Error("You need to be logged in first!");
+    }
+
+    const user = JSON.parse(authUser);
+
+    fetch(`http://localhost:3002/api/articles/${name}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${user.token}`,
+      },
+    })
+      .then((res) =>
+        res.json().then((data) => {
           let article = data[0];
           console.log(data);
           setArticle(article);

From 6a9c7272f943f5680276ad39e2a73bf9889e5a2d Mon Sep 17 00:00:00 2001
From: CerealAaa <86446120+CerealAaa@users.noreply.github.com>
Date: Sat, 6 Jul 2024 23:53:22 -0700
Subject: [PATCH 21/28] bookmarked articles display correctly now

fix: added auth token to request in article results page
---
 .../ArticleResultsPage/ArticleResultsPage.jsx    | 16 +++++++++++-----
 server/src/articles/controller.js                |  2 ++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
index 91675fc..db73578 100644
--- a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
+++ b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
@@ -46,11 +46,18 @@ export default function ArticleResultsPage({}) {
   };
 
   useEffect(() => {
+    const authUser = localStorage.getItem("user");
+    const user = (authUser ? JSON.parse(authUser) : undefined);
     const fetchArticles = async () => {
       try {
-        const response = await fetch(
-          `http://localhost:3002/api/articles/?title=${titleQuery}`
-        );
+        const response = await fetch(`http://localhost:3002/api/articles/?title=${titleQuery}`,{
+          
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: (user ? `Bearer ${user.token}` : undefined),
+            }
+        });
         const data = await response.json();
 
         const enrichedData = data.map((articleObject) => ({
@@ -59,9 +66,8 @@ export default function ArticleResultsPage({}) {
             "https://emeritus.org/in/wp-content/uploads/sites/3/2023/03/types-of-machine-learning.jpg.optimal.jpg",
           author: "jeff",
           date: "October 24, 2023",
-          isBookmarked: false,
+          isBookmarked: ( articleObject.isBookmarked ? articleObject.isBookmarked : false )
         }));
-
         setArticles(enrichedData);
       } catch (error) {
         toast.error(error.message);
diff --git a/server/src/articles/controller.js b/server/src/articles/controller.js
index 15559ac..11a572a 100644
--- a/server/src/articles/controller.js
+++ b/server/src/articles/controller.js
@@ -4,6 +4,7 @@ const queries = require("./queries");
 const getArticles = async (req, res) => {
   console.log("GET ARTICLES");
   if (req.user) {
+    console.log("WITH USER")
     if (req.query.title) {
       const articles = await pool.query(queries.auth_getArticlesByTitle.replace('$1',req.query.title).replace('$2',req.user.id),(error, results) => {
         if (error) {
@@ -22,6 +23,7 @@ const getArticles = async (req, res) => {
       });
     }
   } else {
+    console.log("WITHOUT USER")
     if (req.query.title) {
       pool.query(queries.getArticlesByTitle.replace('$1',req.query.title),(error, results) => {
         if (error) {

From 31a47887a2c6e0ec87f5d17133d9f66ce02799db Mon Sep 17 00:00:00 2001
From: CerealAaa <86446120+CerealAaa@users.noreply.github.com>
Date: Sat, 6 Jul 2024 23:58:21 -0700
Subject: [PATCH 22/28] allow user to see article even if not logged in

will ONLY CHECK if user is logged in, but wont throw error if they are not logged in
---
 frontend/src/pages/ArticleView.jsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/ArticleView.jsx b/frontend/src/pages/ArticleView.jsx
index 22b43cc..0b5e4ee 100644
--- a/frontend/src/pages/ArticleView.jsx
+++ b/frontend/src/pages/ArticleView.jsx
@@ -10,22 +10,19 @@ export default function ArticleView() {
   useEffect(() => {
     const authUser = localStorage.getItem("user");
 
-    if (!authUser) {
-      throw new Error("You need to be logged in first!");
-    }
-
-    const user = JSON.parse(authUser);
+    const user = (authUser ? JSON.parse(authUser):undefined);
 
     fetch(`http://localhost:3002/api/articles/${name}`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
-        Authorization: `Bearer ${user.token}`,
+        Authorization: (user ? `Bearer ${user.token}` : undefined),
       },
     })
       .then((res) =>
         res.json().then((data) => {
           let article = data[0];
+          article.isBookmarked = (article.isBookmarked ? article.isBookmarked : false);
           console.log(data);
           setArticle(article);
         })

From 620a4a0a271aa5b13b45268c8f23852b339a9d43 Mon Sep 17 00:00:00 2001
From: Darren52BT <darrenbt52@gmail.com>
Date: Sun, 7 Jul 2024 14:55:24 -0700
Subject: [PATCH 23/28] integrated Settings Saved Articles

---
 .../Settings/SavedArticles/SavedArticles.jsx  | 63 ++++++++++++++-----
 .../src/Components/Settings/Settings.scss     |  6 +-
 .../Signin_Signup/Signin/SigninCard.jsx       |  2 +-
 .../src/hooks/useDeleteMultipleBookmarks.jsx  | 46 ++++++++++++++
 frontend/src/hooks/useGetBookmarks.jsx        | 47 ++++++++++++++
 package-lock.json                             | 53 ++++++++++++++++
 package.json                                  |  2 +
 7 files changed, 199 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/hooks/useDeleteMultipleBookmarks.jsx
 create mode 100644 frontend/src/hooks/useGetBookmarks.jsx

diff --git a/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx b/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
index 6a8382c..b427701 100644
--- a/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
+++ b/frontend/src/Components/Settings/SavedArticles/SavedArticles.jsx
@@ -8,6 +8,9 @@ import SavedArticlesSearchBar from "./SearchBar/SavedArticlesSearchBar";
 import useBookmark from "../../../hooks/useBookmark";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import toast from "react-hot-toast";
+import { useDeleteMultipleBookmarks } from "../../../hooks/useDeleteMultipleBookmarks";
+import { useGetBookmarks } from "../../../hooks/useGetBookmarks";
+import { useAuthContext } from "../../../hooks/useAuthContext";
 const test_articles = [
   {
     id: 0,
@@ -33,8 +36,19 @@ const test_articles = [
 ];
 
 export default function SavedArticles() {
-  const { isLoading, error, updateBookmark } = useBookmark();
-
+  const { user } = useAuthContext();
+
+  const {
+    getBookmarks,
+    bookmarks,
+    isLoading: getBookmarksIsLoading,
+    error: getBookmarksError,
+  } = useGetBookmarks();
+  const {
+    deleteMultipleBookmarks,
+    isLoading: deleteMultIsLoading,
+    error: deleteMultError,
+  } = useDeleteMultipleBookmarks();
   //array all the articles currently not deleted
   const [articles, setArticles] = useState([]);
 
@@ -61,12 +75,20 @@ export default function SavedArticles() {
   //just simulating retrieving articles
   // Show any error from the server if possible
   useEffect(() => {
-    if (error) {
-      toast.error(error);
-    }
-
     let initArticles = async () => {
-      let retrieved_articles = await test_articles;
+      // if (active) {
+      await getBookmarks();
+      // }
+      if (getBookmarksError) {
+        toast.error(getBookmarksError);
+      }
+      const retrieved_articles = bookmarks;
+      console.log(bookmarks);
+      //fill in missing info for now
+      for (const article of retrieved_articles) {
+        article["image"] =
+          "https://builtin.com/cdn-cgi/image/f=auto,quality=80,width=752,height=435/https://builtin.com/sites/www.builtin.com/files/styles/byline_image/public/2021-12/machine-learning-examples-applications.png";
+      }
       setArticles(retrieved_articles);
 
       let initIsDeletedArticles = {};
@@ -75,12 +97,11 @@ export default function SavedArticles() {
       });
       setIsDeletedArticles(initIsDeletedArticles);
     };
-
     initArticles();
-  }, [error]);
+  }, [bookmarks.length]);
 
+  //handler for updating on clientside
   //simply removed the selected articles from the displayed articles state
-  //insert backend actions here
   const updateSavedArticles = () => {
     //filter out kept articles, replace articles state with them
     let keptArticles = articles.filter(
@@ -99,12 +120,14 @@ export default function SavedArticles() {
   // Submit handler (the yes button in modal does not trigger submit event)
   // The function updateSavedArticles will be only executed if the server returns a response successfully
   const submitHandler = async () => {
-    for (const article of articles) {
-      await updateBookmark(
-        article.id,
-        isDeletedArticles[article.id],
-        updateSavedArticles
-      );
+    await deleteMultipleBookmarks(
+      Object.keys(isDeletedArticles).filter(
+        (articleId) => isDeletedArticles[articleId]
+      ),
+      updateSavedArticles
+    );
+    if (deleteMultError) {
+      toast.error(deleteMultError);
     }
   };
 
@@ -159,7 +182,7 @@ export default function SavedArticles() {
         </Container>
 
         <div className="d-flex flex-wrap gap-4 p-0 pt-4">
-          {isLoading ? (
+          {getBookmarksIsLoading ? (
             <div className="flex flex-grow-1 text-center align-content-center">
               <AiOutlineLoading3Quarters className="loading" />
             </div>
@@ -174,6 +197,12 @@ export default function SavedArticles() {
               />
             ))
           )}
+
+          {!getBookmarksIsLoading && articles.length === 0 && (
+            <h4 className="no-saved-articles-text">
+              You do not have any saved articles.
+            </h4>
+          )}
         </div>
         {/*Remove/Cancel will only show if there are any articles selected to be deleted*/}
         {Object.values(isDeletedArticles).some((isDeleted) => isDeleted) && (
diff --git a/frontend/src/Components/Settings/Settings.scss b/frontend/src/Components/Settings/Settings.scss
index cb07017..14745fa 100644
--- a/frontend/src/Components/Settings/Settings.scss
+++ b/frontend/src/Components/Settings/Settings.scss
@@ -139,7 +139,8 @@
   .settings-header,
   .settings-section-header,
   .settings-section-field-header,
-  .password-checkbox-label {
+  .password-checkbox-label,
+  .no-saved-articles-text {
     color: $primary-text-dark;
   }
 
@@ -164,7 +165,8 @@
   .settings-header,
   .settings-section-header,
   .settings-section-field-header,
-  .password-checkbox-label {
+  .password-checkbox-label,
+  .no-saved-articles-text {
     border-color: $primary-text-light !important;
   }
 
diff --git a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
index d5e117c..361fc8c 100644
--- a/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
+++ b/frontend/src/Components/Signin_Signup/Signin/SigninCard.jsx
@@ -63,7 +63,7 @@ export default function SigninCard() {
       // If no errors, proceed with login
       try {
         await login(formVal.username, formVal.password);
-        navigate("/");
+        // navigate("/");
         // Redirect or perform other actions on successful login
       } catch (err) {
         setErrorMessages({ form: "Invalid credentials" });
diff --git a/frontend/src/hooks/useDeleteMultipleBookmarks.jsx b/frontend/src/hooks/useDeleteMultipleBookmarks.jsx
new file mode 100644
index 0000000..a2a72aa
--- /dev/null
+++ b/frontend/src/hooks/useDeleteMultipleBookmarks.jsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { useAuthContext } from "./useAuthContext";
+
+export const useDeleteMultipleBookmarks = () => {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const apiUrl = import.meta.env.VITE_API_URL;
+  const { user } = useAuthContext();
+  //takes in list of bookmark ids to delete, method for deleting on client side
+  const deleteMultipleBookmarks = async (
+    bookmarkIds,
+    deleteBookmarksHandler
+  ) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (!user) {
+        throw new Error("You need to be logged in first!");
+      }
+
+      const response = await fetch(
+        `${apiUrl}/api/bookmarks/${bookmarkIds.join(",")}`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: `Bearer ${user.token}`,
+          },
+        }
+      );
+
+      const json = await response.json();
+      if (!response.ok) {
+        setError(json.error);
+      }
+      if (response.ok) {
+        deleteBookmarksHandler();
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { deleteMultipleBookmarks, isLoading, error };
+};
diff --git a/frontend/src/hooks/useGetBookmarks.jsx b/frontend/src/hooks/useGetBookmarks.jsx
new file mode 100644
index 0000000..6839871
--- /dev/null
+++ b/frontend/src/hooks/useGetBookmarks.jsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { useAuthContext } from "./useAuthContext";
+
+export const useGetBookmarks = () => {
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [bookmarks, setBookmarks] = useState([]);
+  const apiUrl = import.meta.env.VITE_API_URL;
+  const { user } = useAuthContext();
+
+  const getBookmarks = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+
+      let {token} = JSON.parse(localStorage.getItem('user'))
+
+      if (!user && !token) {
+        throw new Error("You need to be logged in first!");
+      }
+
+      const response = await fetch(
+        `${apiUrl}/api/bookmarks`,
+        {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      const json = await response.json();
+      if (!response.ok) {
+        throw new Error("Failed to retrieve bookmarks");
+      }
+      if (response.ok) {
+        setBookmarks(json)
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { getBookmarks,bookmarks, isLoading, error };
+};
diff --git a/package-lock.json b/package-lock.json
index 08b675a..8fb2d74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
                 "modules": "^0.4.0",
                 "multer": "^1.4.5-lts.1",
                 "react-bootstrap-typeahead": "^6.3.2",
+                "react-hot-toast": "^2.4.1",
+                "react-icons": "^5.2.1",
                 "vite": "^5.0.12"
             },
             "devDependencies": {
@@ -1974,6 +1976,14 @@
                 "node": ">=4"
             }
         },
+        "node_modules/goober": {
+            "version": "2.1.14",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+            "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+            "peerDependencies": {
+                "csstype": "^3.0.10"
+            }
+        },
         "node_modules/gopd": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -2731,6 +2741,29 @@
             "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
             "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
         },
+        "node_modules/react-hot-toast": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+            "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+            "dependencies": {
+                "goober": "^2.1.10"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": ">=16",
+                "react-dom": ">=16"
+            }
+        },
+        "node_modules/react-icons": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+            "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4753,6 +4786,12 @@
             "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
             "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
         },
+        "goober": {
+            "version": "2.1.14",
+            "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+            "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+            "requires": {}
+        },
         "gopd": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -5296,6 +5335,20 @@
             "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
             "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
         },
+        "react-hot-toast": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+            "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+            "requires": {
+                "goober": "^2.1.10"
+            }
+        },
+        "react-icons": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+            "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+            "requires": {}
+        },
         "react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 374bab7..21e5f0f 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,8 @@
         "modules": "^0.4.0",
         "multer": "^1.4.5-lts.1",
         "react-bootstrap-typeahead": "^6.3.2",
+        "react-hot-toast": "^2.4.1",
+        "react-icons": "^5.2.1",
         "vite": "^5.0.12"
     }
 }

From 3c7844c3083018f44da0f8d7e9fa8c72a1fac9d5 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Mon, 8 Jul 2024 19:14:55 -0700
Subject: [PATCH 24/28] modified loading state of bookmark icon - removed page
 reloading for every bookmark toggling

---
 frontend/src/Components/Article/Article.jsx   |  85 ++++++------
 frontend/src/Components/Article/Article.scss  |   4 +-
 .../Article/ArticleHeader/ArticleHeader.jsx   |   2 +
 .../ArticleHeader/ArticleHeaderTitle.jsx      |   6 +-
 .../ArticleResult/ArticleResult.jsx           |   9 +-
 .../ArticleResult/ArticleResult.scss          |  10 +-
 frontend/src/hooks/useBookmark.jsx            |   5 +-
 .../ArticleResultsPage/ArticleResultsPage.jsx | 122 ++++++++++--------
 8 files changed, 141 insertions(+), 102 deletions(-)

diff --git a/frontend/src/Components/Article/Article.jsx b/frontend/src/Components/Article/Article.jsx
index 93548aa..0708df8 100644
--- a/frontend/src/Components/Article/Article.jsx
+++ b/frontend/src/Components/Article/Article.jsx
@@ -80,6 +80,9 @@ const relatedTopicsList = [
 export default function Article({ article }) {
   const { isLoading, error, updateBookmark } = useBookmark();
 
+  // keep track of a specific article's bookmark toggling process
+  const [isPendingArticle, setIsPendingArticle] = useState(false);
+
   //extracts article data pieces from provided article
 
   //these properties that i'm defining aside from title don't exist in the database yet,
@@ -107,8 +110,6 @@ export default function Article({ article }) {
           ],
   });
 
-  useEffect(() => {}, []);
-
   console.log(articleData.headers);
   //create array of content header objects to be used for body sections and table of contents
   const contentHeaderSequence = articleData.headers.map(
@@ -127,9 +128,18 @@ export default function Article({ article }) {
   );
 
   //handler for toggling bookmark
-  const toggleBookmark = () =>
+  const toggleBookmark = () => {
     setArticleData({ ...articleData, isBookmarked: !articleData.isBookmarked });
 
+    // set pending state of an article being bookmarked to true
+    setIsPendingArticle(true);
+
+    // reset pending state to false
+    setTimeout(() => {
+      setIsPendingArticle(false);
+    }, 500);
+  };
+
   // toggleBookmark() function will be called only if there is a successful response from the server
   const handleToggleBookmark = async () => {
     await updateBookmark(
@@ -147,43 +157,38 @@ export default function Article({ article }) {
 
   return (
     <>
-      {isLoading ? (
-        <div className="flex flex-grow-1 text-center align-content-center">
-          <AiOutlineLoading3Quarters className="loading" />
-        </div>
-      ) : (
-        <Container fluid className="h-100">
-          <Row className="mt-4 mb-4">
-            <Col>
-              <ArticleHeader
-                title={articleData.title}
-                description={articleData.desc}
-                author={articleData.author}
-                date={articleData.date}
-                isBookmarked={articleData.isBookmarked}
-                bookmarkToggler={handleToggleBookmark}
-              />
-            </Col>
-          </Row>
-
-          <Row className=" gx-4 gy-5">
-            <Col xs={12} md={8}>
-              <ArticleImage image={"/ai_image.jpg"} alt_text={"AI-image"} />
-              <Stack className="gap-3">
-                <TableOfContents contentSequence={contentHeaderSequence} />
-
-                {contentHeaderSequence.map(({ id, heading, body }, index) => {
-                  return <BodySection id={id} title={heading} body={body} />;
-                })}
-              </Stack>
-            </Col>
-
-            <Col xs={12} md={4} className="rel-topics-container ps-3">
-              <RelatedTopicsList topicLists={relatedTopicsList} />
-            </Col>
-          </Row>
-        </Container>
-      )}
+      <Container fluid className="h-100">
+        <Row className="mt-4 mb-4">
+          <Col>
+            <ArticleHeader
+              title={articleData.title}
+              description={articleData.desc}
+              author={articleData.author}
+              date={articleData.date}
+              isBookmarked={articleData.isBookmarked}
+              isPending={isPendingArticle}
+              bookmarkToggler={handleToggleBookmark}
+            />
+          </Col>
+        </Row>
+
+        <Row className=" gx-4 gy-5">
+          <Col xs={12} md={8}>
+            <ArticleImage image={"/ai_image.jpg"} alt_text={"AI-image"} />
+            <Stack className="gap-3">
+              <TableOfContents contentSequence={contentHeaderSequence} />
+
+              {contentHeaderSequence.map(({ id, heading, body }, index) => {
+                return <BodySection id={id} title={heading} body={body} />;
+              })}
+            </Stack>
+          </Col>
+
+          <Col xs={12} md={4} className="rel-topics-container ps-3">
+            <RelatedTopicsList topicLists={relatedTopicsList} />
+          </Col>
+        </Row>
+      </Container>
     </>
   );
 }
diff --git a/frontend/src/Components/Article/Article.scss b/frontend/src/Components/Article/Article.scss
index 69801f6..2f89cfd 100644
--- a/frontend/src/Components/Article/Article.scss
+++ b/frontend/src/Components/Article/Article.scss
@@ -26,8 +26,8 @@
 }
 
 .loading {
-  font-size: 4em;
-  animation: spin 500ms infinite;
+  font-size: 1.2rem;
+  animation: spin 500ms linear infinite;
 }
 
 @include color-mode(light) {
diff --git a/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx b/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx
index 8ffdebe..5eac95a 100644
--- a/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx
+++ b/frontend/src/Components/Article/ArticleHeader/ArticleHeader.jsx
@@ -23,6 +23,7 @@ export default function ArticleHeader({
   author,
   date,
   isBookmarked,
+  isPending,
   bookmarkToggler,
 }) {
   return (
@@ -30,6 +31,7 @@ export default function ArticleHeader({
       <ArticleHeaderTitle
         title={title}
         isBookmarked={isBookmarked}
+        isPending={isPending}
         bookmarkToggler={bookmarkToggler}
       />
       <ArticleHeaderDesc desc={description} />
diff --git a/frontend/src/Components/Article/ArticleHeader/ArticleHeaderTitle.jsx b/frontend/src/Components/Article/ArticleHeader/ArticleHeaderTitle.jsx
index ba24b8d..f905ed0 100644
--- a/frontend/src/Components/Article/ArticleHeader/ArticleHeaderTitle.jsx
+++ b/frontend/src/Components/Article/ArticleHeader/ArticleHeaderTitle.jsx
@@ -1,16 +1,20 @@
 import { Stack } from "react-bootstrap";
 
 import { Bookmark, BookmarkFill } from "react-bootstrap-icons";
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
 //component for article title
 export default function ArticleHeaderTitle({
   title,
   isBookmarked,
+  isPending,
   bookmarkToggler,
 }) {
   return (
     <Stack direction="horizontal" gap={2}>
-      {isBookmarked ? (
+      {isPending ? (
+        <AiOutlineLoading3Quarters className="loading fs-2" />
+      ) : isBookmarked ? (
         <BookmarkFill className="article-bookmark" onClick={bookmarkToggler} />
       ) : (
         <Bookmark className="article-bookmark" onClick={bookmarkToggler} />
diff --git a/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.jsx b/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.jsx
index 6dea9a5..27e7ce6 100644
--- a/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.jsx
+++ b/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.jsx
@@ -2,7 +2,8 @@ import { Image } from "react-bootstrap";
 import "./ArticleResult.scss";
 import { Bookmark, BookmarkFill } from "react-bootstrap-icons";
 import { useNavigate } from "react-router-dom";
-export default function ArticleResult({ article, bookmarkToggler }) {
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
+export default function ArticleResult({ article, isPending, bookmarkToggler }) {
   const navigate = useNavigate();
 
   const articleNavigate = () => {
@@ -10,11 +11,13 @@ export default function ArticleResult({ article, bookmarkToggler }) {
   };
   return (
     <div className="article-result">
-      <div className="article-result-image-container">
+      <div className="article-result-image-container" onClick={articleNavigate}>
         <Image src={article.image} className="article-result-image" />
       </div>
       <div>
-        {article.isBookmarked ? (
+        {isPending ? (
+          <AiOutlineLoading3Quarters className="loading" />
+        ) : article.isBookmarked ? (
           <BookmarkFill
             className="article-result-bookmark"
             onClick={bookmarkToggler}
diff --git a/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss b/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss
index d4eac1f..3f46e16 100644
--- a/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss
+++ b/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss
@@ -8,7 +8,15 @@
 .article-result {
   display: flex;
   gap: 10px;
-  height: 100px;
+  height: 100%;
+  padding: 0.5rem;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid $primary;
+    border-radius: 10px;
+  }
+
   @include media-breakpoint-up(sm) {
     height: 150px;
   }
diff --git a/frontend/src/hooks/useBookmark.jsx b/frontend/src/hooks/useBookmark.jsx
index d0573d2..7d0dfe0 100644
--- a/frontend/src/hooks/useBookmark.jsx
+++ b/frontend/src/hooks/useBookmark.jsx
@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 export default function useBookmark() {
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const apiUrl = import.meta.env.VITE_API_URL;
   const { user } = useAuthContext();
 
   const updateBookmark = async (article_id, isBookmarked, toggleBookmark) => {
@@ -18,8 +19,8 @@ export default function useBookmark() {
 
       const response = await fetch(
         isBookmarked
-          ? `http://localhost:3002/api/bookmarks/${article_id}`
-          : "http://localhost:3002/api/bookmarks",
+          ? `${apiUrl}/api/bookmarks/${article_id}`
+          : `${apiUrl}/api/bookmarks`,
         {
           method: isBookmarked ? "DELETE" : "POST",
           headers: {
diff --git a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
index db73578..6c4d9d2 100644
--- a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
+++ b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
@@ -1,12 +1,11 @@
 import { useEffect, useState } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
-import RelatedTags from "../../Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx";
 import { Col, Container, Row } from "react-bootstrap";
-import "./ArticleResultsPage.scss";
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
 import toast from "react-hot-toast";
+import { useSearchParams } from "react-router-dom";
 import ArticleResult from "../../Components/ArticleResults/ArticleResult/ArticleResult.jsx";
+import RelatedTags from "../../Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx";
 import useBookmark from "../../hooks/useBookmark.jsx";
+import "./ArticleResultsPage.scss";
 
 const dummy_topic_tags = [
   { label: "Deep Learning" },
@@ -27,11 +26,14 @@ const dummmy_articles = [
 ];
 
 export default function ArticleResultsPage({}) {
-  const { isLoading, error, updateBookmark } = useBookmark();
+  const { error, updateBookmark } = useBookmark();
+
+  // keep track of a specific article's bookmark toggling process
+  const [pendingArticles, setPendingArticles] = useState({});
 
   const [articles, setArticles] = useState([]);
   const [searchParams, setSearchParams] = useSearchParams();
-  const [specificArticle, setSpecificArticle] = useState();
+  // const [specificArticle, setSpecificArticle] = useState();
   const titleQuery = searchParams.get("title");
 
   //bookmark toggler creator function, returns function that toggles bookmark for certain id
@@ -43,21 +45,31 @@ export default function ArticleResultsPage({}) {
         !newArticles[articleIndex].isBookmarked;
       setArticles(newArticles);
     }
+
+    // set pending state of an article being bookmarked to true
+    setPendingArticles((prev) => ({ ...prev, [id]: true }));
+
+    // reset pending state to false
+    setTimeout(() => {
+      setPendingArticles((prev) => ({ ...prev, [id]: false }));
+    }, 500);
   };
 
   useEffect(() => {
     const authUser = localStorage.getItem("user");
-    const user = (authUser ? JSON.parse(authUser) : undefined);
+    const user = authUser ? JSON.parse(authUser) : undefined;
     const fetchArticles = async () => {
       try {
-        const response = await fetch(`http://localhost:3002/api/articles/?title=${titleQuery}`,{
-          
+        const response = await fetch(
+          `http://localhost:3002/api/articles/?title=${titleQuery}`,
+          {
             method: "GET",
             headers: {
               "Content-Type": "application/json",
-              Authorization: (user ? `Bearer ${user.token}` : undefined),
-            }
-        });
+              Authorization: user ? `Bearer ${user.token}` : undefined,
+            },
+          }
+        );
         const data = await response.json();
 
         const enrichedData = data.map((articleObject) => ({
@@ -66,9 +78,18 @@ export default function ArticleResultsPage({}) {
             "https://emeritus.org/in/wp-content/uploads/sites/3/2023/03/types-of-machine-learning.jpg.optimal.jpg",
           author: "jeff",
           date: "October 24, 2023",
-          isBookmarked: ( articleObject.isBookmarked ? articleObject.isBookmarked : false )
+          isBookmarked: articleObject.isBookmarked
+            ? articleObject.isBookmarked
+            : false,
         }));
         setArticles(enrichedData);
+
+        // initialize pending state of all article results to false
+        let initPendingArticles = {};
+        enrichedData.forEach(({ id }) => {
+          initPendingArticles[id] = false;
+        });
+        setPendingArticles(initPendingArticles);
       } catch (error) {
         toast.error(error.message);
       }
@@ -95,46 +116,41 @@ export default function ArticleResultsPage({}) {
 
   return (
     <>
-      {isLoading ? (
-        <div className="flex flex-grow-1 text-center align-content-center">
-          <AiOutlineLoading3Quarters className="loading" />
-        </div>
-      ) : (
-        <Container
-          className="flex-grow-1 mt-5"
-          fluid
-          style={{
-            maxWidth: "1600px",
-          }}
-        >
-          <Row>
-            <Col xs={{ order: 1 }} md={{ order: 0, span: 9 }}>
-              <h2 className="article-results-title mb-5">
-                Displaying results for{" "}
-                <span className="article-results-title-query">
-                  "{titleQuery}"
-                </span>
-              </h2>
-              <div className="d-flex flex-column gap-3">
-                {articles && articles.length > 0 ? (
-                  articles.map((article) => (
-                    <ArticleResult
-                      article={article}
-                      key={article.id}
-                      bookmarkToggler={() => handleToggleBookmark(article.id)}
-                    />
-                  ))
-                ) : (
-                  <h2>Your query did not match any results</h2>
-                )}
-              </div>
-            </Col>
-            <Col md={3} className="side-sections-container">
-              <RelatedTags tags={dummy_topic_tags} />
-            </Col>
-          </Row>
-        </Container>
-      )}
+      <Container
+        className="flex-grow-1 mt-5"
+        fluid
+        style={{
+          maxWidth: "1600px",
+        }}
+      >
+        <Row>
+          <Col xs={{ order: 1 }} md={{ order: 0, span: 9 }}>
+            <h2 className="article-results-title mb-5">
+              Displaying results for{" "}
+              <span className="article-results-title-query">
+                "{titleQuery}"
+              </span>
+            </h2>
+            <div className="d-flex flex-column gap-3">
+              {articles && articles.length > 0 ? (
+                articles.map((article) => (
+                  <ArticleResult
+                    key={article.id}
+                    article={article}
+                    isPending={!!pendingArticles[article.id]}
+                    bookmarkToggler={() => handleToggleBookmark(article.id)}
+                  />
+                ))
+              ) : (
+                <h2>Your query did not match any results</h2>
+              )}
+            </div>
+          </Col>
+          <Col md={3} className="side-sections-container">
+            <RelatedTags tags={dummy_topic_tags} />
+          </Col>
+        </Row>
+      </Container>
     </>
   );
 }

From 1c353fc8e6b541129a4d3809b6115ab632b88a26 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Tue, 9 Jul 2024 09:01:45 -0700
Subject: [PATCH 25/28] modified the avatar menu and showed username once
 logged in

---
 frontend/src/Components/Header/Header.jsx     | 23 ++--------
 .../RecentArticleItem/RecentArticleItem.jsx   | 17 +++++---
 .../RecentArticleItem/RecentArticleItem.scss  | 43 +++----------------
 3 files changed, 21 insertions(+), 62 deletions(-)

diff --git a/frontend/src/Components/Header/Header.jsx b/frontend/src/Components/Header/Header.jsx
index 35200c0..32fb2f7 100644
--- a/frontend/src/Components/Header/Header.jsx
+++ b/frontend/src/Components/Header/Header.jsx
@@ -26,6 +26,7 @@ export default function Header() {
   const [isDark, setIsDark] = useState(false);
   const { user } = useAuthContext();
   const { logout } = useLogout();
+  const { username } = JSON.parse(localStorage.getItem("user"));
 
   const handleLogout = () => {
     logout();
@@ -88,28 +89,12 @@ export default function Header() {
                         as="h3"
                         className="text-center bg-primary"
                       >
-                        Hello John!
+                        {username
+                          ? username.charAt(0).toUpperCase() + username.slice(1)
+                          : "Guest"}
                       </Popover.Header>
                       <Popover.Body className="py-2">
                         <Nav>
-                          <Nav.Item>
-                            <Nav.Link
-                              className="fw-medium"
-                              href="/settings/profile-settings"
-                              id="dropdown_items"
-                            >
-                              My Profile
-                            </Nav.Link>
-                          </Nav.Item>
-                          <Nav.Item>
-                            <Nav.Link
-                              className="fw-medium"
-                              href="/settings/saved-articles"
-                              id="dropdown_items"
-                            >
-                              Saved Articles
-                            </Nav.Link>
-                          </Nav.Item>
                           <Nav.Item>
                             <Nav.Link
                               className="fw-medium"
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
index c0dc80b..3d308d2 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.jsx
@@ -4,6 +4,7 @@ import { Image } from "react-bootstrap";
 import { Bookmark, BookmarkFill } from "react-bootstrap-icons";
 
 import "./RecentArticleItem.scss";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function RecentArticleItem({
   articleTitle,
@@ -15,14 +16,18 @@ export default function RecentArticleItem({
   toBeBookmarked,
   bookmarkToggler,
 }) {
+  const navigate = useNavigate();
+
   return (
     <>
       <div className="recent-article-container">
-        <div className="d-flex w-100">
-          <div className="recent-article-image-container">
-            <Image src={articleImg} className="recent-article-img" />
-          </div>
+        <div
+          className="recent-article-image-container"
+          onClick={() => navigate("/")}
+        >
+          <Image src={articleImg} className="recent-article-img" />
         </div>
+
         <div className="d-flex gap-3 justify-content-between w-100">
           <div>
             {toBeBookmarked ? (
@@ -38,9 +43,9 @@ export default function RecentArticleItem({
             )}
           </div>
           <div className="article-data-container">
-            <a href="/" className="recent-article-title">
+            <Link to="/" className="recent-article-title">
               {articleTitle.toUpperCase()}
-            </a>
+            </Link>
             {/* <p className="recent-article-desc my-2 fst-italic">{articleDesc}</p> */}
             <div className="recent-article-date-time-author-container">
               <p className="recent-article-author">By {articleAuthor}</p>
diff --git a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss
index 58fa843..c1491b3 100644
--- a/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss
+++ b/frontend/src/Components/Home/RecentArticles/RecentArticleItem/RecentArticleItem.scss
@@ -8,43 +8,12 @@
 // recent article parent container
 .recent-article-container {
   display: flex;
+  gap: 10px;
+  width: 55vw;
+  cursor: pointer;
 
-  @media (min-width: 100px) {
-    flex-direction: column;
-    gap: 15px;
-    width: 300px;
-  }
-
-  @media (min-width: 300px) {
-    flex-direction: column;
-    gap: 20px;
-    width: 200px;
-  }
-
-  @media (min-width: 375px) {
-    flex-direction: column;
-    width: 350px;
-  }
-
-  @media (min-width: 425px) and (max-width: 700px) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
-    width: 95vw;
-  }
-
-  @media (min-width: 760px) {
-    flex-direction: row;
-    gap: 20px;
-    width: 70vw;
-  }
-
-  @media (min-width: 992px) {
-    width: 30vw;
-    gap: 15px;
-  }
-
-  @media (min-width: 1400px) {
-    width: 900px;
-    gap: 20px;
   }
 }
 
@@ -61,7 +30,7 @@
   position: relative;
   object-fit: contain;
   object-position: center top;
-  width: 93vw;
+  width: 90vw;
   height: 100%;
 
   @media (min-width: 760px) {
@@ -94,7 +63,7 @@
   }
 
   @media (min-width: 300px) {
-    width: 90vw;
+    width: 80vw;
   }
 
   @media (min-width: 760px) {

From a9c10566243ff8fe6130b53d23ee3a97d9c0f683 Mon Sep 17 00:00:00 2001
From: davidgit3000 <davidkarik5@gmail.com>
Date: Tue, 9 Jul 2024 13:37:21 -0700
Subject: [PATCH 26/28] fixed username error when not logged in

---
 frontend/src/Components/Header/Header.jsx | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/frontend/src/Components/Header/Header.jsx b/frontend/src/Components/Header/Header.jsx
index 32fb2f7..1372d11 100644
--- a/frontend/src/Components/Header/Header.jsx
+++ b/frontend/src/Components/Header/Header.jsx
@@ -1,32 +1,29 @@
-import logo from "../../assets/logo.png";
-import avatar from "../../assets/avatar.jpg";
 import {
+  Button,
   Container,
+  Image,
   Nav,
   Navbar,
-  Image,
-  Stack,
   NavDropdown,
   OverlayTrigger,
   Popover,
-  Button,
-  DropdownButton,
-  ButtonGroup,
-  Dropdown,
+  Stack
 } from "react-bootstrap";
+import avatar from "../../assets/avatar.jpg";
 import SearchBar from "../SearchBar";
-import { SunFill, MoonFill } from "react-bootstrap-icons";
 
-import "./Header.scss";
-import { useState } from "react";
 import { useAuthContext } from "../../hooks/useAuthContext";
 import { useLogout } from "../../hooks/useLogout";
+import "./Header.scss";
 
 export default function Header() {
-  const [isDark, setIsDark] = useState(false);
   const { user } = useAuthContext();
   const { logout } = useLogout();
-  const { username } = JSON.parse(localStorage.getItem("user"));
+  const storedUser = localStorage.getItem("user");
+  let username = null;
+  if (storedUser) {
+    username = JSON.parse(storedUser).username;
+  }
 
   const handleLogout = () => {
     logout();

From cb4c93ea382ebddb71552b8d34707340e63ffd10 Mon Sep 17 00:00:00 2001
From: Darren52BT <darrenbt52@gmail.com>
Date: Tue, 9 Jul 2024 14:22:04 -0700
Subject: [PATCH 27/28] fixed loading and no results states

---
 .../ArticleResultsPage/ArticleResultsPage.jsx | 29 +++++++++++++++----
 .../ArticleResultsPage.scss                   | 12 ++++++--
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
index 6c4d9d2..8705975 100644
--- a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
+++ b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.jsx
@@ -6,7 +6,7 @@ import ArticleResult from "../../Components/ArticleResults/ArticleResult/Article
 import RelatedTags from "../../Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx";
 import useBookmark from "../../hooks/useBookmark.jsx";
 import "./ArticleResultsPage.scss";
-
+import { AiOutlineLoading3Quarters } from "react-icons/ai";
 const dummy_topic_tags = [
   { label: "Deep Learning" },
   { label: "Artifical Intelligence" },
@@ -55,9 +55,15 @@ export default function ArticleResultsPage({}) {
     }, 500);
   };
 
+  //holds whether article search has been attempted
+  const [searchAttempted, setSearchAttempted] = useState(false);
+
   useEffect(() => {
     const authUser = localStorage.getItem("user");
     const user = authUser ? JSON.parse(authUser) : undefined;
+
+    setSearchAttempted(false);
+
     const fetchArticles = async () => {
       try {
         const response = await fetch(
@@ -92,6 +98,8 @@ export default function ArticleResultsPage({}) {
         setPendingArticles(initPendingArticles);
       } catch (error) {
         toast.error(error.message);
+      } finally {
+        setSearchAttempted(true);
       }
     };
 
@@ -132,7 +140,8 @@ export default function ArticleResultsPage({}) {
               </span>
             </h2>
             <div className="d-flex flex-column gap-3">
-              {articles && articles.length > 0 ? (
+              {articles &&
+                articles.length > 0 &&
                 articles.map((article) => (
                   <ArticleResult
                     key={article.id}
@@ -140,9 +149,19 @@ export default function ArticleResultsPage({}) {
                     isPending={!!pendingArticles[article.id]}
                     bookmarkToggler={() => handleToggleBookmark(article.id)}
                   />
-                ))
-              ) : (
-                <h2>Your query did not match any results</h2>
+                ))}
+
+              {(!articles || articles.length === 0) && searchAttempted && (
+                <h2 className="no-article-results">
+                  Your query did not match any results
+                </h2>
+              )}
+
+              {!searchAttempted && (
+                <AiOutlineLoading3Quarters
+                  className="loading m-auto"
+                  style={{ fontSize: "40px" }}
+                />
               )}
             </div>
           </Col>
diff --git a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.scss b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.scss
index d5ed740..1f7774f 100644
--- a/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.scss
+++ b/frontend/src/pages/ArticleResultsPage/ArticleResultsPage.scss
@@ -13,6 +13,12 @@
   }
 }
 
+.no-article-results {
+  @include media-breakpoint-up(lg) {
+    padding-left: 20px;
+  }
+}
+
 .article-results-title-query {
   color: $primary;
 }
@@ -31,7 +37,8 @@
 }
 
 @include color-mode(light) {
-  .article-results-title {
+  .article-results-title,
+  .no-article-results {
     color: $primary-text-light;
   }
   .side-sections-container {
@@ -39,7 +46,8 @@
   }
 }
 @include color-mode(dark) {
-  .article-results-title {
+  .article-results-title,
+  .no-article-results {
     color: $primary-text-dark;
   }
   .side-sections-container {

From 4283c7c09c20bb856ddcb5597dd369ca66c48d68 Mon Sep 17 00:00:00 2001
From: plexin123 <67119125+plexin123@users.noreply.github.com>
Date: Thu, 15 Aug 2024 12:48:12 -0700
Subject: [PATCH 28/28] Change to env

change
---
 server/src/images/config.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/server/src/images/config.js b/server/src/images/config.js
index a5b0fb0..3e7e7be 100644
--- a/server/src/images/config.js
+++ b/server/src/images/config.js
@@ -1,11 +1,16 @@
 const cloudinary = require('cloudinary').v2;
+require("dotenv").config();
 // export const cloudinary1 = cloudinary
+// transit the data into .env
 cloudinary.config({
-    cloud_name: 'dfqmccik2',
-    api_key: '274176942952433',
-    api_secret: 'xTN2VnnA_ePTXg9eYlaFu-SNQtw'
+    cloud_name: pocess.env.CLOUD_NAME,
+    api_key: process.env.API_KEY,
+    api_secret: process.env.API_SECRET
 });
 
+
+process.env.PGUSER, 
+
 module.exports = {
     cloudinary1:cloudinary
 }