refactor(components): update structure for improved readability 😁

Valik3201 · Jan 28, 2024 · ad59b0d · ad59b0d
1 parent a41fc9a
commit ad59b0d
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 78 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -7,7 +7,7 @@ import { SearchResultInfo } from './SearchResultInfo';
 import ErrorAlert from './ErrorAlert';
 import NoResultsAlert from './NoResultsAlert';
 
-import { Container, Row } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 
 import fetchImages from 'services/api';
 
@@ -93,25 +93,19 @@ class App extends Component {
           {error && <ErrorAlert errorMessage={error} />}
           {images.length > 0 && !error ? (
             <>
-              <Row>
-                <SearchResultInfo
-                  searchQuery={searchQuery}
-                  totalHits={totalHits}
-                />
-              </Row>
-              <Row>
-                <ImageGallery images={images} />
-              </Row>
-              <Row>
-                {totalHits > images.length && (
-                  <LoadMoreBtn onClick={this.loadMoreImages} />
-                )}
-              </Row>
+              <SearchResultInfo
+                searchQuery={searchQuery}
+                totalHits={totalHits}
+              />
+
+              <ImageGallery images={images} />
+
+              {totalHits > images.length && (
+                <LoadMoreBtn onClick={this.loadMoreImages} />
+              )}
             </>
           ) : images.length === 0 && searchQuery && !error ? (
-            <Row>
-              <NoResultsAlert searchQuery={searchQuery} />
-            </Row>
+            <NoResultsAlert searchQuery={searchQuery} />
           ) : (
             !error && <ImagePortalWelcome />
           )}

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -3,14 +3,16 @@ import Button from 'react-bootstrap/Button';
 
 export const LoadMoreBtn = ({ onClick }) => {
   return (
-    <Container>
-      <Row className="justify-content-center mt-3">
-        <Col xs={12} md="auto">
-          <Button variant="primary" className="w-100" onClick={onClick}>
-            Load More
-          </Button>
-        </Col>
-      </Row>
-    </Container>
+    <Row>
+      <Container>
+        <Row className="justify-content-center mt-3">
+          <Col xs={12} md="auto">
+            <Button variant="primary" className="w-100" onClick={onClick}>
+              Load More
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    </Row>
   );
 };
diff --git a/src/components/ImageGallery.jsx b/src/components/ImageGallery.jsx
@@ -31,33 +31,35 @@ class ImageGallery extends Component {
     const { showModal, selectedImage } = this.state;
 
     return (
-      <Container className="justify-content-center">
-        <Row xs={1} sm={2} md={3} lg={4} className="g-4">
-          {images.map(
-            (
-              { id, webformatURL, largeImageURL, tags, user, userImageURL },
-              index
-            ) => (
-              <ImageGallery.Item
-                key={`${index}-${id}`}
-                id={id}
-                webformatURL={webformatURL}
-                largeImageURL={largeImageURL}
-                tags={tags}
-                user={user}
-                userImageURL={userImageURL}
-                openModal={this.openModal}
-              />
-            )
-          )}
-        </Row>
+      <Row>
+        <Container className="justify-content-center">
+          <Row xs={1} sm={2} md={3} lg={4} className="g-4">
+            {images.map(
+              (
+                { id, webformatURL, largeImageURL, tags, user, userImageURL },
+                index
+              ) => (
+                <ImageGallery.Item
+                  key={`${index}-${id}`}
+                  id={id}
+                  webformatURL={webformatURL}
+                  largeImageURL={largeImageURL}
+                  tags={tags}
+                  user={user}
+                  userImageURL={userImageURL}
+                  openModal={this.openModal}
+                />
+              )
+            )}
+          </Row>
 
-        <ImageModal
-          showModal={showModal}
-          selectedImage={selectedImage}
-          closeModal={this.closeModal}
-        />
-      </Container>
+          <ImageModal
+            showModal={showModal}
+            selectedImage={selectedImage}
+            closeModal={this.closeModal}
+          />
+        </Container>
+      </Row>
     );
   }
 }

diff --git a/src/components/NoResultsAlert.jsx b/src/components/NoResultsAlert.jsx
@@ -2,21 +2,23 @@ import { Container, Row, Col, Alert } from 'react-bootstrap';
 
 function NoResultsAlert({ searchQuery }) {
   return (
-    <Container>
-      <Row className="justify-content-center mt-5">
-        <Col xs={12} md={6}>
-          <Alert variant="warning">
-            <Alert.Heading>Oops!</Alert.Heading>
-            <p>
-              We couldn't find any results for{' '}
-              <span className="fw-bold">{searchQuery}</span>.
-            </p>
-            <hr />
-            <p className="mb-0">Please try a different search term.</p>
-          </Alert>
-        </Col>
-      </Row>
-    </Container>
+    <Row>
+      <Container>
+        <Row className="justify-content-center mt-5">
+          <Col xs={12} md={6}>
+            <Alert variant="warning">
+              <Alert.Heading>Oops!</Alert.Heading>
+              <p>
+                We couldn't find any results for{' '}
+                <span className="fw-bold">{searchQuery}</span>.
+              </p>
+              <hr />
+              <p className="mb-0">Please try a different search term.</p>
+            </Alert>
+          </Col>
+        </Row>
+      </Container>
+    </Row>
   );
 }
 

diff --git a/src/components/SearchResultInfo.jsx b/src/components/SearchResultInfo.jsx
@@ -1,14 +1,16 @@
 import { Container, Row, Col, Alert } from 'react-bootstrap';
 
 export const SearchResultInfo = ({ searchQuery, totalHits }) => (
-  <Container>
-    <Row className="justify-content-center text-center">
-      <Col xs="auto">
-        <Alert variant="primary">
-          Showing <span className="fw-bold"> {totalHits}</span> results for
-          <span className="fw-bold"> {searchQuery}</span>
-        </Alert>
-      </Col>
-    </Row>
-  </Container>
+  <Row>
+    <Container>
+      <Row className="justify-content-center text-center">
+        <Col xs="auto">
+          <Alert variant="primary">
+            Showing <span className="fw-bold"> {totalHits}</span> results for
+            <span className="fw-bold"> {searchQuery}</span>
+          </Alert>
+        </Col>
+      </Row>
+    </Container>
+  </Row>
 );