wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-19 14:31:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #34 from rutikwankhade/refactor-unsplash-feature

Browse Source 
Refactor unsplash images feature
This commit is contained in:
Rutik Wankhade 2024-10-07 22:26:51 +05:30 committed by GitHub
commit 4589a1f2e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 129 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Editor.js
View File

@ -157,7 +157,7 @@ class Editor extends React.Component {
<div className="flex items-center"> <div className="flex items-center">
<div className="flex flex-col m-2 w-1/2"> {/* <div className="flex flex-col m-2 w-1/2">
<span className="font-medium text-sm pb-1">Pattern</span> <span className="font-medium text-sm pb-1">Pattern</span>
<select <select
onChange={(e) => this.setState({ pattern: e.target.value })} onChange={(e) => this.setState({ pattern: e.target.value })}
@ -184,7 +184,7 @@ class Editor extends React.Component {
<option>jupiter</option> <option>jupiter</option>
<option>sun</option> <option>sun</option>
</select> </select>
</div> </div> */}
<div className="flex flex-col m-2 w-full"> <div className="flex flex-col m-2 w-full">
<span className="font-medium text-sm pb-1">Platform</span> <span className="font-medium text-sm pb-1">Platform</span>

104
src/components/Themes/BackgroundTheme.js
View File

@ -1,83 +1,24 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useContext } from 'react';
import unsplash from "../../utils/unsplashConfig";
import { ImgContext } from '../../utils/ImgContext'; import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const BackgroundTheme = ({ config }) => { const BackgroundTheme = ({ config }) => {
const { title, author, font, icon, customIcon, platform, bgColor } = config; const { title, author, font, icon, customIcon, bgColor } = config;
// const [image, setImage] = useState({})
const [imageList, setImageList] = useState([]);
const [searchText, setSearchText] = useState('dev');
const { unsplashImage, setUnsplashImage } = useContext(ImgContext); const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
const searchImages = () => {
unsplash.search
.getPhotos({
query: searchText,
page: 1,
per_page: 30,
// orientation:'portrait'
})
.then(response => {
// console.log(response.response.results);
setImageList(response.response.results)
});
}
useEffect(() => {
unsplash.search
.getPhotos({
query: 'setup',
page: 1,
per_page: 30
})
.then(response => {
// console.log(response.response.results);
setImageList(response.response.results)
});
}, [])
const selectImage = (image) => {
setUnsplashImage({
url: image.urls.regular,
name: image.user.name,
avatar: image.user.profile_image.small,
profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
downloadLink: image.links.download_location
})
}
const handleSearchSubmit = (e) => {
e.preventDefault();
searchImages(searchText);
}
return ( return (
<div className=" bg-white rounded"> <div className=" bg-white ">
<div className={` overflow-y-hidden flex flex-col rounded ${platform}`} <div className={` overflow-y-hidden flex flex-col`}
style={{ backgroundColor: bgColor }} style={{ backgroundColor: bgColor }}
> >
<div className="flex flex-row items-center bg-white justify-center "> <div className="flex flex-row items-center bg-white justify-center ">
<div className="w-full"> <div className="w-full">
{unsplashImage ? {unsplashImage ?
<div className='relative flex group'> <div className='relative flex group'>
@ -86,7 +27,7 @@ const BackgroundTheme = ({ config }) => {
</div> </div>
<div className=" backdrop-blur-sm h-full bg-gray-800/60 absolute top-0 right-0 left-0 "> <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
<button <button
onClick={() => setUnsplashImage('')} onClick={() => setUnsplashImage('')}
className="absolute top-2 right-2 cursor-pointer"> className="absolute top-2 right-2 cursor-pointer">
@ -131,37 +72,8 @@ const BackgroundTheme = ({ config }) => {
: :
<div className="flex flex-col p-2 bg-white items-center justify-center"> <div className="flex flex-col p-2 bg-white items-center justify-center">
<div className="flex items-center w-full px-6 "> <UnsplashSearch largeImgPreview />
<div className="text-lg font-semibold text-gray-700">Click on any image to select</div>
<form onSubmit={(e) => handleSearchSubmit(e)} className=" ml-auto mr-2 w-1/2 flex bg-gray-50 rounded-full border mb-2">
<input type="text"
value={searchText}
placeholder="Search image"
className="focus:outline-none w-full text-lg bg-gray-50 p-1 px-4 rounded-full border border-gray-50"
onChange={(e) => setSearchText(e.target.value)}
/>
<button type="submit" onClick={() => searchImages(searchText)}>
<svg className="w-9 h-9 ml-auto mr-1 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</form>
</div>
<div className="overflow-y-scroll overflow-x-hidden h-96 justify-center flex flex-wrap">
{
imageList.map(image => {
return <img src={image.urls.regular}
key={image.id}
alt={image.alt_description}
className="rounded m-2 cursor-pointer w-5/12 object-cover h-40"
onClick={() => selectImage(image)
}
/>
})
}
</div>
</div> </div>
} }

100
src/components/Themes/StylishTheme.js
View File

@ -1,68 +1,11 @@
import React, { useState, useEffect, useContext } from 'react'; import React, { useContext } from 'react';
import unsplash from "../../utils/unsplashConfig";
import { ImgContext } from '../../utils/ImgContext'; import { ImgContext } from '../../utils/ImgContext';
import UnsplashSearch from '../UnsplashSearch';
const StylishTheme = ({ config }) => { const StylishTheme = ({ config }) => {
const { title, author, font, icon, customIcon, bgColor } = config; const { title, author, font, icon, customIcon, bgColor } = config;
// const [image, setImage] = useState({})
const [imageList, setImageList] = useState([]);
const [searchText, setSearchText] = useState('dev');
const { unsplashImage, setUnsplashImage } = useContext(ImgContext); const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
const searchImages = () => {
unsplash.search
.getPhotos({
query: searchText,
page: 1,
per_page: 30,
// orientation:'portrait'
})
.then(response => {
// console.log(response.response.results);
setImageList(response.response.results)
});
}
useEffect(() => {
unsplash.search
.getPhotos({
query: 'setup',
page: 1,
per_page: 25
})
.then(response => {
// console.log(response.response.results);
setImageList(response.response.results)
});
}, [])
const selectImage = (image) => {
setUnsplashImage({
url: image.urls.regular,
name: image.user.name,
avatar: image.user.profile_image.small,
profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
downloadLink: image.links.download_location
})
}
const handleSearchSubmit = (e) => {
e.preventDefault();
searchImages(searchText);
}
return ( return (
<div className=" bg-white w-full h-full"> <div className=" bg-white w-full h-full">
@ -94,18 +37,15 @@ const StylishTheme = ({ config }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="w-1/2"> <div className="w-1/2 h-full">
{unsplashImage ? {unsplashImage ?
<div className='relative flex group'> <div className='relative w-full h-max flex group'>
<div className="h-96 w-96 "> <img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full " alt="preview" />
<img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-96 w-96 " alt="preview" />
</div>
<button <button
onClick={() => setUnsplashImage('')} onClick={() => setUnsplashImage('')}
className="absolute top-4 right-2 cursor-pointer"> className="absolute top-4 right-2 cursor-pointer">
@ -128,35 +68,9 @@ const StylishTheme = ({ config }) => {
</div> </div>
</div> </div>
: :
<div className="flex flex-col p-2 bg-white items-center justify-center"> <div className="flex h-max w-full flex-col bg-white items-center justify-center">
<form onSubmit={(e) => handleSearchSubmit(e)} className="flex bg-gray-50 rounded-full border mb-2"> <UnsplashSearch />
<input type="text"
value={searchText}
placeholder="Search image"
className="focus:outline-none w-max text-lg bg-gray-50 p-1 px-4 rounded-full border border-gray-50"
onChange={(e) => setSearchText(e.target.value)}
/>
<button type="submit" onClick={() => searchImages(searchText)}>
<svg className="w-9 h-9 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</form>
<div className="overflow-y-scroll overflow-x-hidden h-80">
{
imageList.map(image => {
return <img src={image.urls.regular}
key={image.id}
alt={image.alt_description}
className="rounded m-2 cursor-pointer"
onClick={() => selectImage(image)
}
/>
})
}
</div>
</div> </div>
} }

108
src/components/UnsplashSearch.js Normal file
View File

@ -0,0 +1,108 @@
import React, { useState, useEffect, useContext } from 'react';
import unsplash from '../utils/unsplashConfig';
import { ImgContext } from '../utils/ImgContext';
const UnsplashSearch = ({ largeImgPreview }) => {
const [imageList, setImageList] = useState([]);
const [searchText, setSearchText] = useState('setup');
const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
const searchImages = () => {
unsplash.search
.getPhotos({
query: searchText,
page: 1,
per_page: 30,
// orientation:'portrait'
})
.then(response => {
// console.log(response.response.results);
setImageList(response.response.results)
});
}
const selectImage = (image) => {
setUnsplashImage({
url: image.urls.regular,
name: image.user.name,
avatar: image.user.profile_image.small,
profile: `${image.user.links.html}?utm_source=https://coverview.vercel.app&utm_medium=referral`,
downloadLink: image.links.download_location
})
}
const handleSearchSubmit = (e) => {
e.preventDefault();
searchImages(searchText);
}
useEffect(() => {
unsplash.search
.getPhotos({
query: 'setup',
page: 1,
per_page: 30
})
.then(response => {
// console.log(response.response.results);
setImageList(response.response.results)
});
}, [])
return (
<div className='w-full h-full'>
<div className="flex flex-col p-2 bg-white items-center justify-center">
<div className="flex items-center w-full px-6 ">
<form onSubmit={(e) => handleSearchSubmit(e)} className=" mx-auto w-full flex bg-gray-50 rounded-full border border-gray-50 mb-2">
<input type="text"
value={searchText}
placeholder="Search photos"
className="focus:outline-none w-full text-lg bg-gray-50 p-1 px-4 rounded-full "
onChange={(e) => setSearchText(e.target.value)}
/>
<button type="submit" onClick={() => searchImages(searchText)}>
<svg className="w-9 h-9 ml-auto p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</form>
</div>
<div className="overflow-y-scroll w-full overflow-x-hidden h-max justify-center flex flex-wrap">
{
imageList.map(image => {
return <div key={image.id}
className={`rounded-lg relative cursor-pointer m-1 ${largeImgPreview ? ' h-44 w-60' : 'h-24 w-40'
}`}
>
<span className="font-Inter top-2 left-2 absolute text-sm font-semibold text-white opacity-50 ">Click to Select</span>
<img src={image.urls.regular}
alt={image.alt_description}
onClick={() => selectImage(image)
}
className="rounded-lg object-cover h-full w-full"
/>
</div>
})
}
</div>
</div>
</div>
);
}
export default UnsplashSearch;

8
src/utils/constants.js
View File

@ -14,6 +14,10 @@ export const THEMES = [
label: 'background', label: 'background',
preview: backgroundThemePlaceholder preview: backgroundThemePlaceholder
}, },
{
label: 'stylish',
preview: stylishThemePlaceholder
},
{ {
label: 'basic', label: 'basic',
preview: basicThemePlaceholder preview: basicThemePlaceholder
@ -22,10 +26,6 @@ export const THEMES = [
label: 'modern', label: 'modern',
preview: modernThemePlaceholder preview: modernThemePlaceholder
}, },
{
label: 'stylish',
preview: stylishThemePlaceholder
},
{ {
label: 'outline', label: 'outline',
preview: outlineThemePlaceholder preview: outlineThemePlaceholder