From dd19bc1959a80a1f28e8217de38f0c837c032d7e Mon Sep 17 00:00:00 2001
From: mazur <mazursasha1990@gmail.com>
Date: Thu, 26 Dec 2024 16:20:17 +0200
Subject: [PATCH] Modify SearchByNameAndAddressResult component

---
 .../SearchByNameAndAddressResult.jsx          | 210 ++----------------
 1 file changed, 14 insertions(+), 196 deletions(-)

diff --git a/src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx b/src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx
index 0d7048a54..d626a2d0a 100644
--- a/src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx
+++ b/src/react/src/components/Contribute/SearchByNameAndAddressResult.jsx
@@ -1,19 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { array, bool, func, object } from 'prop-types';
 import { connect } from 'react-redux';
-import { func, object, bool, array } from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import Typography from '@material-ui/core/Typography';
-
 import BackToSearchButton from './BackToSearchButton';
+import SearchByNameAndAddressSuccessResult from './SearchByNameAndAddressSuccessResult';
+import SearchByNameAndAddressNotFoundResult from './SearchByNameAndAddressNotFoundResult';
 import { contributeProductionLocationRoute } from '../../util/constants';
 import history from '../../util/history';
 import { fetchProductionLocations } from '../../actions/contributeProductionLocation';
-import ProductionLocationDetails from './ProductionLocationDetails';
-import COLOURS from '../../util/COLOURS';
 
-const makeSearchByNameAndAddressResultStyles = theme =>
+const makeSearchByNameAndAddressResultStyles = () =>
     Object.freeze({
         circularProgressContainerStyles: Object.freeze({
             display: 'flex',
@@ -21,99 +18,9 @@ const makeSearchByNameAndAddressResultStyles = theme =>
             alignItems: 'center',
             height: 'calc(100vh - 116px)',
         }),
-        mainContainerStyles: Object.freeze({
+        backToSearchButtonContainerStyles: Object.freeze({
             padding: '48px 5% 0 5%',
         }),
-        mainTitleStyles: Object.freeze({
-            fontWeight: theme.typography.fontWeightExtraBold,
-            fontSize: '56px',
-            lineHeight: '60px',
-            marginBottom: '16px',
-        }),
-        descriptionStyles: Object.freeze({
-            fontSize: '18px',
-            lineHeight: '21px',
-            marginBottom: '32px',
-            maxWidth: '656px',
-        }),
-        subTitleStyles: Object.freeze({
-            fontWeight: theme.typography.fontWeightSemiBoldPlus,
-            fontSize: '36px',
-            lineHeight: '44px',
-            margin: '32px 0 24px 0',
-        }),
-        resultsInfoContainerStyles: Object.freeze({
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '24px',
-        }),
-        resultsInfoStyles: Object.freeze({
-            fontSize: '16px',
-            lineHeight: '20px',
-            fontWeight: theme.typography.fontWeightBold,
-        }),
-        resultsSortStyles: Object.freeze({
-            fontSize: '16px',
-            lineHeight: '20px',
-        }),
-        resultContainer: Object.freeze({
-            display: 'flex',
-            justifyContent: 'space-between',
-            gap: '10px',
-            padding: '12px',
-            borderBottom: `1px solid ${COLOURS.ACCENT_GREY}`,
-            '&:hover': {
-                backgroundColor: COLOURS.LIGHT_GREY,
-            },
-            '&:last-child': {
-                marginBottom: '32px',
-            },
-        }),
-        buttonBaseStyles: Object.freeze({
-            height: '48px',
-            borderRadius: 0,
-            textTransform: 'none',
-            backgroundColor: theme.palette.action.main,
-            color: theme.palette.common.black,
-            '&:hover': {
-                backgroundColor: theme.palette.action.dark,
-            },
-        }),
-        selectButtonStyles: Object.freeze({
-            minWidth: '100px',
-        }),
-        selectButtonLabelStyles: Object.freeze({
-            fontSize: '16px',
-            lineHeight: '20px',
-            fontWeight: theme.typography.fontWeightExtraBold,
-        }),
-        notFoundButtonOuterContainerStyles: Object.freeze({
-            position: 'sticky',
-            bottom: -108,
-            height: '188px',
-        }),
-        notFoundButtonContainerStyles: Object.freeze({
-            display: 'flex',
-            alignItems: 'center',
-            boxShadow: '0px -2px 12px 0px #00000014',
-            position: 'sticky',
-            bottom: 0,
-            padding: '0 5%',
-            height: '80px',
-            backgroundColor: '#fff',
-        }),
-        notFoundButtonContainerScrolledStyles: Object.freeze({
-            boxShadow: 'none',
-        }),
-        notFoundButtonStyles: Object.freeze({
-            width: '275px',
-        }),
-        notFoundButtonLabelStyles: Object.freeze({
-            fontSize: '18px',
-            lineHeight: '22px',
-            fontWeight: theme.typography.fontWeightExtraBold,
-        }),
     });
 
 const SearchByNameAndAddressResult = ({
@@ -122,42 +29,18 @@ const SearchByNameAndAddressResult = ({
     fetchLocations,
     classes,
 }) => {
-    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
-
-    useEffect(() => {
-        const handleScroll = () => {
-            const isAtBottom =
-                window.innerHeight + window.scrollY >=
-                document.getElementById('mainPanel').offsetHeight;
-            setIsScrolledToBottom(isAtBottom);
-        };
-
-        window.addEventListener('scroll', handleScroll);
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, []);
-
     console.log('data >>>', data);
     console.log('fetching >>>', fetching);
     useEffect(() => {
         fetchLocations();
     }, [fetchLocations]);
 
-    const count = data?.data?.length || 0;
-
     const handleBackToSearchByNameAddress = () => {
         // clearProductionLocations();
         history.push(`${contributeProductionLocationRoute}?tab=name-address`);
     };
 
-    const handleSelectLocation = () => {
-        console.log('Select');
-    };
-
-    const handleNotFoundLocation = () => {
-        console.log('I don’t see my Location');
-    };
+    const count = data?.data?.length || 0;
 
     if (fetching) {
         return (
@@ -169,82 +52,17 @@ const SearchByNameAndAddressResult = ({
 
     return (
         <>
-            <div className={classes.mainContainerStyles}>
+            <div className={classes.backToSearchButtonContainerStyles}>
                 <BackToSearchButton
-                    label="Back to ID search"
+                    label="Back to Search"
                     handleBackToSearch={handleBackToSearchByNameAddress}
                 />
-                <Typography component="h1" className={classes.mainTitleStyles}>
-                    Search results
-                </Typography>
-                <Typography className={classes.descriptionStyles}>
-                    We found results that closely match your search criteria.
-                    Since names and addresses on OS Hub are user-provided, there
-                    may be slight differences between what you entered and
-                    what&apos;s shown below. Find the best match for the
-                    production location you are looking for in the list below,
-                    click “Select” to edit the name, address and country, and to
-                    add more information.
-                </Typography>
-                <Typography component="h3" className={classes.subTitleStyles}>
-                    Locations
-                </Typography>
-                <div className={classes.resultsInfoContainerStyles}>
-                    <Typography className={classes.resultsInfoStyles}>
-                        {count} results
-                    </Typography>
-                    <Typography className={classes.resultsSortStyles}>
-                        Sort By: <strong>Best match</strong>
-                    </Typography>
-                </div>
-                {data?.data &&
-                    data?.data.map(location => (
-                        <div
-                            key={location.os_id}
-                            className={classes.resultContainer}
-                        >
-                            <ProductionLocationDetails
-                                osId={location.os_id}
-                                name={location.name}
-                                address={location.address}
-                                countryName={location.country.name}
-                            />
-                            <Button
-                                variant="contained"
-                                color="secondary"
-                                onClick={handleSelectLocation}
-                                classes={{
-                                    root: `${classes.buttonBaseStyles} ${classes.selectButtonStyles}`,
-                                    label: classes.selectButtonLabelStyles,
-                                }}
-                            >
-                                Select
-                            </Button>
-                        </div>
-                    ))}
-            </div>
-
-            <div className={classes.notFoundButtonOuterContainerStyles}>
-                <div
-                    className={`${classes.notFoundButtonContainerStyles} ${
-                        isScrolledToBottom
-                            ? classes.notFoundButtonContainerScrolledStyles
-                            : ''
-                    }`}
-                >
-                    <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={handleNotFoundLocation}
-                        classes={{
-                            root: `${classes.buttonBaseStyles} ${classes.notFoundButtonStyles}`,
-                            label: classes.notFoundButtonLabelStyles,
-                        }}
-                    >
-                        I don&apos;t see my Location
-                    </Button>
-                </div>
             </div>
+            {count > 0 ? (
+                <SearchByNameAndAddressSuccessResult data={data} />
+            ) : (
+                <SearchByNameAndAddressNotFoundResult />
+            )}
         </>
     );
 };