mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
Merge pull request #34 from rutikwankhade/refactor-unsplash-feature
Refactor unsplash images feature
This commit is contained in:
Rutik Wankhade
GitHub
commit
4589a1f2e5
@ -157,7 +157,7 @@ class Editor extends React.Component {
|
||||
|
||||
|
||||
<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>
|
||||
<select
|
||||
onChange={(e) => this.setState({ pattern: e.target.value })}
|
||||
@ -184,7 +184,7 @@ class Editor extends React.Component {
|
||||
<option>jupiter</option>
|
||||
<option>sun</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex flex-col m-2 w-full">
|
||||
<span className="font-medium text-sm pb-1">Platform</span>
|
||||
|
||||
@ -1,83 +1,24 @@
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import unsplash from "../../utils/unsplashConfig";
|
||||
import React, { useContext } from 'react';
|
||||
import { ImgContext } from '../../utils/ImgContext';
|
||||
import UnsplashSearch from '../UnsplashSearch';
|
||||
|
||||
const BackgroundTheme = ({ config }) => {
|
||||
const { title, author, font, icon, customIcon, platform, bgColor } = config;
|
||||
|
||||
// const [image, setImage] = useState({})
|
||||
|
||||
const [imageList, setImageList] = useState([]);
|
||||
const [searchText, setSearchText] = useState('dev');
|
||||
|
||||
const { title, author, font, icon, customIcon, bgColor } = config;
|
||||
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 (
|
||||
<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 }}
|
||||
>
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
{unsplashImage ?
|
||||
<div className='relative flex group'>
|
||||
|
||||
@ -86,7 +27,7 @@ const BackgroundTheme = ({ config }) => {
|
||||
</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
|
||||
onClick={() => setUnsplashImage('')}
|
||||
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 items-center w-full px-6 ">
|
||||
<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)}
|
||||
/>
|
||||
<UnsplashSearch largeImgPreview />
|
||||
|
||||
<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>
|
||||
|
||||
}
|
||||
|
||||
@ -1,68 +1,11 @@
|
||||
import React, { useState, useEffect, useContext } from 'react';
|
||||
import unsplash from "../../utils/unsplashConfig";
|
||||
import React, { useContext } from 'react';
|
||||
import { ImgContext } from '../../utils/ImgContext';
|
||||
import UnsplashSearch from '../UnsplashSearch';
|
||||
|
||||
const StylishTheme = ({ 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 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 (
|
||||
<div className=" bg-white w-full h-full">
|
||||
@ -94,18 +37,15 @@ const StylishTheme = ({ config }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<div className="w-1/2 h-full">
|
||||
|
||||
|
||||
{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
|
||||
onClick={() => setUnsplashImage('')}
|
||||
className="absolute top-4 right-2 cursor-pointer">
|
||||
@ -128,35 +68,9 @@ const StylishTheme = ({ config }) => {
|
||||
</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">
|
||||
<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>
|
||||
<UnsplashSearch />
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
108
src/components/UnsplashSearch.js
Normal file
108
src/components/UnsplashSearch.js
Normal 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;
|
||||
@ -14,6 +14,10 @@ export const THEMES = [
|
||||
label: 'background',
|
||||
preview: backgroundThemePlaceholder
|
||||
},
|
||||
{
|
||||
label: 'stylish',
|
||||
preview: stylishThemePlaceholder
|
||||
},
|
||||
{
|
||||
label: 'basic',
|
||||
preview: basicThemePlaceholder
|
||||
@ -22,10 +26,6 @@ export const THEMES = [
|
||||
label: 'modern',
|
||||
preview: modernThemePlaceholder
|
||||
},
|
||||
{
|
||||
label: 'stylish',
|
||||
preview: stylishThemePlaceholder
|
||||
},
|
||||
{
|
||||
label: 'outline',
|
||||
preview: outlineThemePlaceholder
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user