CyrielleAlbert · CyrielleAlbert · Oct 29, 2022 · Oct 30, 2022 · Mar 12, 2023 · Mar 24, 2023
diff --git a/package.json b/package.json
@@ -13,10 +13,11 @@
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
+    "react-feather": "^2.0.10",
     "react-linkedin-login-oauth2": "^2.0.0",
     "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.0.0",
+    "react-scripts": "5.0.0",
     "react-social-icons": "^5.13.0",
     "react-uuid": "^1.0.2",
     "redux": "^4.1.0",
@@ -49,5 +50,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "react-error-overlay": "6.0.9"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
+
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Protolk</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>Protolk</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +40,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -1,36 +1,37 @@
 import "./App.css";
-import React, { Component } from "react";
+import React from "react";
 import { Provider } from "react-redux";
 import Store from "./Store";
 // import VideoSession from './Components/videoSession'
 // import Home from "./Pages/Home"
 import SessionPage from "./Pages/SessionPage.jsx";
 import { HomePage } from "./Pages/HomePage";
-import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { LoginPage } from "./Pages/LoginPage";
 import { LinkedInCallback } from "react-linkedin-login-oauth2";
+import * as Router from "./router.js";
+import { Dashboard } from "./Pages/Dashboard";
 
-class App extends Component {
-  constructor() {
-    super();
-  }
-
-  render() {
-    return (
-      <Provider store={Store}>
-        <BrowserRouter>
-          <div>
-            <Switch>
-              <Route path="/" component={HomePage} exact />
-              <Route exact path="/linkedin" component={LinkedInCallback} />
-              <Route path="/Login" component={LoginPage} />
-              <Route path="/Session" component={SessionPage} />
-            </Switch>
-          </div>
-        </BrowserRouter>
-      </Provider>
-    );
-  }
-}
+export const App = () => {
+  return (
+    <Provider store={Store}>
+      <BrowserRouter>
+        <div>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route
+              exact
+              path={Router.path.linkedin}
+              element={<LinkedInCallback />}
+            />
+            <Route path={Router.path.login} element={<LoginPage />} />
+            <Route path={Router.path.dashboard} element={<Dashboard />} />
+            <Route path="/Session" element={<SessionPage />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </Provider>
+  );
+};
 
 export default App;
diff --git a/src/Components/Dashboard/ProfileBox.jsx b/src/Components/Dashboard/ProfileBox.jsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { useLinkedInProfile } from "../../Requests/useLinkedInProfile";
+import { useTags } from "../../Requests/useTags";
+import { Card } from "../shared/Card";
+
+export const ProfileBox = () => {
+  const { profile, token, loading } = useLinkedInProfile();
+  const { tags } = useTags({ token });
+
+  return (
+    <Card positions={[2, 3, 1, 2]} title="My profile" editable={true}>
+      {loading || !profile || !tags ? (
+        <p>Loading...</p>
+      ) : (
+        <>
+          <img
+            src={
+              profile.profilePicture["displayImage~"].elements[3].identifiers[0]
+                .identifier
+            }
+            alt="Avatar"
+            style={{
+              borderRadius: "50%",
+              width: 75,
+              height: 75,
+              marginTop: 24,
+            }}
+          />
+          <p
+            style={{ marginBottom: 0 }}
+          >{`${profile.firstName.localized.xx_XX} ${profile.lastName.localized.xx_XX}`}</p>
+          <p style={{ fontSize: 16, color: "#A6A6A6", marginTop: 0 }}>
+            Frontend developer @Telia
+          </p>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              justifyContent: "center",
+            }}
+          >
+            {tags.map((tag) => {
+              return (
+                <div
+                  key={tag.id}
+                  style={{
+                    backgroundColor: tag.color_hex,
+                    color: "white",
+                    borderRadius: 16,
+                    padding: "4px 8px 4px 8px",
+                    margin: "4px 2px 4px 2px",
+                    fontSize: 10,
+                  }}
+                >{`#${tag.value}`}</div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </Card>
+  );
+};
diff --git a/src/Components/Dashboard/ProfilesSuggestion.jsx b/src/Components/Dashboard/ProfilesSuggestion.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Card } from "../shared/Card";
+
+export const ProfilesSuggestion = () => {
+  return (
+    <Card
+      positions={[1, 2, 1, 4]}
+      title="You should also meet"
+      editable={false}
+    ></Card>
+  );
+};
diff --git a/src/Components/Dashboard/Rooms.jsx b/src/Components/Dashboard/Rooms.jsx
@@ -0,0 +1,169 @@
+import React, { useEffect } from "react";
+import { Search, Users, Video } from "react-feather";
+import { useRooms } from "../../Requests/useRooms";
+import { Card } from "../shared/Card";
+
+export const Rooms = () => {
+  const { rooms, loading } = useRooms();
+  const [searchValue, setSearchValue] = React.useState("");
+  useEffect(() => {
+    console.log("rooms", rooms);
+  }, [rooms]);
+  return (
+    <Card positions={[2, 5, 2, 4]} title="" editable={false}>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          paddingLeft: 8,
+          width: "auto",
+          margin: "1rem",
+        }}
+      >
+        <h2 style={{ margin: 0, fontSize: 20, fontWeight: "lighter" }}>
+          Find a room
+        </h2>
+        <div
+          style={{
+            backgroundColor: "white",
+            borderRadius: 32,
+            width: 200,
+            display: "flex",
+          }}
+        >
+          <Search size={24} color={"#2E294E"} style={{ margin: 8 }} />
+          <input
+            type={"text"}
+            placeholder="Search"
+            width={"auto"}
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            style={{
+              borderStyle: "none",
+              backgroundColor: "transparent",
+              outline: "none",
+            }}
+          />
+        </div>
+      </div>
+      {loading || !rooms || rooms.length === 0 ? (
+        <p>Loading...</p>
+      ) : (
+        <table
+          style={{
+            width: "auto",
+            margin: "1rem",
+            backgroundColor: "white",
+            borderCollapse: "separate",
+            borderSpacing: "0px 0.5rem",
+            borderRadius: "0.5rem",
+            textAlign: "left",
+          }}
+        >
+          <thead>
+            <tr
+              style={{
+                marginBottom: "0.5rem",
+                height: "2.373rem",
+                padding: 8,
+                borderBottom: " 1px solid #F7F7FA",
+              }}
+            >
+              <th style={{ width: "20%", paddingLeft: 8 }}>Name</th>
+              <th style={{ width: "20%" }}>Room number</th>
+              <th style={{ width: "20%" }}>Number of participants</th>
+              <th style={{ width: "20%" }}>Tags</th>
+              <th style={{ width: "10%" }} aria-label="action-join-room"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {rooms.map((room) => {
+              console.log(Object.keys(room));
+              return (
+                <tr
+                  key={room["Id"]}
+                  style={{
+                    marginBottom: "0.5rem",
+                    height: "2.375rem",
+                    backgroundColor: "#FDFDFE",
+                    border: "1px solid #F7F7FA",
+                  }}
+                >
+                  <td
+                    style={{
+                      textAlign: "left",
+                      paddingLeft: 8,
+                      paddingRight: 8,
+                    }}
+                  >
+                    {room.name}
+                  </td>
+                  <td style={{ paddingRight: 8 }}>{`#${room.id}`}</td>
+                  <td
+                    style={{
+                      paddingRight: 8,
+                    }}
+                  >
+                    <div style={{ display: "flex" }}>
+                      <Users size={24} style={{ marginRight: "1rem" }} />
+                      {room.number_participants}
+                    </div>
+                  </td>
+                  <td style={{ paddingRight: 8 }}>
+                    <div style={{ display: "flex" }}>
+                      {room.tags.map((tag) => {
+                        return (
+                          <div
+                            key={tag.name}
+                            style={{
+                              backgroundColor: tag.color,
+                              color: "white",
+                              borderRadius: 16,
+                              padding: "4px 8px 4px 8px",
+                              margin: "4px 2px 4px 2px",
+                              fontSize: 10,
+                            }}
+                          >{`#${tag.name}`}</div>
+                        );
+                      })}
+                    </div>
+                  </td>
+                  <td style={{ paddingRight: 8 }}>
+                    <button
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        backgroundColor: "#FF7F11",
+                        borderWidth: 0,
+                        padding: "4px 8px 4px 8px",
+                        borderRadius: 8,
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                        }}
+                      >
+                        <Video size={24} color={"white"} />
+                        <div
+                          style={{
+                            color: "white",
+                            fontSize: "1rem",
+                            paddingLeft: "1rem",
+                          }}
+                        >
+                          Join
+                        </div>
+                      </div>
+                    </button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      )}
+    </Card>
+  );
+};