diff --git a/README.md b/README.md index 10badba..ebb0ce9 100644 --- a/README.md +++ b/README.md @@ -2,39 +2,38 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next ## Getting Started -First, install dependencies: +First, run the development server: -```bash -npm install -# or -yarn -``` - -## Api key -* Create account and generate API key for Pexels API https://www.pexels.com/join-consumer/ -* Add .env.local file to your root folder and inside add your Pexels key to the API_KEY variable. - -## Running development server ```bash npm run dev # or yarn dev ``` -## Tasks - -#### Add list of images -- Display images by 5 in row -- After clicking image, image should be visible in the modal. Also, author of the photo should be displayed in right bottom corner -- Modal can be closed by clicking 'X' icon, outside of photo and pressing 'Esc' key on the keyboard. - -#### Searching images -- Add search field above image list -- Images should be filtered by typed text. -- Request should be fetched when user stopped typing (not for each letter ;) ) -- User should be able to choose how many images is visible per page. Available values: 10, 25, 50, -- List should be paginated - - #### Terms and condition page - - Add link in the footer of app 'Terms and Condition'. Link should provide to another page - - Get content for page from http://legalipsum.com/?count=2 +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +**Api key** + +add .env.local file to your root folder and inside add your pexels key to the API_KEY variable. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + diff --git a/components/Layout.tsx b/components/Layout.tsx index 56db7b6..2b6e296 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -1,7 +1,11 @@ import { Container, Menu } from 'semantic-ui-react'; import { Icon } from 'semantic-ui-react' -const Layout = ({ children }) => { +interface IChildren { + children: Node, +}; + +const Layout = ({ children } : IChildren) => { return ( <> @@ -11,7 +15,7 @@ const Layout = ({ children }) => { { children } - + @Interview Frontend App 2021 diff --git a/components/Main.tsx b/components/Main.tsx index e63e4ff..9ef8b18 100644 --- a/components/Main.tsx +++ b/components/Main.tsx @@ -1,13 +1,28 @@ -import { Photo } from '../interfaces/photos'; +import { Container, Grid, Image } from 'semantic-ui-react'; +import { Photo, PhotosResponse } from '../interfaces/photos'; +import Modal from './Modal'; -const Main = ({ photos }) => { +const Main = ({ photos }: PhotosResponse) => { return (
-
    - {photos && photos.photos.map((el: Photo) => ( -
    • - ))} -
+ + + {photos && photos.map((photo: Photo) => ( + + } + photo={photo} + /> + + ))} + +
) }; diff --git a/components/Modal.tsx b/components/Modal.tsx new file mode 100644 index 0000000..eb3bc8b --- /dev/null +++ b/components/Modal.tsx @@ -0,0 +1,45 @@ +import { useState } from 'react'; +import { Button, Image, Modal, Segment } from 'semantic-ui-react'; +import { Photo } from '../interfaces/photos'; + +interface IProps { + photo: Photo, + trigger: React.ReactNode, +}; + +const ModalElement = ({trigger, photo}: IProps) => { + const [open, setOpen] = useState(false); + + return ( + setOpen(false)} + onOpen={() => setOpen(true)} + open={open} + trigger={trigger} + style={{width: 'auto'}} + > + + + + + + + + {photo.photographer} + + + ) +}; + +export default ModalElement; diff --git a/interfaces/photos.ts b/interfaces/photos.ts index 54d7aed..13f2731 100644 --- a/interfaces/photos.ts +++ b/interfaces/photos.ts @@ -21,8 +21,9 @@ export type Photo = { }; export type PhotosResponse = { - photos: Photo[], - total_results: number, - page: number, - per_page: number + photos: Photo[]; + total_results: number; + page: number; + per_page: number; + next_page: string; }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 355cc4b..46054a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.1.0", "dependencies": { "@reduxjs/toolkit": "^1.6.1", + "@types/react-dom": "^17.0.9", + "@types/semantic-ui": "^2.2.7", "axios": "^0.21.4", "next": "11.1.2", "react": "17.0.2", @@ -18,7 +20,7 @@ "semantic-ui-react": "^2.0.3" }, "devDependencies": { - "@types/react": "17.0.22", + "@types/react": "^17.0.22", "eslint": "7.32.0", "eslint-config-next": "11.1.2", "typescript": "4.4.3" @@ -1053,6 +1055,14 @@ "hoist-non-react-statics": "^3.3.0" } }, + "node_modules/@types/jquery": { + "version": "3.5.6", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz", + "integrity": "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==", + "dependencies": { + "@types/sizzle": "*" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -1079,6 +1089,14 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "17.0.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz", + "integrity": "sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-redux": { "version": "7.1.18", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", @@ -1095,6 +1113,203 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, + "node_modules/@types/semantic-ui": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@types/semantic-ui/-/semantic-ui-2.2.7.tgz", + "integrity": "sha512-Uj6rby2GnuVyO7pj8vgUFsv5eaxb0ktpfasYcB/vXnSAeJ4cRjIOvxka+EoPjw3tPCY4/WlxRss8hsh7kRWzQg==", + "dependencies": { + "@types/jquery": "*", + "@types/semantic-ui-accordion": "*", + "@types/semantic-ui-api": "*", + "@types/semantic-ui-checkbox": "*", + "@types/semantic-ui-dimmer": "*", + "@types/semantic-ui-dropdown": "*", + "@types/semantic-ui-embed": "*", + "@types/semantic-ui-form": "*", + "@types/semantic-ui-modal": "*", + "@types/semantic-ui-nag": "*", + "@types/semantic-ui-popup": "*", + "@types/semantic-ui-progress": "*", + "@types/semantic-ui-rating": "*", + "@types/semantic-ui-search": "*", + "@types/semantic-ui-shape": "*", + "@types/semantic-ui-sidebar": "*", + "@types/semantic-ui-site": "*", + "@types/semantic-ui-sticky": "*", + "@types/semantic-ui-tab": "*", + "@types/semantic-ui-transition": "*", + "@types/semantic-ui-visibility": "*" + } + }, + "node_modules/@types/semantic-ui-accordion": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-accordion/-/semantic-ui-accordion-2.2.2.tgz", + "integrity": "sha512-XClXI/20W7iFLQ7eyslZswbdv3A4qWEnFz8JvOylGatCW7biTLVhMBPcN0b17TZ1GeV4V/l3ctmvTEBCHvg8CA==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-api": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-api/-/semantic-ui-api-2.2.4.tgz", + "integrity": "sha512-6IvCjZDJ0TVb1EtnNFQPNyVmOZnLGPEKyEAs9G0FF3XuAyyOdtfD4NGHJ0kknnX1FD+++ye0EuSVFDutbwEFWw==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-checkbox": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-checkbox/-/semantic-ui-checkbox-2.2.2.tgz", + "integrity": "sha512-ZTAy3yNwOAaoznxsFoR33XopJnyyzAGrLeDpn7hVTkUYm7wgGsgOpRfG2psdM3fIOCkZkkE9IEAp1pLGBifL1g==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-dimmer": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-dimmer/-/semantic-ui-dimmer-2.2.2.tgz", + "integrity": "sha512-wK7da/70UJ9AU7Ju2MeOO9sjRPrhU6jf+VvHiTwlaCGm7+ALiJThd88D1iB6ODDQpm+ebjIbQkvAmDSkMpmKlg==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-dropdown": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-dropdown/-/semantic-ui-dropdown-2.2.3.tgz", + "integrity": "sha512-y2ZIiEWvFFyLu7+yqNV550U9hs3sfqP7ajLxHEWlGjxGS4NsJmy9In7/UcxnpJB+JkanC4JkyogEN6wRlbqvhw==", + "dependencies": { + "@types/jquery": "*", + "@types/semantic-ui-api": "*" + } + }, + "node_modules/@types/semantic-ui-embed": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-embed/-/semantic-ui-embed-2.2.2.tgz", + "integrity": "sha512-5sW99BtK2SIBs9/sSM/0vMr6tphPyPXHyClhFX1tJi0L5ZH0wEmf6XcBRZgROe3ueHYVaJ0Pt/zwPQ5SMW0xDg==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-form": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-form/-/semantic-ui-form-2.2.6.tgz", + "integrity": "sha512-khj3o6w2TWN9Bh7yZhsosUfAPMBRP/rD3DiApZrPUaioCHf0VrDtYuiqJXTd/Qt7cZW2w+NgZ1riV/3leXx8iA==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-modal": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-modal/-/semantic-ui-modal-2.2.3.tgz", + "integrity": "sha512-Th48BFk1pd4kluFjCUDKn7Aml3xoLdFFK8wFQRz6UsOMdvsXx2OrNkubhjqc79tcBzONC7NszSW2ImslPPHNCg==", + "dependencies": { + "@types/jquery": "*", + "@types/semantic-ui-dimmer": "*" + } + }, + "node_modules/@types/semantic-ui-nag": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-nag/-/semantic-ui-nag-2.2.2.tgz", + "integrity": "sha512-gqjSFmMLw8vtPa6/Rv/mFBK1mdqaUbLkhUA4CsTDhkibUqnNqpvI/d1XFFLdC/ULu9v7UloMTCndSGKao+q5oA==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-popup": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-popup/-/semantic-ui-popup-2.2.3.tgz", + "integrity": "sha512-tw7FXUTAs+GEU939RBpOCVq9H8vYpsr8uYvJC0RUxXCYXCUHsgYzgIIklKoD+xPvUCf34MHnMBwrrTCMJosxGg==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-progress": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-progress/-/semantic-ui-progress-2.2.3.tgz", + "integrity": "sha512-gv0i4+/uVbUJnuTzNv2oEqJ8CMQPeAR6K+s2zm1r4waH+8ZQ0SKM1DZ4t3w4gEMxhXqZVlLlyIhfY1SmUI0GuQ==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-rating": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-rating/-/semantic-ui-rating-2.2.2.tgz", + "integrity": "sha512-9497T8bEnkadWtQDl5Hno9lviZ2bJjx5rKd/Gfq6PWZ1/4/71LrYdH1DSr+sHYJ5HkaSA0b7GFVCTxi9pEdd6Q==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-search": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-search/-/semantic-ui-search-2.2.3.tgz", + "integrity": "sha512-JVrrW9uakXTudNm1MGrkRpirL2vm8NCVtrPyH6zIbBNqi08UPeHY8yxjnFpTPv5sMKBGGhkSn9cYrGz6Cweg2Q==", + "dependencies": { + "@types/jquery": "*", + "@types/semantic-ui-api": "*" + } + }, + "node_modules/@types/semantic-ui-shape": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-shape/-/semantic-ui-shape-2.2.2.tgz", + "integrity": "sha512-bXaeheuuDY3rAmA5QQRAA0fzMiEkhRgZts5i7w/d1XlMHCVNeHIIAbhTurl3bPwTlbr0NI7T3ZmxH0EKRVdIEg==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-sidebar": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-sidebar/-/semantic-ui-sidebar-2.2.2.tgz", + "integrity": "sha512-fm/whmNiyTzQwduc4maV9XjdwVc4pVlkhX5vippW9ukCCkVGY8qBgQKHFYhAHPhe7sCsGIuS+Vpr83t8X7Fg8w==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-site": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-site/-/semantic-ui-site-2.2.2.tgz", + "integrity": "sha512-XxwUxqpBLAlPpO7OqAYIdBRsZTmKLXvSzBLczms3JshnoChEZbxtKRYxSxgK93Y4XYCfKnpXQXEF6RIw5FF/mA==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-sticky": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-sticky/-/semantic-ui-sticky-2.2.3.tgz", + "integrity": "sha512-HOhd+W75u9Hk0owQXUGdDKpvVhKl/207hueZqTTREZPTmxALAHbl6bHKxnvcJqRerhOFdObQcCFZGL5DEXRtcA==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-tab": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-tab/-/semantic-ui-tab-2.2.2.tgz", + "integrity": "sha512-o7a2TJAxjh7pVqRzpQmJd7hTcaDv/tAYJh2Aez5mYiRrFylhzwIrJAcXhSwVRVInPZkc8MDlBPg8Xm+QJ98rLw==", + "dependencies": { + "@types/jquery": "*", + "@types/semantic-ui-api": "*" + } + }, + "node_modules/@types/semantic-ui-transition": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-transition/-/semantic-ui-transition-2.2.2.tgz", + "integrity": "sha512-wZJICf3qCr+68zPvzTKC9nQJ3mneW+K/K9Y2KphxujWgMCkOQEetDNb5Dbt9YZe92L0SnaPaDgp1KVaKAortdw==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/semantic-ui-visibility": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-visibility/-/semantic-ui-visibility-2.2.3.tgz", + "integrity": "sha512-4vfXjZHJhif8Rw4WQ691Zx2Y0vqdNF2D0AYT7ltQH1/mL/fCqEwTLndl3qvgCbxpniGbTnYRajqx1dk8+Ji/HQ==", + "dependencies": { + "@types/jquery": "*" + } + }, + "node_modules/@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" + }, "node_modules/@typescript-eslint/parser": { "version": "4.31.2", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.31.2.tgz", @@ -6756,6 +6971,14 @@ "hoist-non-react-statics": "^3.3.0" } }, + "@types/jquery": { + "version": "3.5.6", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz", + "integrity": "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==", + "requires": { + "@types/sizzle": "*" + } + }, "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -6782,6 +7005,14 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "17.0.9", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz", + "integrity": "sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==", + "requires": { + "@types/react": "*" + } + }, "@types/react-redux": { "version": "7.1.18", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz", @@ -6798,6 +7029,203 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, + "@types/semantic-ui": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@types/semantic-ui/-/semantic-ui-2.2.7.tgz", + "integrity": "sha512-Uj6rby2GnuVyO7pj8vgUFsv5eaxb0ktpfasYcB/vXnSAeJ4cRjIOvxka+EoPjw3tPCY4/WlxRss8hsh7kRWzQg==", + "requires": { + "@types/jquery": "*", + "@types/semantic-ui-accordion": "*", + "@types/semantic-ui-api": "*", + "@types/semantic-ui-checkbox": "*", + "@types/semantic-ui-dimmer": "*", + "@types/semantic-ui-dropdown": "*", + "@types/semantic-ui-embed": "*", + "@types/semantic-ui-form": "*", + "@types/semantic-ui-modal": "*", + "@types/semantic-ui-nag": "*", + "@types/semantic-ui-popup": "*", + "@types/semantic-ui-progress": "*", + "@types/semantic-ui-rating": "*", + "@types/semantic-ui-search": "*", + "@types/semantic-ui-shape": "*", + "@types/semantic-ui-sidebar": "*", + "@types/semantic-ui-site": "*", + "@types/semantic-ui-sticky": "*", + "@types/semantic-ui-tab": "*", + "@types/semantic-ui-transition": "*", + "@types/semantic-ui-visibility": "*" + } + }, + "@types/semantic-ui-accordion": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-accordion/-/semantic-ui-accordion-2.2.2.tgz", + "integrity": "sha512-XClXI/20W7iFLQ7eyslZswbdv3A4qWEnFz8JvOylGatCW7biTLVhMBPcN0b17TZ1GeV4V/l3ctmvTEBCHvg8CA==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-api": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-api/-/semantic-ui-api-2.2.4.tgz", + "integrity": "sha512-6IvCjZDJ0TVb1EtnNFQPNyVmOZnLGPEKyEAs9G0FF3XuAyyOdtfD4NGHJ0kknnX1FD+++ye0EuSVFDutbwEFWw==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-checkbox": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-checkbox/-/semantic-ui-checkbox-2.2.2.tgz", + "integrity": "sha512-ZTAy3yNwOAaoznxsFoR33XopJnyyzAGrLeDpn7hVTkUYm7wgGsgOpRfG2psdM3fIOCkZkkE9IEAp1pLGBifL1g==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-dimmer": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-dimmer/-/semantic-ui-dimmer-2.2.2.tgz", + "integrity": "sha512-wK7da/70UJ9AU7Ju2MeOO9sjRPrhU6jf+VvHiTwlaCGm7+ALiJThd88D1iB6ODDQpm+ebjIbQkvAmDSkMpmKlg==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-dropdown": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-dropdown/-/semantic-ui-dropdown-2.2.3.tgz", + "integrity": "sha512-y2ZIiEWvFFyLu7+yqNV550U9hs3sfqP7ajLxHEWlGjxGS4NsJmy9In7/UcxnpJB+JkanC4JkyogEN6wRlbqvhw==", + "requires": { + "@types/jquery": "*", + "@types/semantic-ui-api": "*" + } + }, + "@types/semantic-ui-embed": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-embed/-/semantic-ui-embed-2.2.2.tgz", + "integrity": "sha512-5sW99BtK2SIBs9/sSM/0vMr6tphPyPXHyClhFX1tJi0L5ZH0wEmf6XcBRZgROe3ueHYVaJ0Pt/zwPQ5SMW0xDg==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-form": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-form/-/semantic-ui-form-2.2.6.tgz", + "integrity": "sha512-khj3o6w2TWN9Bh7yZhsosUfAPMBRP/rD3DiApZrPUaioCHf0VrDtYuiqJXTd/Qt7cZW2w+NgZ1riV/3leXx8iA==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-modal": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-modal/-/semantic-ui-modal-2.2.3.tgz", + "integrity": "sha512-Th48BFk1pd4kluFjCUDKn7Aml3xoLdFFK8wFQRz6UsOMdvsXx2OrNkubhjqc79tcBzONC7NszSW2ImslPPHNCg==", + "requires": { + "@types/jquery": "*", + "@types/semantic-ui-dimmer": "*" + } + }, + "@types/semantic-ui-nag": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-nag/-/semantic-ui-nag-2.2.2.tgz", + "integrity": "sha512-gqjSFmMLw8vtPa6/Rv/mFBK1mdqaUbLkhUA4CsTDhkibUqnNqpvI/d1XFFLdC/ULu9v7UloMTCndSGKao+q5oA==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-popup": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-popup/-/semantic-ui-popup-2.2.3.tgz", + "integrity": "sha512-tw7FXUTAs+GEU939RBpOCVq9H8vYpsr8uYvJC0RUxXCYXCUHsgYzgIIklKoD+xPvUCf34MHnMBwrrTCMJosxGg==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-progress": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-progress/-/semantic-ui-progress-2.2.3.tgz", + "integrity": "sha512-gv0i4+/uVbUJnuTzNv2oEqJ8CMQPeAR6K+s2zm1r4waH+8ZQ0SKM1DZ4t3w4gEMxhXqZVlLlyIhfY1SmUI0GuQ==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-rating": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-rating/-/semantic-ui-rating-2.2.2.tgz", + "integrity": "sha512-9497T8bEnkadWtQDl5Hno9lviZ2bJjx5rKd/Gfq6PWZ1/4/71LrYdH1DSr+sHYJ5HkaSA0b7GFVCTxi9pEdd6Q==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-search": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-search/-/semantic-ui-search-2.2.3.tgz", + "integrity": "sha512-JVrrW9uakXTudNm1MGrkRpirL2vm8NCVtrPyH6zIbBNqi08UPeHY8yxjnFpTPv5sMKBGGhkSn9cYrGz6Cweg2Q==", + "requires": { + "@types/jquery": "*", + "@types/semantic-ui-api": "*" + } + }, + "@types/semantic-ui-shape": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-shape/-/semantic-ui-shape-2.2.2.tgz", + "integrity": "sha512-bXaeheuuDY3rAmA5QQRAA0fzMiEkhRgZts5i7w/d1XlMHCVNeHIIAbhTurl3bPwTlbr0NI7T3ZmxH0EKRVdIEg==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-sidebar": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-sidebar/-/semantic-ui-sidebar-2.2.2.tgz", + "integrity": "sha512-fm/whmNiyTzQwduc4maV9XjdwVc4pVlkhX5vippW9ukCCkVGY8qBgQKHFYhAHPhe7sCsGIuS+Vpr83t8X7Fg8w==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-site": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-site/-/semantic-ui-site-2.2.2.tgz", + "integrity": "sha512-XxwUxqpBLAlPpO7OqAYIdBRsZTmKLXvSzBLczms3JshnoChEZbxtKRYxSxgK93Y4XYCfKnpXQXEF6RIw5FF/mA==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-sticky": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-sticky/-/semantic-ui-sticky-2.2.3.tgz", + "integrity": "sha512-HOhd+W75u9Hk0owQXUGdDKpvVhKl/207hueZqTTREZPTmxALAHbl6bHKxnvcJqRerhOFdObQcCFZGL5DEXRtcA==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-tab": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-tab/-/semantic-ui-tab-2.2.2.tgz", + "integrity": "sha512-o7a2TJAxjh7pVqRzpQmJd7hTcaDv/tAYJh2Aez5mYiRrFylhzwIrJAcXhSwVRVInPZkc8MDlBPg8Xm+QJ98rLw==", + "requires": { + "@types/jquery": "*", + "@types/semantic-ui-api": "*" + } + }, + "@types/semantic-ui-transition": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-transition/-/semantic-ui-transition-2.2.2.tgz", + "integrity": "sha512-wZJICf3qCr+68zPvzTKC9nQJ3mneW+K/K9Y2KphxujWgMCkOQEetDNb5Dbt9YZe92L0SnaPaDgp1KVaKAortdw==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/semantic-ui-visibility": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@types/semantic-ui-visibility/-/semantic-ui-visibility-2.2.3.tgz", + "integrity": "sha512-4vfXjZHJhif8Rw4WQ691Zx2Y0vqdNF2D0AYT7ltQH1/mL/fCqEwTLndl3qvgCbxpniGbTnYRajqx1dk8+Ji/HQ==", + "requires": { + "@types/jquery": "*" + } + }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" + }, "@typescript-eslint/parser": { "version": "4.31.2", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.31.2.tgz", diff --git a/package.json b/package.json index 1c4ed26..e7fb196 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.6.1", + "@types/react-dom": "^17.0.9", + "@types/semantic-ui": "^2.2.7", "axios": "^0.21.4", "next": "11.1.2", "react": "17.0.2", @@ -19,7 +21,7 @@ "semantic-ui-react": "^2.0.3" }, "devDependencies": { - "@types/react": "17.0.22", + "@types/react": "^17.0.22", "eslint": "7.32.0", "eslint-config-next": "11.1.2", "typescript": "4.4.3" diff --git a/pages/index.tsx b/pages/index.tsx index 7318eb5..ba57418 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,7 +11,7 @@ const Home: NextPage = ({photos}) => { Interview Frontend App -
+
); }; diff --git a/store/photos.ts b/store/photos.ts index b6d6d89..a6b3714 100644 --- a/store/photos.ts +++ b/store/photos.ts @@ -19,6 +19,7 @@ export const initialState: SliceState = { total_results: 0, page: 0, per_page: 0, + next_page: '', }, error: '', loading: false, diff --git a/tsconfig.json b/tsconfig.json index 4fa631c..e20a817 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,6 +14,6 @@ "isolatedModules": true, "jsx": "preserve" }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_document.js"], "exclude": ["node_modules"] } diff --git a/yarn.lock b/yarn.lock index fc48996..40e5449 100644 --- a/yarn.lock +++ b/yarn.lock @@ -435,6 +435,13 @@ "@types/react" "*" "hoist-non-react-statics" "^3.3.0" +"@types/jquery@*": + "integrity" "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==" + "resolved" "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz" + "version" "3.5.6" + dependencies: + "@types/sizzle" "*" + "@types/json5@^0.0.29": "integrity" "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=" "resolved" "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz" @@ -450,6 +457,13 @@ "resolved" "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz" "version" "15.7.4" +"@types/react-dom@^17.0.9": + "integrity" "sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==" + "resolved" "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz" + "version" "17.0.9" + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.16": "integrity" "sha512-9iwAsPyJ9DLTRH+OFeIrm9cAbIj1i2ANL3sKQFATqnPWRbg+jEFXyZOKHiQK/N86pNRXbb4HRxAxo0SIX1XwzQ==" "resolved" "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.18.tgz" @@ -460,7 +474,7 @@ "hoist-non-react-statics" "^3.3.0" "redux" "^4.0.0" -"@types/react@*", "@types/react@17.0.22": +"@types/react@*", "@types/react@^17.0.22": "integrity" "sha512-kq/BMeaAVLJM6Pynh8C2rnr/drCK+/5ksH0ch9asz+8FW3DscYCIEFtCeYTFeIx/ubvOsMXmRfy7qEJ76gM96A==" "resolved" "https://registry.npmjs.org/@types/react/-/react-17.0.22.tgz" "version" "17.0.22" @@ -474,6 +488,182 @@ "resolved" "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" "version" "0.16.2" +"@types/semantic-ui-accordion@*": + "integrity" "sha512-XClXI/20W7iFLQ7eyslZswbdv3A4qWEnFz8JvOylGatCW7biTLVhMBPcN0b17TZ1GeV4V/l3ctmvTEBCHvg8CA==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-accordion/-/semantic-ui-accordion-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-api@*": + "integrity" "sha512-6IvCjZDJ0TVb1EtnNFQPNyVmOZnLGPEKyEAs9G0FF3XuAyyOdtfD4NGHJ0kknnX1FD+++ye0EuSVFDutbwEFWw==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-api/-/semantic-ui-api-2.2.4.tgz" + "version" "2.2.4" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-checkbox@*": + "integrity" "sha512-ZTAy3yNwOAaoznxsFoR33XopJnyyzAGrLeDpn7hVTkUYm7wgGsgOpRfG2psdM3fIOCkZkkE9IEAp1pLGBifL1g==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-checkbox/-/semantic-ui-checkbox-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-dimmer@*": + "integrity" "sha512-wK7da/70UJ9AU7Ju2MeOO9sjRPrhU6jf+VvHiTwlaCGm7+ALiJThd88D1iB6ODDQpm+ebjIbQkvAmDSkMpmKlg==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-dimmer/-/semantic-ui-dimmer-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-dropdown@*": + "integrity" "sha512-y2ZIiEWvFFyLu7+yqNV550U9hs3sfqP7ajLxHEWlGjxGS4NsJmy9In7/UcxnpJB+JkanC4JkyogEN6wRlbqvhw==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-dropdown/-/semantic-ui-dropdown-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + "@types/semantic-ui-api" "*" + +"@types/semantic-ui-embed@*": + "integrity" "sha512-5sW99BtK2SIBs9/sSM/0vMr6tphPyPXHyClhFX1tJi0L5ZH0wEmf6XcBRZgROe3ueHYVaJ0Pt/zwPQ5SMW0xDg==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-embed/-/semantic-ui-embed-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-form@*": + "integrity" "sha512-khj3o6w2TWN9Bh7yZhsosUfAPMBRP/rD3DiApZrPUaioCHf0VrDtYuiqJXTd/Qt7cZW2w+NgZ1riV/3leXx8iA==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-form/-/semantic-ui-form-2.2.6.tgz" + "version" "2.2.6" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-modal@*": + "integrity" "sha512-Th48BFk1pd4kluFjCUDKn7Aml3xoLdFFK8wFQRz6UsOMdvsXx2OrNkubhjqc79tcBzONC7NszSW2ImslPPHNCg==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-modal/-/semantic-ui-modal-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + "@types/semantic-ui-dimmer" "*" + +"@types/semantic-ui-nag@*": + "integrity" "sha512-gqjSFmMLw8vtPa6/Rv/mFBK1mdqaUbLkhUA4CsTDhkibUqnNqpvI/d1XFFLdC/ULu9v7UloMTCndSGKao+q5oA==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-nag/-/semantic-ui-nag-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-popup@*": + "integrity" "sha512-tw7FXUTAs+GEU939RBpOCVq9H8vYpsr8uYvJC0RUxXCYXCUHsgYzgIIklKoD+xPvUCf34MHnMBwrrTCMJosxGg==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-popup/-/semantic-ui-popup-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-progress@*": + "integrity" "sha512-gv0i4+/uVbUJnuTzNv2oEqJ8CMQPeAR6K+s2zm1r4waH+8ZQ0SKM1DZ4t3w4gEMxhXqZVlLlyIhfY1SmUI0GuQ==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-progress/-/semantic-ui-progress-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-rating@*": + "integrity" "sha512-9497T8bEnkadWtQDl5Hno9lviZ2bJjx5rKd/Gfq6PWZ1/4/71LrYdH1DSr+sHYJ5HkaSA0b7GFVCTxi9pEdd6Q==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-rating/-/semantic-ui-rating-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-search@*": + "integrity" "sha512-JVrrW9uakXTudNm1MGrkRpirL2vm8NCVtrPyH6zIbBNqi08UPeHY8yxjnFpTPv5sMKBGGhkSn9cYrGz6Cweg2Q==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-search/-/semantic-ui-search-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + "@types/semantic-ui-api" "*" + +"@types/semantic-ui-shape@*": + "integrity" "sha512-bXaeheuuDY3rAmA5QQRAA0fzMiEkhRgZts5i7w/d1XlMHCVNeHIIAbhTurl3bPwTlbr0NI7T3ZmxH0EKRVdIEg==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-shape/-/semantic-ui-shape-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-sidebar@*": + "integrity" "sha512-fm/whmNiyTzQwduc4maV9XjdwVc4pVlkhX5vippW9ukCCkVGY8qBgQKHFYhAHPhe7sCsGIuS+Vpr83t8X7Fg8w==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-sidebar/-/semantic-ui-sidebar-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-site@*": + "integrity" "sha512-XxwUxqpBLAlPpO7OqAYIdBRsZTmKLXvSzBLczms3JshnoChEZbxtKRYxSxgK93Y4XYCfKnpXQXEF6RIw5FF/mA==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-site/-/semantic-ui-site-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-sticky@*": + "integrity" "sha512-HOhd+W75u9Hk0owQXUGdDKpvVhKl/207hueZqTTREZPTmxALAHbl6bHKxnvcJqRerhOFdObQcCFZGL5DEXRtcA==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-sticky/-/semantic-ui-sticky-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-tab@*": + "integrity" "sha512-o7a2TJAxjh7pVqRzpQmJd7hTcaDv/tAYJh2Aez5mYiRrFylhzwIrJAcXhSwVRVInPZkc8MDlBPg8Xm+QJ98rLw==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-tab/-/semantic-ui-tab-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + "@types/semantic-ui-api" "*" + +"@types/semantic-ui-transition@*": + "integrity" "sha512-wZJICf3qCr+68zPvzTKC9nQJ3mneW+K/K9Y2KphxujWgMCkOQEetDNb5Dbt9YZe92L0SnaPaDgp1KVaKAortdw==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-transition/-/semantic-ui-transition-2.2.2.tgz" + "version" "2.2.2" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui-visibility@*": + "integrity" "sha512-4vfXjZHJhif8Rw4WQ691Zx2Y0vqdNF2D0AYT7ltQH1/mL/fCqEwTLndl3qvgCbxpniGbTnYRajqx1dk8+Ji/HQ==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui-visibility/-/semantic-ui-visibility-2.2.3.tgz" + "version" "2.2.3" + dependencies: + "@types/jquery" "*" + +"@types/semantic-ui@^2.2.7": + "integrity" "sha512-Uj6rby2GnuVyO7pj8vgUFsv5eaxb0ktpfasYcB/vXnSAeJ4cRjIOvxka+EoPjw3tPCY4/WlxRss8hsh7kRWzQg==" + "resolved" "https://registry.npmjs.org/@types/semantic-ui/-/semantic-ui-2.2.7.tgz" + "version" "2.2.7" + dependencies: + "@types/jquery" "*" + "@types/semantic-ui-accordion" "*" + "@types/semantic-ui-api" "*" + "@types/semantic-ui-checkbox" "*" + "@types/semantic-ui-dimmer" "*" + "@types/semantic-ui-dropdown" "*" + "@types/semantic-ui-embed" "*" + "@types/semantic-ui-form" "*" + "@types/semantic-ui-modal" "*" + "@types/semantic-ui-nag" "*" + "@types/semantic-ui-popup" "*" + "@types/semantic-ui-progress" "*" + "@types/semantic-ui-rating" "*" + "@types/semantic-ui-search" "*" + "@types/semantic-ui-shape" "*" + "@types/semantic-ui-sidebar" "*" + "@types/semantic-ui-site" "*" + "@types/semantic-ui-sticky" "*" + "@types/semantic-ui-tab" "*" + "@types/semantic-ui-transition" "*" + "@types/semantic-ui-visibility" "*" + +"@types/sizzle@*": + "integrity" "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" + "resolved" "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz" + "version" "2.3.3" + "@typescript-eslint/parser@^4.20.0": "integrity" "sha512-EcdO0E7M/sv23S/rLvenHkb58l3XhuSZzKf6DBvLgHqOYdL6YFMYVtreGFWirxaU2mS1GYDby3Lyxco7X5+Vjw==" "resolved" "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.31.2.tgz"