Merge pull request #503 from ita-social-projects/#502MiniComponents

StarForLike, CategoryBadges
ita-social-projects · Apr 5, 2024 · 6c4cb7b · 6c4cb7b
2 parents e1ac07c + d0afefd
commit 6c4cb7b
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 141 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,15 +1,15 @@
 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';
 
 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
@@ -1,15 +1,16 @@
 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';
 
 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>
   );
 }