New UI for profile update requests page (#843)

* New UI for profile update requests page * Error handeling * Handle API behind feature flag * Style changes * Refactor filenames * Refactored some code * Renamed * Refactored css and added css variables
Real-Dev-Squad · Sep 28, 2024 · b392270 · b392270
1 parent d1726ed
commit b392270
Show file tree

Hide file tree

Showing 18 changed files with 1,631 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -86,7 +86,7 @@
         Create Goals
       </a>
       <a class="action-button" href="/task/index.html"> Create Tasks </a>
-      <a class="action-button" href="/profile/index.html"> Profile </a>
+      <a class="action-button" href="/profile"> Profile Diff </a>
       <a
         id="discord-user-link"
         class="action-button"
@@ -129,6 +129,13 @@
       <a class="action-button" href="/identity-service-logs/index.html"
         >Identity Service Logs</a
       >
+      <a
+        class="action-button element-display-remove"
+        href="/profile-diffs"
+        id="profile-update-requests"
+      >
+        Profile Update Requests
+      </a>
       <a
         class="action-button element-display-remove"
         href="/feed/index.html"

diff --git a/profile-diff-details/assets/left-arrow.svg b/profile-diff-details/assets/left-arrow.svg
diff --git a/profile-diff-details/constants.js b/profile-diff-details/constants.js
@@ -0,0 +1,22 @@
+const YEARS_OF_EXPERIENCE = 'yoe';
+
+const fieldDisplayName = Object.freeze({
+  first_name: 'First name',
+  last_name: 'Last name',
+  designation: 'Role',
+  company: 'Company',
+  yoe: 'Years of experience',
+  email: 'Email',
+  phone: 'Phone no.',
+  linkedin_id: 'Linkedin',
+  github_id: 'Github',
+  twitter_id: 'Twitter',
+  instagram_id: 'Instagram',
+  website: 'Website',
+});
+
+const Status = Object.freeze({
+  APPROVED: 'APPROVED',
+  PENDING: 'PENDING',
+  NOT_APPROVED: 'NOT APPROVED',
+});
diff --git a/profile-diff-details/index.html b/profile-diff-details/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/profile-diff-details/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <title>Profile Diff</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <a class="back" href="/profile-diffs/">
+        <img src="assets/left-arrow.svg" class="back__icon" alt="Back" />
+      </a>
+      Request Details
+    </header>
+    <div id="toast" class="hidden"></div>
+    <div class="container"></div>
+
+    <script src="/helpers/loadENV.js"></script>
+    <script src="/utils.js"></script>
+
+    <script src="/profile-diff-details/constants.js"></script>
+    <script src="/profile-diff-details/profileDiffDetails.utils.js"></script>
+    <script src="/profile-diff-details/profileDiffDetails.apiCalls.js"></script>
+    <script src="/profile-diff-details/script.js"></script>
+  </body>
+</html>
diff --git a/profile-diff-details/profileDiffDetails.apiCalls.js b/profile-diff-details/profileDiffDetails.apiCalls.js
@@ -0,0 +1,40 @@
+const getProfileDiff = async (id) => {
+  try {
+    const finalUrl = `${API_BASE_URL}/profileDiffs/${id}`;
+    const res = await fetch(finalUrl, {
+      credentials: 'include',
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+    if (res.status === 401) {
+      return { notAuthorized: true };
+    }
+    if (res.status === 404) {
+      return { profileDiffExist: false };
+    }
+    return { profileDiffExist: true, ...(await res.json()).profileDiff };
+  } catch (err) {
+    throw err;
+  }
+};
+
+const fetchUser = async (userId) => {
+  try {
+    const userResponse = await fetch(`${API_BASE_URL}/users?id=${userId}`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+    if (userResponse.status === 404) {
+      return { userExist: false };
+    }
+    const { user } = await userResponse.json();
+    return { ...user, userExist: true };
+  } catch (err) {
+    throw err;
+  }
+};
diff --git a/profile-diff-details/profileDiffDetails.utils.js b/profile-diff-details/profileDiffDetails.utils.js
@@ -0,0 +1,58 @@
+function getUserDataItem(data, itemName) {
+  const item = data[itemName];
+
+  if (item || (itemName === YEARS_OF_EXPERIENCE && item === 0)) {
+    return item;
+  }
+
+  return '';
+}
+
+function checkDifferentValues(primaryData, secondaryData) {
+  const diffValues = new Set();
+
+  for (const listItem in primaryData) {
+    const oldValue = getUserDataItem(primaryData, listItem);
+    const newValue = getUserDataItem(secondaryData, listItem);
+    const isValueEqual = String(oldValue).trim() === String(newValue).trim();
+
+    if (!isValueEqual) {
+      diffValues.add(listItem);
+    }
+  }
+
+  return diffValues;
+}
+
+function wantedData(data) {
+  const {
+    id,
+    first_name,
+    last_name,
+    email,
+    phone,
+    yoe,
+    company,
+    designation,
+    github_id,
+    linkedin_id,
+    twitter_id,
+    instagram_id,
+    website,
+  } = data;
+  return {
+    id,
+    first_name,
+    last_name,
+    email,
+    phone,
+    yoe,
+    company,
+    designation,
+    github_id,
+    linkedin_id,
+    twitter_id,
+    instagram_id,
+    website,
+  };
+}