Merge pull request #11 from TKadyear/feature/search-page

Refactorized the sort options and the search page is working

.eslintrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+	"env": {
+		"browser": true,
+		"es2021": true
+	},
+
+	"settings": {
+		"react": {
+			"fragment": "Fragment",  // Fragment to use (may be a property of <pragma>), default to "Fragment"
+			"version": "detect",
+		}
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:jest/recommended",
+		"plugin:react-redux/recommended"
+	],
+	"parserOptions": {
+		"ecmaFeatures": {
+			"jsx": true
+		},
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"plugins": [
+		"react",
+		"@emotion",
+		"jest",
+		"react-redux"
+	],
+	"rules": {
+		"@emotion/jsx-import": "error",
+		"@emotion/no-vanilla": "error",
+		"@emotion/import-from-emotion": "error",
+		"@emotion/styled-import": "error",
+		"react/jsx-uses-react": "off",
+		"react/react-in-jsx-scope": "off",
+		"react/prop-types": 0,
+		"linebreak-style": [
+			"error",
+			"unix"
+		],
+		"quotes": [
+			"error",
+			"double"
+		],
+		"semi": [
+			"error",
+			"always"
+		]
+	}
+};

.gitignore

@@ -1,4 +1,5 @@
 package-lock.json
+build/
 # Logs
 logs
 *.log

docs/unsplash-api-guidelines.md

@@ -0,0 +1,17 @@
+## Unsplash Api Guidelines
+### Technical Guidelines
+1. All API uses must use the hotlinked image URLs returned by the API under the photo.urls  properties. This applies to all uses of the image and not just search results. [More info & examples →](https://help.unsplash.com/en/articles/2511271-guideline-hotlinking-images)
+2. When your application performs something similar to a download (like when a user chooses the image to include in a blog post, set as a header, etc.), you must send a request to the download endpoint returned under the photo.links.download_location  property. [More info & examples →](https://help.unsplash.com/en/articles/2511258-guideline-triggering-a-download)
+3. When displaying a photo from Unsplash, your application must attribute Unsplash, the Unsplash photographer, and contain a link back to their Unsplash profile. All links back to Unsplash should use utm parameters in the ?utm_source=your_app_name&utm_medium=referral . [More info & examples →](https://help.unsplash.com/en/articles/2511315-guideline-attribution)
+4. Your application’s Access Key and Secret Key  must remain confidential. This may require using a proxy if accessing the API client-side.
+
+### Usage Guidelines
+1. You cannot use the Unsplash name directly in your application name and you cannot use the Unsplash logo as an app icon.
+2. You cannot use the API to sell unaltered Unsplash photos directly or indirectly (prints, on products, etc.)
+3. You cannot replicate the core user experience of Unsplash (unofficial clients, wallpaper applications, etc.). [More info & examples →](https://help.unsplash.com/en/articles/2511257-guideline-replicating-unsplash)
+4. The API is to be used for non-automated, high-quality, and authentic experiences. [More info & examples →](https://help.unsplash.com/en/articles/2511256-guideline-high-quality-authentic-experiences)
+5. Do not abuse the APIs. Too many requests too quickly will get your access turned off.
+6. Applications should not require users to register for a developer account with the Unsplash API to use your application. If needed, build a proxy that signs requests on behalf of your users, allowing them to all share a single API key, or reach out to our team for an OAuth solution.
+
+We recommend taking a look at each of the accompanying articles as they provide visual and code examples. If after reading those you have any questions, feel free to reach out to us.
+

docs/unsplash-api.md

@@ -0,0 +1,143 @@
+# Unsplash Api
+## Requisitos
+- [x] Cuenta de desarrollador, confirmada por correo.
+- [X] Registrar la aplicación
+
+## Limitaciones de la API
+
+Son solo 50 request por hora.
+
+---
+## ¿Cómo hacer peticiones a la API?
+### ¿Dónde hay que hacer las peticiones?
+- ``https://api.unsplash.com/``
+- ``https://api.unsplash.com/photos/?client_id=TuClaveDeAcceso``
+
+Recomiendan poner en la cabecera(header):  ``Accept-Version: v1``
+
+De lo que permite la API para hacer peticiones sería un ejemplo para una búsqueda:
+- ``https://api.unsplash.com/photos/?query=LoQueBusques&client_id=TuClaveDeAcceso``
+
+
+Al contrario que la mayoría de APIs, Unsplash necesita la URL de la imagen o estar embedida en la aplicación . A esto se le llama ``hotlinking``.
+
+# ¿Cómo es la respuesta de la API?
+```JSON
+  {
+    "id": "scy_C022i44",
+    "created_at": "2022-04-19T11:16:30-04:00",
+    "updated_at": "2022-04-21T05:24:02-04:00",
+    "promoted_at": "2022-04-21T05:24:01-04:00",
+    "width": 4480,
+    "height": 6720,
+    "color": "#262626",
+    "blur_hash": "LbI=MqDi8_Rk_NRjM_ayE2Rj%LWA",
+    "description": "portrait ",
+    "alt_description": null,
+    "urls": {
+      "raw": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1",
+      "full": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1\u0026q=85",
+      "regular": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080",
+      "small": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=400",
+      "thumb": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200",
+      "small_s3": "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1650381381140-5bced2f6688f"
+    },
+    "links": {
+      "self": "https://api.unsplash.com/photos/scy_C022i44",
+      "html": "https://unsplash.com/photos/scy_C022i44",
+      "download": "https://unsplash.com/photos/scy_C022i44/download?ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA",
+      "download_location": "https://api.unsplash.com/photos/scy_C022i44/download?ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA"
+    },
+    "categories": [],
+    "likes": 0,
+    "liked_by_user": false,
+    "current_user_collections": [],
+    "sponsorship": null,
+    "topic_submissions": {},
+    "user": {
+      "id": "jsssKfFuO9Y",
+      "updated_at": "2022-04-21T05:28:10-04:00",
+      "username": "noellejlee",
+      "name": "noelle",
+      "first_name": "noelle",
+      "last_name": null,
+      "twitter_username": null,
+      "portfolio_url": null,
+      "bio": "15 - based in the bay area\r\nfeel free to check out and download my pics :) insta: noellejlphotos",
+      "location": "Bay area",
+      "links": {
+        "html": "https://unsplash.com/@noellejlee",
+      },
+      "profile_image": {
+        "small": "https://images.unsplash.com/profile-1621379062191-725bf101e50eimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=32\u0026w=32",
+        "medium": "https://images.unsplash.com/profile-1621379062191-725bf101e50eimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=64\u0026w=64",
+        "large": "https://images.unsplash.com/profile-1621379062191-725bf101e50eimage?ixlib=rb-1.2.1\u0026q=80\u0026fm=jpg\u0026crop=faces\u0026cs=tinysrgb\u0026fit=crop\u0026h=128\u0026w=128"
+      },
+      "instagram_username": "noellejlphotos",
+      "total_collections": 0,
+      "total_likes": 4,
+      "total_photos": 203,
+      "accepted_tos": true,
+      "for_hire": false,
+      "social": {
+        "instagram_username": "noellejlphotos",
+        "portfolio_url": null,
+        "twitter_username": null,
+        "paypal_email": null
+      }
+    }
+  },
+```
+De todos estos datos que te devuelve la API, los que me interesan son :
+
+```JSON
+{
+    "id": "scy_C022i44",
+    "width": 4480,
+    "height": 6720,
+    "created_at": "2022-04-19T11:16:30-04:00",
+    "description": "portrait ",
+     "alt_description": null,
+     "urls": {
+       //... solo serían estas por lo que pone el documento
+      "full": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1\u0026q=85",
+      "thumb": "https://images.unsplash.com/photo-1650381381140-5bced2f6688f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=200"
+     },
+    "links": {
+        "download": "https://unsplash.com/photos/scy_C022i44/download?ixid=MnwzMjA1MTd8MHwxfGFsbHw1fHx8fHx8Mnx8MTY1MDUzNDc4NA",
+    },
+    "user": {//Porque una de las Directrices de la API es basicamente dar atribución
+      "username": "noellejlee",
+      "name": "noelle",
+      "first_name": "noelle",
+            "links": {
+        "self": "https://api.unsplash.com/users/noellejlee",
+        "html": "https://unsplash.com/@noellejlee",
+        "photos": "https://api.unsplash.com/users/noellejlee/photos",
+        "likes": "https://api.unsplash.com/users/noellejlee/likes",
+        "portfolio": "https://api.unsplash.com/users/noellejlee/portfolio",
+        "following": "https://api.unsplash.com/users/noellejlee/following",
+        "followers": "https://api.unsplash.com/users/noellejlee/followers"
+      },
+    },
+    "categories": [],
+    "likes": 0
+
+}
+```
+## ¿Cómo quieren se de atribución a los autores de las fotografías?
+La forma que recomiendan poner es así:
+
+Photo by [Annie Spratt](https://unsplash.com/@anniespratt?utm_source=your_app_name&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=your_app_name&utm_medium=referral)
+
+
+Basicamente la URL tendría que ser algo asi:
+``` javascript
+const urlAuthor = `https://unsplash.com/${name_author_photo}?utm_source=${your_app_name}&utm_medium=referral`
+const linkUnsplash = `https://unsplash.com/?utm_source=${your_app_name}&utm_medium=referral`
+```
+
+Como se puede ver aparece repetido : ``?utm_source=your_app_name&utm_medium=referral``
+
+
+Basicamente es para que Unsplash sepa identificar desde donde vienen las visualizaciones.

package.json

@@ -5,22 +5,29 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.6.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.2",
     "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "dotenv": "^16.0.0",
+    "file-saver": "^2.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-redux": "^8.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.1.2",
+    "unsplash-js": "^7.0.15",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "linter": "eslint src",
+    "fix": "eslint src --fix",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -40,5 +47,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@emotion/eslint-plugin": "^11.7.0",
+    "eslint": "^8.14.0",
+    "eslint-plugin-jest": "^26.1.5",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-redux": "^4.0.0"
   }
 }