-
-
Notifications
You must be signed in to change notification settings - Fork 804
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974
Merged
atapas
merged 23 commits into
reactplay:main
from
siddhantsiddh15:unsplash-api-siddhantsiddh15
Mar 8, 2023
Merged
[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974
Changes from 4 commits
Commits
Show all changes
23 commits
Select commit
Hold shift + click to select a range
591be31
Successfully created an image gallery which uses unsplash API and has…
siddhantsiddh15 f3a9a9e
Some files were being asked to be stashed
siddhantsiddh15 ff5795d
Merge branch 'main' of https://github.com/siddhantsiddh15/react-play
siddhantsiddh15 a38ad8b
Installed material-ui/icons and changed styles.css a little
siddhantsiddh15 e2f8ad1
Ran npm lint and npm format command
siddhantsiddh15 7bac98a
formatted the styles.css
siddhantsiddh15 174a96a
Merge branch 'main' into unsplash-api-siddhantsiddh15
siddhantsiddh15 b13a13e
changed the className from .body to .unsplash-image-gallery-body
siddhantsiddh15 15315a1
Merge branch 'unsplash-api-siddhantsiddh15' of https://github.com/sid…
siddhantsiddh15 237fcc0
Merge branch 'main' into unsplash-api-siddhantsiddh15
atapas c5860aa
Random Quote Generator #973 was causing conflict. Resolved it.
siddhantsiddh15 343ccc6
removed the style for img from src/plays/image-gallery-using-unsplas…
siddhantsiddh15 8f60255
Merge branch 'main' into unsplash-api-siddhantsiddh15
Sachin-chaurasiya 7614b5a
Merge branch 'main' into unsplash-api-siddhantsiddh15
siddhantsiddh15 79e9d4b
Merge branch 'main' into unsplash-api-siddhantsiddh15
siddhantsiddh15 70ed2f6
added the cover image
siddhantsiddh15 aced7cf
Merge branch 'unsplash-api-siddhantsiddh15' of https://github.com/sid…
siddhantsiddh15 484c6a0
added cover.png of size 135 kb
siddhantsiddh15 c96f345
Merge branch 'main' into unsplash-api-siddhantsiddh15
atapas d7b1bb5
Merge branch 'main' into unsplash-api-siddhantsiddh15
siddhantsiddh15 441d535
Merge branch 'main' into unsplash-api-siddhantsiddh15
siddhantsiddh15 9f4a2ba
Merge branch 'main' into unsplash-api-siddhantsiddh15
koustov 441229e
Merge branch 'main' into unsplash-api-siddhantsiddh15
koustov File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
src/plays/image-gallery-using-unsplash-api/ImageGalleryUsingUnsplashApi.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
29 changes: 29 additions & 0 deletions
29
src/plays/image-gallery-using-unsplash-api/components/Photo.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
const Photo = (props) => { | ||
const { urls, description, likes, user } = props; | ||
|
||
const { regular } = urls; | ||
const { name, username, portfolio_url, profile_image } = user; | ||
const { medium } = profile_image; | ||
|
||
return ( | ||
<> | ||
<div className="photo-frame"> | ||
<a href={regular}> | ||
<img alt={description} src={regular} /> | ||
</a> | ||
<div className="photo-info"> | ||
<div> | ||
<h4>{name}</h4> | ||
<h6>{username}</h6> | ||
<p>{likes} Likes</p> | ||
</div> | ||
<a href={portfolio_url}> | ||
<img alt="" src={medium} /> | ||
</a> | ||
</div> | ||
</div> | ||
</> | ||
); | ||
}; | ||
|
||
export default Photo; |
21 changes: 21 additions & 0 deletions
21
src/plays/image-gallery-using-unsplash-api/components/searchBar.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import SearchIcon from '@mui/icons-material/Search'; | ||
|
||
export default function SearchBar(props) { | ||
const { onFormSubmit, setQuery } = props; | ||
|
||
return ( | ||
<> | ||
<form className="searchBar" onSubmit={onFormSubmit}> | ||
<input | ||
className="searchBarInput" | ||
placeholder="Search for an image" | ||
type="text" | ||
onChange={(e) => setQuery(e.target.value)} | ||
/> | ||
<button className="submitButton" type="submit" value="Search"> | ||
<SearchIcon /> | ||
</button> | ||
</form> | ||
</> | ||
); | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would certainly change the class name from body to something more unique :) How about
unsplash-ig
?