From 8be8acfa19ba62fe7e262d432a5b3deb935f28a3 Mon Sep 17 00:00:00 2001
From: JoshDagat <josuer.online.work@gmail.com>
Date: Sat, 30 Sep 2023 12:27:25 +0800
Subject: [PATCH] bt-884: * Admin UI fix + message parsing

---
 .../components/profile/profile.tsx            | 209 +++++++++++-------
 .../components/profile/styles.module.scss     |  83 ++++++-
 .../src/helpers/parse-messages.helper.tsx     |   7 +-
 3 files changed, 207 insertions(+), 92 deletions(-)

diff --git a/frontend/src/bundles/admin-panel/components/profile/profile.tsx b/frontend/src/bundles/admin-panel/components/profile/profile.tsx
index f2fabb2d1..96db4678c 100644
--- a/frontend/src/bundles/admin-panel/components/profile/profile.tsx
+++ b/frontend/src/bundles/admin-panel/components/profile/profile.tsx
@@ -7,6 +7,7 @@ import {
     Grid,
     Typography,
 } from '~/bundles/common/components/components.js';
+import { getValidClassNames } from '~/bundles/common/helpers/helpers.js';
 import { mapBsaBadges } from '~/bundles/lms/helpers/map-bsa-badges.js';
 
 import { type UserDetailsFullResponseDto } from '../../types/types.js';
@@ -166,101 +167,147 @@ const Profile: React.FC<Properties> = ({ userDetails, selectedRole }) => {
                         </Grid>
                     </Grid>
                 ) : (
-                    <Grid>
-                        <Grid className={styles.textInfo}>
+                    <Grid className={styles.layoutEmployer}>
+                        <Grid className={styles.employerCard}>
                             <Avatar
                                 className={styles.companyLogo}
                                 src={userDetails.companyLogo?.url}
                             />
-
-                            <Grid container item className={styles.row}>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.name}
-                                >
-                                    Employer position
-                                </Typography>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.value}
+                            <Grid className={styles.employerDetails}>
+                                <Grid
+                                    container
+                                    item
+                                    className={getValidClassNames(
+                                        styles.row,
+                                        styles.position,
+                                    )}
                                 >
-                                    {userDetails.employerPosition}
-                                </Typography>
-                            </Grid>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.name}
+                                    >
+                                        Employer position
+                                    </Typography>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.value}
+                                    >
+                                        {userDetails.employerPosition}
+                                    </Typography>
+                                </Grid>
 
-                            <Grid container item className={styles.row}>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.name}
-                                >
-                                    Company name
-                                </Typography>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.value}
+                                <Grid
+                                    container
+                                    item
+                                    className={getValidClassNames(
+                                        styles.row,
+                                        styles.companyName,
+                                    )}
                                 >
-                                    {userDetails.companyName}
-                                </Typography>
-                            </Grid>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.name}
+                                    >
+                                        Company name
+                                    </Typography>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.value}
+                                    >
+                                        {userDetails.companyName}
+                                    </Typography>
+                                </Grid>
 
-                            <Grid container item className={styles.row}>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.name}
-                                >
-                                    Company website
-                                </Typography>
-                                <a
-                                    href={userDetails.companyWebsite as string}
-                                    className={styles.valueLink}
+                                <Grid
+                                    container
+                                    item
+                                    className={getValidClassNames(
+                                        styles.row,
+                                        styles.website,
+                                    )}
                                 >
-                                    Website link
-                                </a>
-                            </Grid>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.name}
+                                    >
+                                        Company website
+                                    </Typography>
+                                    <a
+                                        href={
+                                            userDetails.companyWebsite as string
+                                        }
+                                        className={styles.valueLink}
+                                    >
+                                        Website link
+                                    </a>
+                                </Grid>
 
-                            <Grid container item className={styles.row}>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.name}
+                                <Grid
+                                    container
+                                    item
+                                    className={getValidClassNames(
+                                        styles.row,
+                                        styles.location,
+                                    )}
                                 >
-                                    Location
-                                </Typography>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.value}
-                                >
-                                    {userDetails.location}
-                                </Typography>
-                            </Grid>
-
-                            <Grid container item className={styles.row}>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.name}
-                                >
-                                    Description
-                                </Typography>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.value}
-                                >
-                                    {userDetails.description}
-                                </Typography>
-                            </Grid>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.name}
+                                    >
+                                        Location
+                                    </Typography>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.value}
+                                    >
+                                        {userDetails.location}
+                                    </Typography>
+                                </Grid>
 
-                            <Grid container item className={styles.row}>
-                                <Typography
-                                    variant="body1"
-                                    className={styles.name}
+                                <Grid
+                                    container
+                                    item
+                                    className={getValidClassNames(
+                                        styles.row,
+                                        styles.employerLinkedIn,
+                                    )}
                                 >
-                                    Linkedin Link
-                                </Typography>
-                                <a
-                                    href={userDetails.linkedinLink as string}
-                                    className={styles.valueLink}
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.name}
+                                    >
+                                        Linkedin Link
+                                    </Typography>
+                                    <a
+                                        href={
+                                            userDetails.linkedinLink as string
+                                        }
+                                        className={styles.valueLink}
+                                    >
+                                        Linkedin link
+                                    </a>
+                                </Grid>
+                                <Grid
+                                    container
+                                    item
+                                    className={getValidClassNames(
+                                        styles.row,
+                                        styles.description,
+                                    )}
                                 >
-                                    Linkedin link
-                                </a>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.name}
+                                    >
+                                        Description
+                                    </Typography>
+                                    <Typography
+                                        variant="body1"
+                                        className={styles.value}
+                                    >
+                                        {userDetails.description}
+                                    </Typography>
+                                </Grid>
                             </Grid>
                         </Grid>
                     </Grid>
diff --git a/frontend/src/bundles/admin-panel/components/profile/styles.module.scss b/frontend/src/bundles/admin-panel/components/profile/styles.module.scss
index 7d7cb4889..e9f375e3b 100644
--- a/frontend/src/bundles/admin-panel/components/profile/styles.module.scss
+++ b/frontend/src/bundles/admin-panel/components/profile/styles.module.scss
@@ -11,6 +11,84 @@
     max-width: 300px;
 }
 
+.layoutEmployer {
+    display: flex;
+    flex-direction: column;
+}
+
+.companyLogo {
+    width: 130px;
+    height: 130px;
+}
+
+.layoutEmployer .companyLogo {
+    margin-right: auto;
+    margin-bottom: 20px;
+    margin-left: auto;
+}
+
+.employerDetails {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    max-width: 80%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media screen and (width >= 1250px) {
+    .layoutEmployer {
+        width: 100%;
+    }
+
+    .employerCard {
+        display: flex;
+        flex-grow: 1;
+        width: 100%;
+    }
+
+    .employerCard .companyLogo {
+        margin-right: 50px;
+    }
+
+    .employerDetails {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas:
+            "company position"
+            "website location"
+            "linkin ."
+            "description description";
+        grid-auto-rows: 40px;
+        flex: 1;
+
+        & .position {
+            grid-area: position;
+        }
+
+        & .companyName {
+            grid-area: company;
+        }
+
+        & .website {
+            grid-area: website;
+        }
+
+        & .location {
+            grid-area: location;
+        }
+
+        & .description {
+            grid-area: description;
+        }
+
+        & .employerLinkedIn {
+            grid-area: linkin;
+        }
+    }
+}
+
 .row {
     flex-direction: row;
     gap: 20px;
@@ -64,11 +142,6 @@
     width: 100%;
 }
 
-.companyLogo {
-    width: 130px;
-    height: 130px;
-}
-
 @media screen and (width <=1100px) {
     .row {
         & .name {
diff --git a/frontend/src/helpers/parse-messages.helper.tsx b/frontend/src/helpers/parse-messages.helper.tsx
index 6bbb1c86d..1e6fe72bb 100644
--- a/frontend/src/helpers/parse-messages.helper.tsx
+++ b/frontend/src/helpers/parse-messages.helper.tsx
@@ -1,9 +1,6 @@
 const URL_REGEX =
     /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/|www\.|localhost:)?(localhost|[\da-z]+([.-][\da-z]+)*\.[a-z]{2,5}(:\d{1,5})?(\/.*)?)$/gm;
 
-// TODO: LOCALHOST SHOULD BE REMOVED FOR PROD
-const LOCALHOST_URL_REGEX = /^https?:\/\/\w+(\.\w+)*(:\d+)?(\/.*)?$/gm;
-
 const parseMessage = (message: string): JSX.Element => {
     const words = message.split(' ');
 
@@ -11,9 +8,7 @@ const parseMessage = (message: string): JSX.Element => {
         <span>
             {words.map((word) => {
                 const [link, specialPrefix] = word.split('_&_').reverse();
-                const isLink =
-                    URL_REGEX.test(link) || LOCALHOST_URL_REGEX.test(link);
-
+                const isLink = URL_REGEX.test(link);
                 const isCVLink = isLink && specialPrefix === 'CV';
                 const isProfileLink = isLink && specialPrefix === 'Profile';