Skip to content

Commit

Permalink
Merge pull request #886 from BinaryStudioAcademy/fix/bt-884-ui-improv…
Browse files Browse the repository at this point in the history 
…ements-message-parsing

bt-884:  Admin UI fix + message parsing
  • Loading branch information
@nikita-remeslov
nikita-remeslov authored Sep 30, 2023
2 parents 46c9b6a + 8be8acf commit 9bb8786
Show file tree
Hide file tree
Showing 3 changed files with 207 additions and 92 deletions.
209 changes: 128 additions & 81 deletions frontend/src/bundles/admin-panel/components/profile/profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
83 changes: 78 additions & 5 deletions frontend/src/bundles/admin-panel/components/profile/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -64,11 +142,6 @@
width: 100%;
}

.companyLogo {
width: 130px;
height: 130px;
}

@media screen and (width <=1100px) {
.row {
& .name {
Expand Down
7 changes: 1 addition & 6 deletions frontend/src/helpers/parse-messages.helper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,13 @@ import { Tooltip } from '~/bundles/common/components/components.js';
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(' ');
return (
<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';
const isVacancyPosition =
Expand Down

0 comments on commit 9bb8786

Please sign in to comment.