[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API

package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@giscus/react": "^2.0.3",
+    "@mui/icons-material": "^5.11.9",
     "@mui/material": "^5.9.1",
     "@mui/styles": "^5.9.3",
     "@nhost/react": "^0.9.0",
@@ -15,7 +16,7 @@
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
     "add": "^2.0.6",
-    "axios": "^0.27.2",
+    "axios": "^1.3.3",
     "browser-image-compression": "^2.0.0",
     "codemirror": "^5.65.7",
     "date-fns": "^2.28.0",

src/common/badges-dashboard/badge.css

@@ -1,22 +1,22 @@
 .app-header-btn {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border: solid 1px var(--color-brand-primary);
-    border-radius: 2rem;
-    grid-gap: 0.4rem;
-    padding: 0.4rem 1.2rem;
-    font-size: var(--fs-sm);
-    text-decoration: none;
-    width: unset;
-    height: unset;
-    transition: all 0.12s ease-in-out;
-  }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: solid 1px var(--color-brand-primary);
+  border-radius: 2rem;
+  grid-gap: 0.4rem;
+  padding: 0.4rem 1.2rem;
+  font-size: var(--fs-sm);
+  text-decoration: none;
+  width: unset;
+  height: unset;
+  transition: all 0.12s ease-in-out;
+}
 
-  .app-header-btn--primary {
-    border: solid 2px var(--color-brand-primary);
-    background-color: var(--color-brand-primary);
-    color: var(--color-neutral-80);
-    grid-gap: 0.3rem;
-    margin-left: 0.4rem;
-  }
+.app-header-btn--primary {
+  border: solid 2px var(--color-brand-primary);
+  background-color: var(--color-brand-primary);
+  color: var(--color-neutral-80);
+  grid-gap: 0.3rem;
+  margin-left: 0.4rem;
+}

src/common/playleaderboard/leaderBoard.css

@@ -1,37 +1,39 @@
 .leaderboard-container {
-    border: 0 solid black;
-    border-radius: 5px;
-    background-color: white;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    padding: 5px 2rem 1rem 2rem;
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  border: 0 solid black;
+  border-radius: 5px;
+  background-color: white;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding: 5px 2rem 1rem 2rem;
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+    0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 
 .leaderboard-table-cell {
-    padding: 6px !important;
+  padding: 6px !important;
 }
 
 .leaderboard-table-header {
-    font-weight: 700 !important;
-    font-family: var(--ff-accent) !important;
+  font-weight: 700 !important;
+  font-family: var(--ff-accent) !important;
 }
 
 .leaderboard-heading {
-    font-family: var(--ff-accent);
-    font-size: 32px !important;
+  font-family: var(--ff-accent);
+  font-size: 32px !important;
 }
 
 .leaderboard-text {
-    font-family: var(--ff-accent) !important;
-    font-size: var(--fs-md) !important;
+  font-family: var(--ff-accent) !important;
+  font-size: var(--fs-md) !important;
 }
 
 .leaderboard-loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}

src/common/playlists/playlist.css

@@ -778,7 +778,7 @@
   max-width: 600px;
 }
 
-.banner-button{
+.banner-button {
   margin-right: 10px;
   background-color: rgba(255, 255, 255, 0.947);
   border: none;
@@ -793,12 +793,10 @@
   align-items: center;
   gap: 4px;
 }
-.banner-button:hover{
+.banner-button:hover {
   background-color: #e6e6e6c3;
   color: black;
-
 }
 .right-arrow-icon {
-  color: #25A0A7;
+  color: #25a0a7;
 }
-

src/plays/dad-jokes/Readme.md

@@ -13,14 +13,14 @@
 
 ## Play Screenshot
 
-- ### **Light Mode** 
+- ### **Light Mode**
 
 <div align="center">
   <img src="https://i.postimg.cc/0N2n74Bf/light-mode.png" alt="Dad Jokes Screenshot" width="100%" target="_blank" />
   <br>
 </div>
 
-- ### **Dark Mode** 
+- ### **Dark Mode**
 <div align="center">
   <img src="https://i.postimg.cc/3JXFV7M1/dark-mode.png" alt="Dad Jokes Screenshot" width="100%" target="_blank" />
   <br>
@@ -33,7 +33,7 @@
 
 ## Creator Information
 
-- ### **Bobby Sadhwani** - **[Linkedin](https://www.linkedin.com/in/bobby-sadhwani)**, **[Twitter](https://twitter.com/BOBBY__SADHWANI)**, **[Github](https://github.com/Bobby-coder)**, **[Portfolio](https://bobby-sadhwani.netlify.app)**  
+- ### **Bobby Sadhwani** - **[Linkedin](https://www.linkedin.com/in/bobby-sadhwani)**, **[Twitter](https://twitter.com/BOBBY__SADHWANI)**, **[Github](https://github.com/Bobby-coder)**, **[Portfolio](https://bobby-sadhwani.netlify.app)**
 
 ## Video
 
@@ -45,8 +45,3 @@
 - ### **[React Icons](https://react-icons.github.io/react-icons/)**
 
 ### **Happy Coding!** 🤩
-
-
-
-
-

src/plays/dad-jokes/components/jokeList/jokeList.css

@@ -17,7 +17,7 @@
   z-index: 2;
 }
 
-.dad-jokes-play .dark .jokelist-sidebar{
+.dad-jokes-play .dark .jokelist-sidebar {
   background-color: #eee;
 }
 
@@ -35,7 +35,7 @@
   letter-spacing: 0;
 }
 
-.dad-jokes-play .dark .jokelist-sidebar-title h1{
+.dad-jokes-play .dark .jokelist-sidebar-title h1 {
   color: #0d0d0d;
 }
 
@@ -73,7 +73,7 @@
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
 }
 
-.dad-jokes-play .dark .jokelist-sidebar-getmore button{
+.dad-jokes-play .dark .jokelist-sidebar-getmore button {
   color: #eee;
   background-color: #0d0d0d;
 }
@@ -88,7 +88,7 @@
   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.1);
 }
 
-.dad-jokes-play .dark .jokelist-jokes{
+.dad-jokes-play .dark .jokelist-jokes {
   background-color: #0d0d0d;
 }
 

src/plays/image-gallery-using-unsplash-api/ImageGalleryUsingUnsplashApi.js

@@ -0,0 +1,119 @@
+import './styles.css';
+import axios from 'axios';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState, useEffect } from 'react';
+import Photo from './components/Photo';
+import SearchBar from './components/searchBar';
+
+function ImageGalleryUsingUnsplashApi(props) {
+  // Your Code Start below.
+  const [loading, setLoading] = useState(false);
+  const [photos, setPhotos] = useState([]);
+  const [page, setPage] = useState(1);
+  const [query, setQuery] = useState('');
+
+  const clientID = 'client_id=LLC2ARXdcZNo-Hqh5IxJlveXFhOM_C1JfEq2YruC958';
+
+  const URL = 'https://api.unsplash.com/photos';
+
+  const searchURL = 'https://api.unsplash.com/search/photos';
+
+  //  create a function
+  //   which will fetch the url of the unsplash api
+  //   on success will populate the photos
+  async function fetchImages() {
+    setLoading(true);
+
+    let url;
+    const urlPage = `?page=${page}`;
+
+    const urlQuery = `&query=${query}`;
+
+    if (query) {
+      //  //  https://api.unsplash.com/search/photos?page=1&query=office&client_id=LLC2ARXdcZNo-Hqh5IxJlveXFhOM_C1JfEq2YruC958 This is the format for API calling
+      url = `${searchURL}${urlPage}${urlQuery}&${clientID}`;
+    } else {
+      //  https://api.unsplash.com/photos/?client_id=YOUR_ACCESS_KEY
+      url = `${URL}/?${clientID}`;
+    }
+
+    try {
+      // const response = await fetch(url);
+
+      const response = await axios.get(url);
+      const data = response.data;
+
+      let tempPhotoArray;
+      if (query && page === 1) {
+        tempPhotoArray = data.results;
+      } else if (query) {
+        tempPhotoArray = [...photos, ...data.results];
+      } else {
+        tempPhotoArray = [...data];
+      }
+
+      setPhotos(tempPhotoArray);
+      setLoading(false);
+    } catch (err) {
+      setLoading(false);
+
+      console.warn(err);
+    }
+  }
+
+  useEffect(() => {
+    fetchImages();
+  }, [page]);
+
+  const onScroll = () => {
+    const scrollTop = document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+
+    if (!loading && scrollTop + clientHeight >= scrollHeight - 2) {
+      setPage(page + 2);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [photos]);
+
+  function handleFormSubmit(e) {
+    //  preventDefault will stop the form from getting submitted over and over again automatically
+
+    e.preventDefault();
+    setPage(1);
+    fetchImages();
+  }
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className="body">
+            <section id="searchBar">
+              <SearchBar setQuery={setQuery} onFormSubmit={handleFormSubmit} />
+            </section>
+
+            <section className="photoGrid">
+              <div className="searchedPhotos">
+                {photos.map((image, index) => {
+                  return <Photo key={index} {...image} />;
+                })}
+              </div>
+            </section>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ImageGalleryUsingUnsplashApi;

src/plays/image-gallery-using-unsplash-api/Readme.md

@@ -0,0 +1,35 @@
+# Image Gallery using UnSplash API
+
+A responsive image gallery by using the free Unsplash API
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: siddhantsiddh15
+- Gihub Link: https://github.com/siddhantsiddh15
+- Blog:
+- Video:
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+### Create the search bar
+
+Start by creating a form that takes the input and has a submit button.
+
+### Create the section for images
+
+This is a simple project and it will need a section(portion on the webpage) where the images will be loaded after successfully fetching the unsplash api.
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)