New features v3.0.0

HectorSaldes · May 1, 2022 · 8a996bc · 8a996bc
1 parent 0900b40
commit 8a996bc
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ These are two mockups developed in this web page
 
 ## Roadmap
 
+-   [v3.0.0] Now you can search by style, delete filters and show more icons.
 -   [v2.3.1] Request to icon to download svg fixed
 -   [v2.3.0] Secong launch now you can download icons or emojis on SVG format
 -   [v1.1.0] First launch to the web application with images pages working

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "liber",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.1",

diff --git a/src/assets/svg/emptyIcons.svg b/src/assets/svg/emptyIcons.svg
diff --git a/src/components/IconCard.jsx b/src/components/IconCard.jsx
@@ -19,7 +19,7 @@ export default function IconCard({ payload, getIconToDownload }) {
 		<div className="p-col-6 p-sm-4 p-md-2" key={id}>
 			<Card
 				key={id}
-				title={name}
+				subTitle={name}
 				header={header}
 				footer={
 					<Button

diff --git a/src/pages/Icons.jsx b/src/pages/Icons.jsx
@@ -1,17 +1,22 @@
 import React, { useState, useRef } from "react";
 import Menu from "../components/Menu";
+import Empty from "../assets/svg/emptyIcons.svg";
 import IconsService from "../service/IconsService";
 import IconSkeleton from "../components/IconSkeleton";
 import IconCard from "../components/IconCard";
 import { AutoComplete } from "primereact/autocomplete";
 import { Button } from "primereact/button";
 import { Toast } from "primereact/toast";
+import { Dropdown } from "primereact/dropdown";
 
 export default function Icons() {
 	const toast = useRef(null);
 	const [listSearch, setListSearch] = useState([]);
 	const [valueSelected, setValueSelected] = useState(null);
+	const [categorySelected, setCategorySelected] = useState("all");
+	const [offsetSelected, setOffsetSelected] = useState(0);
 	const [listOfIcons, setListOfIcons] = useState([]);
+	const [loading, setLoading] = useState(false);
 
 	const searchWithText = async ({ query }) => {
 		let data = await querySearch(query);
@@ -38,9 +43,9 @@ export default function Icons() {
 					getAllIcons();
 				} else {
 					messages(
-						"info",
+						"error",
 						"Debes colocar alguna palabra",
-						"Dentro del cuadro de texto"
+						"Para empezar a buscar"
 					);
 				}
 			}
@@ -53,11 +58,34 @@ export default function Icons() {
 		}
 	};
 
+	const onLoadingClick = () => {
+		setLoading(true);
+		setOffsetSelected(offsetSelected + 50);
+		getPartialcons();
+		setTimeout(() => {
+			setLoading(false);
+		}, 3000);
+	};
+
 	const getAllIcons = async () => {
-		let allIcons = await IconsService.searchIcons(valueSelected);
+		let allIcons = await IconsService.searchIcons(
+			valueSelected,
+			categorySelected,
+			offsetSelected
+		);
 		setListOfIcons(allIcons);
 	};
 
+	const getPartialcons = async () => {
+		let allIcons = await IconsService.searchIcons(
+			valueSelected,
+			categorySelected,
+			offsetSelected + 50
+		);
+		console.log(offsetSelected);
+		setListOfIcons([...listOfIcons, ...allIcons]);
+	};
+
 	const getIconToDownload = async (id, commonName) => {
 		try {
 			await IconsService.getIcon(id).then(({ data }) => {
@@ -89,59 +117,149 @@ export default function Icons() {
 		toast.current.show({ severity, summary, detail, life: 3000 });
 	};
 
+	const cleanFilters = () => {
+		setListSearch([]);
+		setValueSelected(null);
+		setCategorySelected("all");
+		setOffsetSelected(0);
+		setListOfIcons([]);
+	};
+
+	const categories = [
+		{ label: "Todos los estilos", value: "all" },
+		{ label: "Emoji", value: "emoji" },
+		{ label: "iOS | Outlined", value: "ios7" },
+		{ label: "iOS | Filled", value: "ios_filled" },
+		{ label: "iOS | Glyph", value: "ios11" },
+		{ label: "Material | Filled", value: "androidL" },
+		{ label: "Material | Outlined", value: "m_outlined" },
+		{ label: "Material | Rounded", value: "m_rounded" },
+		{ label: "Material | Sharp", value: "m_sharp" },
+		{ label: "Material | Two Tone", value: "m_two_tone" },
+		{ label: "Color", value: "color" },
+		{ label: "Simple Small", value: "p1em" },
+		{ label: "Glyph Neue", value: "glyph-neue" },
+		{ label: "Color Glass", value: "clr-gls" },
+		{ label: "Stickers", value: "stickers" },
+		{ label: "Office | XS", value: "office16" },
+		{ label: "Office | S", value: "office30" },
+		{ label: "Office | M", value: "office40" },
+		{ label: "Office | L", value: "office80" },
+		{ label: "Cute | Outlined", value: "Dusk_Wired" },
+		{ label: "Cute | Color", value: "dusk" },
+		{ label: "Cute | Clipart", value: "cool" },
+		{ label: "Blue UI", value: "ultraviolet" },
+		{ label: "Dotted", value: "dotty" },
+		{ label: "Gradient", value: "nolan" },
+		{ label: "Pastel | Outlined", value: "cotton" },
+		{ label: "Pastel | Glyph", value: "pastel_glyph" },
+		{ label: "Ice Cream", value: "android" },
+		{ label: "Fluency", value: "fluent" },
+		{ label: "Fluency System | Regular", value: "fluent-systems-regular" },
+		{ label: "Fluency System | Filled", value: "fluent-systems-filled" },
+		{ label: "Plumpy", value: "plumpy" },
+		{ label: "Doodle", value: "doodle" },
+		{ label: "Infographic", value: "flat_round" },
+		{ label: "Windows | Metro", value: "win8" },
+		{ label: "Windows | 10", value: "win10" },
+		{ label: "Cloud", value: "clouds" },
+		{ label: "Bubbles", value: "bubbles" },
+		{ label: "Hand Drawn | Outlined", value: "carbon_copy" },
+		{ label: "Hand Drawn | Color", value: "plasticine" },
+	];
+
 	return (
 		<div style={{ color: "var(--yellow-50)", fontFamily: "Poppins" }}>
 			<Menu />
 			<Toast ref={toast}></Toast>
-			<div className="p-grid p-dir-col p-text-center p-p-4">
-				<div className="p-col">
-					<div className="p-text-bold" style={{ fontSize: "40px" }}>
-						Iconos
-					</div>
-
-					<div
-						className="p-mb-2 p-text-justify p-text-sm-center"
-						style={{ fontSize: "25px" }}
-					>
-						Empieza a buscar algún icono en el campo de texto
-					</div>
+			<div className="p-text-center p-p-4">
+				<div className="p-text-bold" style={{ fontSize: "40px" }}>
+					Iconos
 				</div>
-				<div className="p-col">
-					<AutoComplete
-						className=""
-						value={valueSelected}
-						suggestions={listSearch}
-						completeMethod={searchWithText}
-						onChange={(e) => setValueSelected(e.value)}
-						inputStyle={{ fontSize: "25px" }}
-						onKeyPress={({ key }) => searchIcons(key)}
-					/>
-					<br />
-					<br />
-					<Button
-						label="Buscar"
-						icon="pi pi-search"
-						className="p-button-lg"
-						onClick={() => searchIcons("Enter")}
-					/>
+				<div
+					className="p-mb-2 p-text-justify p-text-sm-center"
+					style={{ fontSize: "25px" }}
+				>
+					Empieza a buscar algún icono en el campo de texto
 				</div>
-				<div className="p-col">
+			</div>
+
+			<div className="p-grid p-text-center">
+				<div className="p-col-12 p-md-6 p-md-offset-3">
 					<div className="p-grid">
-						{listOfIcons.length === 0 ? (
-							<IconSkeleton />
-						) : (
-							listOfIcons &&
-							listOfIcons.map((i, key) => (
-								<IconCard
-									payload={i}
-									key={key}
-									getIconToDownload={getIconToDownload}
-								/>
-							))
-						)}
+						<div className="p-col">
+							<AutoComplete
+								placeholder="Busca iconos..."
+								value={valueSelected}
+								suggestions={listSearch}
+								completeMethod={searchWithText}
+								onChange={(e) => setValueSelected(e.value)}
+								onKeyPress={({ key }) => searchIcons(key)}
+								inputStyle={{ width: "20em" }}
+							/>
+						</div>
+						<div className="p-col">
+							<Dropdown
+								options={categories}
+								value={categorySelected}
+								emptyMessage="No hay opciones"
+								placeholder="Selecciona una categoría"
+								onChange={(e) => setCategorySelected(e.value)}
+								style={{ width: "20em" }}
+							/>
+						</div>
+						<div className="p-col">
+							<Button
+								label="Buscar"
+								icon="pi pi-search"
+								className="p-button"
+								onClick={() => searchIcons("Enter")}
+							/>
+						</div>
+						<div className="p-col">
+							<Button
+								label="Borrar filtros"
+								className="p-button-link"
+								onClick={() => cleanFilters()}
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
+
+			<div className="p-grid p-p-4">
+				{valueSelected === null ? (
+					<div className="p-col-12 p-text-center">
+						<h1>Empieza por buscar algunos iconos</h1>
+						<img
+							src={Empty}
+							alt="empty"
+							width={300}
+							style={{ backgroundColor: "var(--yellow-400)" }}
+						/>
+					</div>
+				) : listOfIcons.length === 0 ? (
+					<IconSkeleton />
+				) : (
+					listOfIcons &&
+					listOfIcons.map((i, key) => (
+						<IconCard
+							payload={i}
+							key={key}
+							getIconToDownload={getIconToDownload}
+						/>
+					))
+				)}
+				{listOfIcons.length !== 0 && (
+					<div className="p-col-12 p-text-center p-mt-5">
+						<Button
+							label="Cargar más iconos..."
+							loading={loading}
+							onClick={onLoadingClick}
+						/>
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }
diff --git a/src/service/IconsService.js b/src/service/IconsService.js
@@ -1,18 +1,19 @@
 import axios from "axios";
+const CORS_ENDPONIT = "https://allowingcors.herokuapp.com/";
 const body = { nothing: "nothing" };
 
 class IconsService {
 	autoComplete(text) {
 		return axios.get(
-			`https://allowingcors.herokuapp.com/https://search.icons8.com/api/iconsets/autocomplete?term=${text}&limit=10&platform=all`,
+			`${CORS_ENDPONIT}https://search.icons8.com/api/iconsets/autocomplete?term=${text}&limit=10&platform=all`,
 			body
 		);
 	}
 
-	async searchIcons(query) {
+	async searchIcons(query, platform = 'all', offset = 0) {
 		return await axios
 			.get(
-				`https://allowingcors.herokuapp.com/https://search.icons8.com/api/iconsets/v5/search?term=${query}&amount=100&platform=all&authors=all`,
+				`${CORS_ENDPONIT}https://search.icons8.com/api/iconsets/v5/search?term=${query}&amount=50&offset=${offset}&platform=${platform}&authors=all`,
 				body
 			)
 			.then(({ data: { icons } }) => icons)
@@ -21,10 +22,12 @@ class IconsService {
 
 	getIcon(id) {
 		return axios.get(
-			`https://allowingcors.herokuapp.com/https://api-icons.icons8.com/siteApi/icons/icon?id=${id}&svg=true`,
+			`${CORS_ENDPONIT}https://api-icons.icons8.com/siteApi/icons/icon?id=${id}&svg=true`,
 			body
 		);
 	}
 }
 
 export default new IconsService();
+
+// https://img.icons8.com/?id=e7CuBNEMwjao&format=gif&name=icons8-document.gif&fromSite=true&token=&color=000000