pprokop · pprokop · Oct 25, 2022
diff --git a/.gitignore b/.gitignore
@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/components/Main.tsx b/components/Main.tsx
@@ -1,13 +1,40 @@
+import Search from './Search';
 import { Photo } from '../interfaces/photos';
+import { useSelector } from 'react-redux';
+import { RootState } from '../store/store';
+import { Container, Pagination } from 'semantic-ui-react';
 
-const Main = ({ photos }) => {
-  return (
-    <div>
+const Main = ({ defaultPhotos }) => {
+  const {
+    data: {
+      photos,
+    },
+  } = useSelector((state: RootState) => state.photos);
+
+  const renderList = () => {
+    if (photos.length) {
+      return (
       <ul>
-        {photos && photos.photos.map((el: Photo) => (
+        {photos.map((el: Photo) => (
           <li key={el.id}><img src={el.src.small}/></li>
         ))}
       </ul>
+      )
+    } else {
+      return (
+        <ul>
+        {defaultPhotos && defaultPhotos.photos.map((el: Photo) => (
+          <li key={el.id}><img src={el.src.small}/></li>
+        ))}
+      </ul>
+      )
+    }
+  };
+
+  return (
+    <div>
+      <Search />
+      {renderList()}
     </div>
   )
 };

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -0,0 +1,89 @@
+import { useState, useEffect, ChangeEvent } from 'react';
+import { Container, Input, Header, Menu } from 'semantic-ui-react';
+import {
+  useDispatch
+} from 'react-redux';
+import { AppDispatch } from '../store/store';
+import { fetchPhotos } from '../store/photos';
+
+const Search = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const [query, setQuery] = useState('');
+  const [activeItem, setActiveItem] = useState(10);
+
+  useEffect(() => {
+    const debounce = setTimeout(() => {
+      if (query) {
+        dispatch(fetchPhotos({
+          query,
+          page: 1,
+          per_page: activeItem,
+        }));
+      }
+    }, 1000);
+    return () => {clearTimeout(debounce)};
+  }, [query]);
+
+  useEffect(() => {
+    if (query) {
+      dispatch(fetchPhotos({
+        query, 
+        page: 1, 
+        per_page: activeItem
+      }))
+    }
+  }, [activeItem])
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  return (
+    <Container
+      style={{padding: '3rem'}}
+    >
+      <Header as="h1" textAlign='center' style={{marginBottom: '3rem'}}>
+        Search for free photos shared by talented creators
+      </Header>
+      <Input
+        fluid
+        icon='search'
+        placeholder='Search...'
+        value={query}
+        onChange={(e) => onInputChange(e)}
+      />
+       <Menu
+        secondary
+        floated="right"
+        style={{padding: '1rem'}}
+      >
+        <Menu.Item
+            content='Results per page'
+        />
+        <Menu.Item
+            name='10'
+            active={activeItem === 10}
+            content='10'
+            onClick={() => setActiveItem(10)}
+          />
+
+          <Menu.Item
+            name='25'
+            active={activeItem === 25}
+            content='25'
+            onClick={() => setActiveItem(25)}
+          />
+
+          <Menu.Item
+          position="right"
+            name='50'
+            active={activeItem === 50}
+            content='50'
+            onClick={() => setActiveItem(50)}
+          />
+      </Menu>
+    </Container>
+  )
+};
+
+export default Search;  
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
+  env: {
+    API_KEY: process.env.API_KEY,
+  }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,14 +4,14 @@ import Head from 'next/head';
 import Main from '../components/Main';
 import { PEXELS_URL } from '../utils/constants';
 
-const Home: NextPage = ({photos}) => {
+const Home: NextPage = ({defaultPhotos}) => {
 
   return (
     <div>
       <Head>
         <title>Interview Frontend App</title>
       </Head>
-      <Main photos={photos} />
+      <Main defaultPhotos={defaultPhotos} />
     </div>
   );
 };
@@ -30,7 +30,7 @@ export async function getStaticProps() {
 
   return {
     props: {
-      photos: data,
+      defaultPhotos: data,
     }
   };
 };
diff --git a/store/photos.ts b/store/photos.ts
@@ -26,24 +26,24 @@ export const initialState: SliceState = {
 
 export const fetchPhotos = createAsyncThunk<
   PhotosResponse, // return value
-  string, // parameters
+  {}, // parameters
   {}
 >(
   'photos/fetchPhotos',
-  async phrase => {
+  async params => {
+    console.log(params)
     const { data } = await axios.get<PhotosResponse>(PEXELS_URL, {
       headers: {
         Authorization: process.env.API_KEY,
       },
-      params: {
-        query: phrase,
-      },
+      params
     });
-
+    console.log(data)
     return data;
   }
 );
 
+
 const photosDataSlice = createSlice({
   extraReducers: {
     [fetchPhotos.pending.toString()]: (state: SliceState) => {