share resource initial commit

frontend/src/App.js

@@ -12,6 +12,7 @@ import Header from "./Components/Navigation/Header";
 import Dashboard from "./Components/Dashboard/Dashboard";
 import ChatroomOverview from "./Components/Chat/ChatroomOverview";
 import Admin from "./Components/Admin/Admin";
+import ShareMain from "./Components/ResourceShare/ShareMain";
 
 function App() {
   return (
@@ -52,6 +53,9 @@ function App() {
         <Route path="/admin">
           <Admin />
         </Route>
+        <Route>
+          <ShareMain />
+        </Route>
       </Switch>
     </div>
   );

frontend/src/Components/Navigation/Header.js

@@ -35,6 +35,9 @@ const Header = () => {
           <Link to="/admin">
             <li>Admin Page</li>
           </Link>
+          <Link to="/resource">
+            <li>Resource Sharing</li>
+          </Link>
         </ul>
       </nav>
     </div>

frontend/src/Components/ResourceShare/DisplayLink.css

@@ -0,0 +1,19 @@
+.icon-upvote {
+  width: 55px;
+  height: 36px;
+  left: 238px;
+  top: 195.24px;
+}
+.icon-upvote:hover {
+  cursor: pointer;
+}
+.icon-downvote {
+  position: absolute;
+  width: 55px;
+  height: 36px;
+
+  transform: rotate(-180deg);
+}
+.icon-downvote:hover {
+  cursor: pointer;
+}

frontend/src/Components/ResourceShare/DisplayLink.js

@@ -0,0 +1,26 @@
+import React from "react";
+import upDownVote from "./upDownvote.png";
+import "./DisplayLink.css";
+const DisplayLink = (props) => {
+  return (
+    <div className="container-display-link">
+      <img
+        src={upDownVote}
+        alt="iconForUpvoteDownvote"
+        className="icon-upvote"
+      ></img>
+
+      <img
+        src={upDownVote}
+        alt="iconForUpvoteDownvote"
+        className="icon-downvote"
+      ></img>
+      <p>{props.link}</p>
+      <p>{props.linkName}</p>
+      <p>{props.userName}</p>
+      <hr />
+    </div>
+  );
+};
+
+export default DisplayLink;

frontend/src/Components/ResourceShare/ShareMain.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import Upload from "./Upload";
+import DisplayLink from "./DisplayLink";
+
+const ShareMain = () => {
+  const [uploadYes, setUploadYes] = useState(false);
+  const [link, setLinks] = useState([]);
+
+  const handleClick = () => {
+    setUploadYes(true);
+  };
+
+  const handleClickExit = () => {
+    setUploadYes(false);
+  };
+
+  useEffect(() => {
+    const getResource = async () => {
+      const result = await fetch("/getresource");
+      const links = await result.json();
+      console.log(links[0]);
+      setLinks(links);
+    };
+
+    getResource();
+  }, []);
+  return (
+    <div>
+      <h1>resourec main page</h1>
+      <button onClick={handleClick}>Upload</button>
+      {uploadYes ? <Upload exit={handleClickExit} /> : <div></div>}
+
+      {link.length === 0 ? (
+        <div>Loading ...</div>
+      ) : (
+        link.map((e) => (
+          <DisplayLink
+            link={e.link}
+            linkName={e.linkName}
+            userName={e.userName}
+            key={e._id}
+          />
+        ))
+      )}
+    </div>
+  );
+};
+
+export default ShareMain;

frontend/src/Components/ResourceShare/Upload.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+
+const Upload = (props) => {
+  const [link, setLink] = useState("");
+  const [linkName, setLinkName] = useState("");
+
+  const handleClickUpload = () => {
+    fetch("/resourceupload", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        link: link,
+        linkName: linkName,
+        userName: document.cookie
+          .split("; ")
+          .find((row) => row.startsWith("access-token"))
+          .split("=")[1],
+      }),
+    });
+
+    setLink("");
+    setLinkName("");
+  };
+
+  return (
+    <div>
+      <dialog open>
+        <label htmlFor="resourceName">Link Name</label>
+        <input
+          type="text"
+          placeholder="Enter name to be displayed"
+          name="resourceName"
+          value={linkName}
+          onChange={(e) => setLinkName(e.target.value)}
+        ></input>
+        <label htmlFor="resourceLink">Link</label>
+        <input
+          type="text"
+          placeholder="enter or paste a URL"
+          name="resourceLink"
+          value={link}
+          onChange={(e) => setLink(e.target.value)}
+        ></input>
+        <button onClick={props.exit}>Exit</button>
+        <button onClick={handleClickUpload}>Upload</button>
+      </dialog>
+    </div>
+  );
+};
+
+export default Upload;

getresource.js

@@ -0,0 +1,24 @@
+const { MongoClient } = require("mongodb");
+
+module.exports = async function (emptyArray) {
+  const uri = process.env.DB_CREDENTIALS;
+
+  const client = new MongoClient(uri, { useUnifiedTopology: true });
+  let successOrFail = false;
+
+  try {
+    await client.connect();
+
+    const database = client.db("4learn");
+    const collection = database.collection("Resource");
+
+    // create js obj received by /login
+
+    const result = await collection.find();
+
+    await result.forEach((result) => emptyArray.push(result));
+  } finally {
+    await client.close();
+    return emptyArray;
+  }
+};

index.js

@@ -14,6 +14,8 @@ const hostAddQuestion = require("./hostaddquestion");
 const adminQuestion = require("./adminquestion");
 const adminDeletequestion = require("./admindeletequestion");
 const adminViewquestion = require("./adminviewquestion");
+const uploadResource = require("./uploadresource");
+const getResource = require("./getresource");
 
 const auth = require("./auth");
 const jwt = require("jsonwebtoken");
@@ -22,6 +24,7 @@ const { v4: uuidv4 } = require("uuid");
 
 const jwt_decode = require("jwt-decode");
 const querworkspace = require("./querworkspace");
+const { link } = require("fs");
 
 require("dotenv").config();
 
@@ -253,6 +256,24 @@ app.post("/hostaddquestion/:roomId", async (req, res) => {
   res.send("added");
 });
 
+app.post("/resourceupload", async (req, res) => {
+  console.log("request received");
+  const link = req.body.link;
+  const linkName = req.body.linkName;
+
+  const userName = jwt_decode(req.body.userName).userName;
+  const result = await uploadResource(userName, link, linkName);
+
+  res.send("success");
+});
+
+app.get("/getresource", async (req, res) => {
+  const data = [];
+  const result = await getResource(data);
+  console.log(result);
+  res.json(data);
+});
+
 http.listen(PORT, (req, res) => {
   console.log(`listening on port ${PORT}`);
 });

uploadresource.js

@@ -0,0 +1,26 @@
+const { MongoClient } = require("mongodb");
+
+module.exports = async function (userName, link, linkName) {
+  const uri = process.env.DB_CREDENTIALS;
+
+  const client = new MongoClient(uri);
+  let successOrFail = false;
+  try {
+    await client.connect();
+
+    const database = client.db("4learn");
+    const collection = database.collection("Resource");
+
+    const doc = { userName: userName, link: link, linkName: linkName };
+    const result = await collection.insertOne(doc);
+
+    console.log(`${result.insertedCount} documents were inserted into db`);
+    console.log(result.insertedCount > 0);
+    if (result.insertedCount > 0) {
+      successOrFail = true;
+      return true;
+    }
+  } finally {
+    await client.close();
+  }
+};