Refactor data fetching logic in Companies component, fix StarForLike

FrontEnd/src/components/CompanyCard/CompanyCard.jsx

@@ -139,12 +139,6 @@ export default function CompanyCard({
                   <CategoryBadges categories={profile.categories.slice(0, 3)} />
                 </div>
               </Tooltip>
-                <StarForLike
-                  isSaved={profile.is_saved}
-                  isAuthorized={isAuthorized}
-                  ownProfile={ownProfile}
-                  handleClick={profile.is_saved ? handleDeleteSaved : handleSave}
-                />
             </div>
           </div>
         </div>
@@ -164,6 +158,14 @@ export default function CompanyCard({
           )}
         </div>
       </Link>
+      <div className={styles['company-card__star']}>
+        <StarForLike
+          isSaved={profile.is_saved}
+          isAuthorized={isAuthorized}
+          ownProfile={ownProfile}
+          handleClick={profile.is_saved ? handleDeleteSaved : handleSave}
+        />
+      </div>
     </div>
   );
 }

FrontEnd/src/components/CompanyCard/CompanyCard.module.css

@@ -156,6 +156,12 @@
   object-fit: cover;
 }
 
+.company-card__star {
+  position: absolute;
+  left: 296px;
+  bottom: 13px;
+}
+
 @media only screen and (min-width: 1200px) {
 
   .company-card,

FrontEnd/src/pages/LandingPage/Companies/Companies.jsx

@@ -1,28 +1,28 @@
 import axios from 'axios';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import useWindowWidth from '../../../hooks/useWindowWidth';
 import { Link } from 'react-router-dom';
 import styles from './Companies.module.css';
+import Loader from '../../../components/Loader/Loader';
 import CompanyCard from '../../../components/CompanyCard/CompanyCard';
 import PropTypes from 'prop-types';
 import useSWR from 'swr';
 import { Col, Row } from 'antd';
 
 const MainCompanies = ({ isAuthorized }) => {
   const baseUrl = process.env.REACT_APP_BASE_API_URL;
-  const [searchResults, setSearchResults] = useState([]);
-  const [newMembers, setNewMembers] = useState(true);
+  const [searchResults, setSearchResults] = useState(null);
   const windowWidth = useWindowWidth();
 
   const fetcher = async (url) => {
     const data = await axios.get(url);
-    setSearchResults(data.data.results);
     return data.data.results;
   };
 
-  const { data: companylist } = useSWR(
+  useSWR(
     `${baseUrl}/api/profiles/?ordering=-completeness,-created_at&page_size=4`,
-    fetcher
+    fetcher,
+    {onSuccess: (data) => setSearchResults(data)}
   );
 
   const changeCompanies = (id, isSaved) => {
@@ -35,16 +35,8 @@ const MainCompanies = ({ isAuthorized }) => {
     setSearchResults(newCompanies);
   };
 
-  useEffect(() => {
-    if (newMembers) {
-      setNewMembers(false);
-    }
-  }, [newMembers, companylist, searchResults]);
-
-  const companyDataList = searchResults;
-
   const linkText = windowWidth >= 768 ? 'Всі підприємства' : 'Всі';
-  const antdGutter = windowWidth >= 1200 ? [0, 24] : [0, 24];
+  const antdGutter = windowWidth >= 1200 ? [24, 24] : [0, 24];
   const antdWrap = windowWidth < 1200;
 
   return (
@@ -57,14 +49,14 @@ const MainCompanies = ({ isAuthorized }) => {
           <Link to="profiles">
             <p>{linkText}
               <img src="svg/arrow.svg" alt="Arrow icon for all companies link" />
-
             </p>
           </Link>
         </div>
       </div>
       <div className={styles['new-companies-block']}>
+        {searchResults ?
         <Row justify={'start'} gutter={antdGutter} wrap={antdWrap}>
-          {companyDataList.map((result, resultIndex) => (
+          {searchResults?.map((result, resultIndex) => (
             <Col key={resultIndex} xs={24} md={12} xl={8} xxl={6}>
               <CompanyCard
                 profile={result}
@@ -74,6 +66,8 @@ const MainCompanies = ({ isAuthorized }) => {
             </Col>
           ))}
         </Row>
+        :
+        <Loader />}
       </div>
     </div>
   );