From d0afefde7ec9a69c40e9b89bfc39c5c705f9cc72 Mon Sep 17 00:00:00 2001
From: Sofia Bilous <EgikSonya@gmail.com>
Date: Thu, 4 Apr 2024 17:05:03 +0300
Subject: [PATCH] StarForLike, CategoryBadges

---
 .../components/CompanyCard/CompanyCard.jsx    | 60 ++++---------------
 .../CompanyCard/CompanyCard.module.css        |  5 --
 .../MiniComponents/CategoryBadges.jsx         | 31 ++++++++++
 .../components/MiniComponents/StarForLike.jsx | 38 ++++++++++++
 .../MiniComponents/StarForLike.module.css     |  4 ++
 .../ProfileDetail/MainInfo/TitleInfo.jsx      | 51 +++-------------
 .../components/profileList/ProfileCard.jsx    | 51 +++-------------
 7 files changed, 99 insertions(+), 141 deletions(-)
 create mode 100644 FrontEnd/src/components/MiniComponents/CategoryBadges.jsx
 create mode 100644 FrontEnd/src/components/MiniComponents/StarForLike.jsx
 create mode 100644 FrontEnd/src/components/MiniComponents/StarForLike.module.css

diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.jsx b/FrontEnd/src/components/CompanyCard/CompanyCard.jsx
index 2fc2b280b..172f253fc 100644
--- a/FrontEnd/src/components/CompanyCard/CompanyCard.jsx
+++ b/FrontEnd/src/components/CompanyCard/CompanyCard.jsx
@@ -1,11 +1,13 @@
 import { Link } from 'react-router-dom';
-import { StarOutlined, StarFilled } from '@ant-design/icons';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';
 import styles from './CompanyCard.module.css';
 import { useAuth } from '../../hooks';
 import PropTypes from 'prop-types';
-import { Tooltip, Badge } from 'antd';
+import { Tooltip } from 'antd';
+import CategoryBadges from '../MiniComponents/CategoryBadges';
+import StarForLike from '../MiniComponents/StarForLike';
+
 import axios from 'axios';
 
 export default function CompanyCard({
@@ -57,53 +59,6 @@ export default function CompanyCard({
     }
   };
 
-  const filledStar = (
-    <StarFilled
-      className={styles['star']}
-      onClick={handleClick}
-      data-testid="star"
-    />
-  );
-  const outlinedStar = (
-    <StarOutlined
-      className={styles['star']}
-      onClick={handleClick}
-      data-testid="emptystar"
-    />
-  );
-  const getStar = () => {
-    return isAuthorized && !ownProfile
-      ? profile.is_saved
-        ? filledStar
-        : outlinedStar
-      : null;
-  };
-
-  const CategoryBadges = ({ categories }) => {
-    const style = {
-      backgroundColor: '#1F9A7C',
-      fontWeight: 600,
-      fontFamily: 'Inter',
-      fontSize: 10,
-      margin: 5,
-    };
-    return (
-      <div>
-        {categories
-          ? categories.map((category) => (
-              <Badge
-                title=""
-                key={category.id}
-                size="medium"
-                count={category.name.toUpperCase()}
-                style={style}
-              />
-            ))
-          : null}
-      </div>
-    );
-  };
-
   return (
     <div className={styles['company-card']}>
       <div className={styles['company-card__block']}>
@@ -168,7 +123,12 @@ export default function CompanyCard({
                 <CategoryBadges categories={profile.categories.slice(0, 3)} />
               </div>
             </Tooltip>
-            {getStar()}
+            <StarForLike
+              isSaved={profile.is_saved}
+              isAuthorized={isAuthorized}
+              ownProfile={ownProfile}
+              handleClick={handleClick}
+            ></StarForLike>
           </div>
         </div>
       </div>
diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
index b0bf35cb8..b12702bcd 100644
--- a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
+++ b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -180,8 +180,3 @@
 .company-card__buttons:hover {
   cursor: pointer;
 }
-
-.star {
-  color: #ffd800;
-  font-size: 24px;
-}
diff --git a/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx b/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx
new file mode 100644
index 000000000..84e5641f8
--- /dev/null
+++ b/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx
@@ -0,0 +1,31 @@
+import { Badge } from 'antd';
+import PropTypes from 'prop-types';
+
+export default function CategoryBadges({ categories }) {
+  const style = {
+    backgroundColor: '#1F9A7C',
+    fontWeight: 600,
+    fontFamily: 'Inter',
+    fontSize: 10,
+    margin: 5,
+  };
+  return (
+    <div>
+      {categories
+        ? categories.map((category) => (
+            <Badge
+              title=""
+              key={category.id}
+              size="medium"
+              count={category.name.toUpperCase()}
+              style={style}
+            />
+          ))
+        : null}
+    </div>
+  );
+}
+
+CategoryBadges.propTypes = {
+  categories: PropTypes.array,
+};
diff --git a/FrontEnd/src/components/MiniComponents/StarForLike.jsx b/FrontEnd/src/components/MiniComponents/StarForLike.jsx
new file mode 100644
index 000000000..acaee65a7
--- /dev/null
+++ b/FrontEnd/src/components/MiniComponents/StarForLike.jsx
@@ -0,0 +1,38 @@
+import { StarOutlined, StarFilled } from '@ant-design/icons';
+import PropTypes from 'prop-types';
+
+import styles from './StarForLike.module.css';
+
+export default function StarForLike({
+  isSaved,
+  isAuthorized,
+  ownProfile,
+  handleClick,
+}) {
+  const filledStar = (
+    <StarFilled
+      className={styles['star']}
+      onClick={handleClick}
+      data-testid="star"
+    />
+  );
+  const outlinedStar = (
+    <StarOutlined
+      className={styles['star']}
+      onClick={handleClick}
+      data-testid="emptystar"
+    />
+  );
+  return isAuthorized && !ownProfile
+    ? isSaved
+      ? filledStar
+      : outlinedStar
+    : null;
+}
+
+StarForLike.propTypes = {
+  isSaved: PropTypes.bool,
+  isAuthorized: PropTypes.bool,
+  ownProfile: PropTypes.bool,
+  handleClick: PropTypes.func,
+};
diff --git a/FrontEnd/src/components/MiniComponents/StarForLike.module.css b/FrontEnd/src/components/MiniComponents/StarForLike.module.css
new file mode 100644
index 000000000..f06b39487
--- /dev/null
+++ b/FrontEnd/src/components/MiniComponents/StarForLike.module.css
@@ -0,0 +1,4 @@
+.star {
+  color: #ffd800;
+  font-size: 24px;
+}
diff --git a/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx b/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx
index acd12d152..707d3e853 100644
--- a/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx
+++ b/FrontEnd/src/components/ProfileDetail/MainInfo/TitleInfo.jsx
@@ -1,8 +1,6 @@
 import axios from 'axios';
 import { useState, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Badge } from 'antd';
-import { StarOutlined, StarFilled } from '@ant-design/icons';
 import { PropTypes } from 'prop-types';
 import classNames from 'classnames';
 import useSWRMutation from 'swr/mutation';
@@ -10,6 +8,8 @@ import useSWRMutation from 'swr/mutation';
 import { useAuth } from '../../../hooks';
 import DefaultLogo from './DefaultLogo';
 import classes from './TitleInfo.module.css';
+import CategoryBadges from '../../MiniComponents/CategoryBadges';
+import StarForLike from '../../MiniComponents/StarForLike';
 
 function TitleInfo({ isAuthorized, data }) {
   const { user } = useAuth();
@@ -66,47 +66,6 @@ function TitleInfo({ isAuthorized, data }) {
     navigate('/profile/user-info');
   };
 
-  const filledStar = (
-    <StarFilled
-      style={{ color: '#FFD800', fontSize: '24px' }}
-      onClick={handleClick}
-    />
-  );
-  const outlinedStar = (
-    <StarOutlined
-      style={{ color: '#FFD800', fontSize: '24px' }}
-      onClick={handleClick}
-    />
-  );
-
-  const getStarVisibility = () => {
-    if (isAuthorized) {
-      return isSaved ? filledStar : outlinedStar;
-    }
-  };
-
-  const CategoryBadges = ({ categories }) => {
-    return (
-      <>
-        {categories
-          ? categories.map((category) => (
-              <Badge
-                key={category.id}
-                size="medium"
-                count={category.name.toUpperCase()}
-                style={{
-                  backgroundColor: '#1F9A7C',
-                  fontWeight: 600,
-                  fontFamily: 'Inter',
-                  fontSize: 10,
-                }}
-              />
-            ))
-          : ''}
-      </>
-    );
-  };
-
   return (
     <div className={classes['title-block']}>
       <div className={classes['title-block__logo']}>
@@ -153,7 +112,11 @@ function TitleInfo({ isAuthorized, data }) {
               >
                 {!isSaved ? 'Додати в збережені' : 'Додано в збережені'}
               </span>
-              {getStarVisibility()}
+              <StarForLike
+                isSaved={isSaved}
+                isAuthorized={isAuthorized}
+                ownProfile={ownProfile}
+              ></StarForLike>
             </button>
           )}
           {ownProfile && (
diff --git a/FrontEnd/src/components/profileList/ProfileCard.jsx b/FrontEnd/src/components/profileList/ProfileCard.jsx
index 782faa84f..5c14b0fb0 100644
--- a/FrontEnd/src/components/profileList/ProfileCard.jsx
+++ b/FrontEnd/src/components/profileList/ProfileCard.jsx
@@ -1,8 +1,7 @@
 import { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Badge, Typography } from 'antd';
-import { StarOutlined, StarFilled } from '@ant-design/icons';
+import { Typography } from 'antd';
 import { PropTypes } from 'prop-types';
 import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';
@@ -10,6 +9,8 @@ import useSWRMutation from 'swr/mutation';
 import { useAuth } from '../../hooks';
 import css from './ProfileCard.module.css';
 import axios from 'axios';
+import CategoryBadges from '../MiniComponents/CategoryBadges';
+import StarForLike from '../MiniComponents/StarForLike';
 
 const { Paragraph } = Typography;
 
@@ -61,41 +62,6 @@ export default function ProfileCard({ isAuthorized, data }) {
     }
   };
 
-  const filledStar = (
-    <StarFilled
-      style={{ color: '#FFD800', fontSize: '24px' }}
-      onClick={handleClick}
-    />
-  );
-  const outlinedStar = (
-    <StarOutlined
-      style={{ color: '#FFD800', fontSize: '24px' }}
-      onClick={handleClick}
-    />
-  );
-
-  const CategoryBadges = ({ categories }) => {
-    return (
-      <>
-        {categories
-          ? categories.map((category) => (
-              <Badge
-                key={category.id}
-                size="medium"
-                count={category.name.toUpperCase()}
-                style={{
-                  backgroundColor: '#1F9A7C',
-                  fontWeight: 600,
-                  fontFamily: 'Inter',
-                  fontSize: 10,
-                }}
-              />
-            ))
-          : ''}
-      </>
-    );
-  };
-
   return (
     <div className={css['company-card']}>
       <Link
@@ -134,11 +100,12 @@ export default function ProfileCard({ isAuthorized, data }) {
           </div>
         </div>
       </Link>
-      {isAuthorized && !ownProfile
-        ? isSaved
-          ? filledStar
-          : outlinedStar
-        : null}
+      <StarForLike
+        isSaved={isSaved}
+        isAuthorized={isAuthorized}
+        ownProfile={ownProfile}
+        handleClick={handleClick}
+      ></StarForLike>
     </div>
   );
 }