(false);
+
+ const handleChangePage = (value: number) => {
+ setPage(value);
+ };
+ const handleChangeLimit = (value: number) => {
+ setLimit(value);
+ setPage(0);
+ };
+ const handleChangeOrder = (value: string) => {
+ setOrder(value);
+ setPage(0);
+ };
+
+ const handleLoadMore = () => {
+ setPage((prevPage) => prevPage + 1);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ };
+};
+
+export default withFilters;
diff --git a/src/HOC/withMuiButton.tsx b/src/HOC/withMuiButton.tsx
new file mode 100644
index 00000000..63c50cf1
--- /dev/null
+++ b/src/HOC/withMuiButton.tsx
@@ -0,0 +1,18 @@
+import React, {ReactNode} from "react";
+import MuiButton, { ButtonProps } from "@mui/material/Button";
+
+export interface withMUIButtonProps extends ButtonProps {
+ children?: ReactNode;
+}
+
+const withMuiButton = (
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: withMUIButtonProps) => {
+ return (
+ {props.children}
+ );
+ };
+};
+
+export default withMuiButton;
diff --git a/src/HOC/withMuiCard.tsx b/src/HOC/withMuiCard.tsx
new file mode 100644
index 00000000..a63c1deb
--- /dev/null
+++ b/src/HOC/withMuiCard.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Card, { CardProps } from "@mui/material/Card";
+
+export interface withMuiCardProps extends CardProps {}
+
+const withMuiCard =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: P & withMuiCardProps) => {
+ return
+ {props.children}
+ ;
+ };
+};
+
+export default withMuiCard;
diff --git a/src/HOC/withMuiCardMedia.tsx b/src/HOC/withMuiCardMedia.tsx
new file mode 100644
index 00000000..f23da8af
--- /dev/null
+++ b/src/HOC/withMuiCardMedia.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import CardMedia, { CardMediaProps } from "@mui/material/CardMedia";
+
+export interface withMuiCardMediaProps extends CardMediaProps {
+ url: string;
+}
+
+const withMuiCardMedia =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: P & withMuiCardMediaProps) => {
+ return (
+
+ {props.children}
+
+ );
+ };
+};
+
+export default withMuiCardMedia;
diff --git a/src/HOC/withMuiContainer.tsx b/src/HOC/withMuiContainer.tsx
new file mode 100644
index 00000000..d2c5b980
--- /dev/null
+++ b/src/HOC/withMuiContainer.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import MuiContainer, { ContainerProps } from "@mui/material/Container";
+
+const style = { display: "grid", gap: "10px", justifySelf: 'center',margin: 0, padding: 0 };
+
+export interface withMuiContainerProps extends ContainerProps {}
+
+const withMuiContainer =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: P) => {
+ return (
+
+ {props.children}
+
+ );
+ };
+};
+
+export default withMuiContainer;
diff --git a/src/HOC/withMuiDropdown.tsx b/src/HOC/withMuiDropdown.tsx
new file mode 100644
index 00000000..f4b08b65
--- /dev/null
+++ b/src/HOC/withMuiDropdown.tsx
@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+import Select, { BaseSelectProps } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+
+export interface withMUISelectProps extends BaseSelectProps {
+ values: any[]
+ value: any
+ onChange: (e: any) => any
+ children?: ReactNode;
+}
+
+const withMuiDropdown =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: withMUISelectProps) => {
+ return (
+
+ );
+ };
+};
+
+export default withMuiDropdown;
diff --git a/src/HOC/withMuiHeader.tsx b/src/HOC/withMuiHeader.tsx
new file mode 100644
index 00000000..6142314d
--- /dev/null
+++ b/src/HOC/withMuiHeader.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import AppBar, { AppBarProps } from "@mui/material/AppBar";
+
+export interface withMuiHeaderProps extends AppBarProps {}
+
+const withMuiHeader =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: P & withMuiHeaderProps) => {
+ return (
+
+ {props.children}
+
+ );
+ };
+};
+
+export default withMuiHeader;
diff --git a/src/HOC/withMuiListItem.tsx b/src/HOC/withMuiListItem.tsx
new file mode 100644
index 00000000..60764cfe
--- /dev/null
+++ b/src/HOC/withMuiListItem.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ListItemButton, {ListItemButtonProps} from '@mui/material/ListItemButton';
+
+const style = {
+ cursor: 'pointer'
+}
+
+export interface withMuiListItemProps extends ListItemButtonProps {}
+
+const withMuiListItem =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: withMuiListItemProps) => {
+ return {props.children};
+ };
+};
+
+export default withMuiListItem;
diff --git a/src/HOC/withMuiModal.tsx b/src/HOC/withMuiModal.tsx
new file mode 100644
index 00000000..345573e7
--- /dev/null
+++ b/src/HOC/withMuiModal.tsx
@@ -0,0 +1,51 @@
+import React, { ReactNode } from "react";
+import Dialog, {DialogProps} from "@mui/material/Dialog";
+import DialogContent from '@mui/material/DialogContent';
+import Box from "@mui/material/Box";
+import Button from "Components/Button";
+import CloseIcon from '@mui/icons-material/Close';
+
+const style = {
+ overflow: "scroll",
+};
+
+const styleCloseBtn = {
+ position: 'absolute' as const,
+ right: 8,
+ top: 8,
+ borderRadius: "50%",
+ background: "#00000050",
+ width: "50px",
+ minWidth: "50px",
+ height: "50px",
+ zIndex: 2,
+ color: 'white'
+ };
+
+export interface withMuiModalProps extends DialogProps {
+ open: boolean;
+ onClose: () => void;
+ children: ReactNode;}
+
+const withMuiModal =
(
+ WrappedComponent: React.ComponentType
+) => {
+ return (props: withMuiModalProps) => {
+ return (
+
+ );
+ };
+};
+
+export default withMuiModal;
diff --git a/src/Models/Cat.ts b/src/Models/Cat.ts
new file mode 100644
index 00000000..57bc5e2e
--- /dev/null
+++ b/src/Models/Cat.ts
@@ -0,0 +1,50 @@
+export interface Cat {
+ id: string;
+ url: string;
+ breeds: Breed[];
+ width: number;
+ height: number;
+}
+
+export interface Breed {
+ adaptability: number;
+ affection_level: number;
+ alt_names: string;
+ cfa_url: string;
+ child_friendly: number;
+ country_code: string;
+ country_codes: string;
+ description: string;
+ dog_friendly: number;
+ energy_level: number;
+ experimental: number;
+ grooming: number;
+ hairless: number;
+ health_issues: number;
+ hypoallergenic: number;
+ id: string;
+ indoor: number;
+ intelligence: number;
+ lap: number;
+ life_span: string;
+ name: string;
+ natural: number;
+ origin: string;
+ rare: number;
+ reference_image_id: string;
+ rex: number;
+ shedding_level: number;
+ short_legs: number;
+ social_needs: number;
+ stranger_friendly: number;
+ suppressed_tail: number;
+ temperament: string;
+ vcahospitals_url: string;
+ vetstreet_url: string;
+ vocalisation: number;
+ weight: {
+ imperial: string;
+ metric: string;
+ };
+ wikipedia_url: string;
+}
diff --git a/src/Pages/Breeds.tsx b/src/Pages/Breeds.tsx
new file mode 100644
index 00000000..fd77840e
--- /dev/null
+++ b/src/Pages/Breeds.tsx
@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from "react";
+import { useModal } from "Context/ModalContext";
+import { Breed } from "Models/Cat";
+import { getBreeds, getCatsByBreed } from "Services/service";
+import ListItem from "Components/ListItem";
+import { useParams, useNavigate } from "react-router-dom";
+import BreedDetails from "Widgets/BreedDetails";
+import withFilters, { WithFiltersProps } from "HOC/withFilters";
+
+interface BreedProps extends WithFiltersProps {}
+
+const Breeds = (props: BreedProps) => {
+ const [breeds, setBreeds] = useState([]);
+
+ const { id } = useParams<{ id?: string }>();
+ const { openModal } = useModal();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ fetchBreeds();
+ }, [props.limit, props.page, props.order]);
+
+ useEffect(() => {
+ if (id) {
+ fetchBreedById(id);
+ }
+ }, [id]);
+
+ const fetchBreeds = async () => {
+ try {
+ const data = await getBreeds({
+ limit: props.limit,
+ page: props.page,
+ order: props.order,
+ });
+ if (data) {
+ if (props.page === 0) {
+ setBreeds(data);
+ } else {
+ setBreeds((prevData) => [...prevData, ...data]);
+ }
+ if (data.length < props.limit) {
+ props.setLoadMoreDisabled(true);
+ }
+ }
+ } catch (error) {}
+ };
+
+ const fetchBreedById = async (id: string) => {
+ try {
+ const content = ;
+ openModal(content);
+ } catch (error) {}
+ };
+
+ const handleClick = React.useMemo(
+ () => (breed: Breed) => {
+ navigate(`/breeds/${breed.id}`, { replace: true });
+ },
+ []
+ );
+
+ return breeds.map((breed, index) => (
+ handleClick(breed)}>
+ {breed.name}
+
+ ));
+};
+
+export default withFilters(Breeds);
diff --git a/src/Pages/Favorites.tsx b/src/Pages/Favorites.tsx
new file mode 100644
index 00000000..7583f929
--- /dev/null
+++ b/src/Pages/Favorites.tsx
@@ -0,0 +1,81 @@
+import React, { useContext, useEffect, useState } from "react";
+import { useFavorites } from "Context/FavoritesContext";
+import Item from "Widgets/Item";
+import { getCat, getCatsByBreed } from "Services/service";
+import { Cat } from "Models/Cat";
+import { useModal } from "Context/ModalContext";
+import ItemDetails from "Widgets/ItemDetails";
+import { useNavigate, useParams } from "react-router-dom";
+import withFilters, {WithFiltersProps, ORDER} from "HOC/withFilters";
+
+interface Favorites extends WithFiltersProps {}
+
+const Favorites = (props: Favorites) => {
+ const { favorites } = useFavorites();
+ const [favoriteCats, setFavoriteCats] = useState([]);
+ const { id } = useParams<{ id?: string }>();
+ const navigate = useNavigate();
+
+ const { openModal } = useModal();
+
+ React.useEffect(() => {
+ const newFavs = favoriteCats.filter((fav) => favorites.includes(fav.id))
+ setFavoriteCats(newFavs)
+ }, [favorites]);
+
+ React.useEffect(() => {
+ if (id) {
+ fetchDataById(id);
+ }
+ }, [id]);
+
+ useEffect(() => {
+ fetchFavorites();
+ }, [props.limit, props.page, props.order]);
+
+ const fetchFavorites = async () => {
+ const sortedFavs = props.order === ORDER.ASC ? favorites : favorites.reverse()
+ const cats: Cat[] = (await Promise.all(
+ sortedFavs
+ .slice(favoriteCats.length, favoriteCats.length + props.limit)
+ .map(async (favorite) => await getCat(favorite))
+ )).filter((cat) => cat !== undefined);
+
+ if (cats) {
+ if (props.page === 0) {
+ setFavoriteCats(cats);
+ } else {
+ setFavoriteCats((prevData) => [...prevData, ...cats]);
+ }
+ if (cats.length < props.limit) {
+ props.setLoadMoreDisabled(true);
+ }
+ }
+ };
+
+ const fetchDataById = async (id: string) => {
+ try {
+ const cat = await getCat(id);
+ if (cat) {
+ handleOpenModal(cat);
+ }
+ } catch (error) {}
+ };
+
+ const handleOpenModal = (item: Cat) => {
+ openModal();
+ };
+
+ const handleClick = React.useMemo(
+ () => (item: Cat) => {
+ navigate(`/favorites/${item.id}`, { replace: true });
+ },
+ []
+ );
+ return (favoriteCats.map((favorite) => (
+ - {}} showFav {...data} />
+
+
+ {data.breeds &&
+ data.breeds.map((breed) => (
+
handleBreedClick(breed.id)} style={{cursor: 'pointer'}}>
+
{breed.name}
+ {breed.description}
+
+ ))}
+
+
+ );
+};
+
+export default ItemDetails;
diff --git a/src/Widgets/Layout.tsx b/src/Widgets/Layout.tsx
new file mode 100644
index 00000000..afdfffa3
--- /dev/null
+++ b/src/Widgets/Layout.tsx
@@ -0,0 +1,18 @@
+import ErrorBoundary from 'Components/ErrorBoundary';
+import * as React from 'react'
+import AppBar from 'Widgets/AppBar';
+import Dialog from "Widgets/Dialog";
+
+interface Props {
+ children: React.ReactNode
+}
+const Layout: React.FC = (props) => {
+ return (
+
+
+ {props.children}
+
+
+ )
+}
+export default Layout
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 00000000..df521593
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ React App
+
+
+
+
+
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 00000000..0f00427f
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import { createRoot } from "react-dom/client";
+import App from './App';
+
+const element = document.getElementById('root') as HTMLElement
+
+const root = createRoot(element)
+
+root.render()
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..a77da82d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "outDir": "./dist",
+ "module": "ESNext",
+ "target": "ES6",
+ "allowJs": true,
+ "jsx": "react",
+ "lib": ["DOM", "ES6"],
+ "moduleResolution": "Node",
+ "baseUrl": "./src",
+ "strict": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "paths": {
+ "Components": ["Components"],
+ "Pages": ["Pages"],
+ "Models": ["Models"],
+ "Context": ["Context"],
+ "HOC": ["HOC"],
+ "Services": ["Services"],
+ "Widgets": ["Widgets"]
+ }
+ },
+ "include": ["src/**/*"]
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..400a0556
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,63 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const webpack = require('webpack')
+const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+module.exports = {
+ mode: "development",
+ entry: "./src/index.tsx",
+ output: {
+ path: path.resolve(__dirname, "dist"),
+ filename: "bundle.js",
+ publicPath: ""
+ },
+ devtool: 'source-map',
+ resolve: {
+ extensions: [".ts", ".tsx", ".js"],
+ alias: {
+ Components: path.resolve(__dirname, 'src/Components'),
+ Pages: path.resolve(__dirname, 'src/Pages'),
+ Models: path.resolve(__dirname, 'src/Models'),
+ Context: path.resolve(__dirname, 'src/Context'),
+ HOC: path.resolve(__dirname, 'src/HOC'),
+ Services: path.resolve(__dirname, 'src/Services'),
+ Widgets: path.resolve(__dirname, 'src/Widgets')
+ }
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(ts|tsx)$/,
+ use: "ts-loader",
+ exclude: /node_modules/
+ },
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ },
+ {
+ test: /\.(png|jpg|jpeg|gif|svg)$/,
+ use: ["file-loader"]
+ }
+ ]
+ },
+ plugins: [
+ new CleanWebpackPlugin(),
+ new HtmlWebpackPlugin({
+ template: "src/index.html"
+ }),
+ new webpack.DefinePlugin({
+ 'process.env': JSON.stringify(dotenv.parsed),
+ 'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
+ })
+ ],
+ devServer: {
+ historyApiFallback: true,
+ client: {
+ overlay: false,
+ },
+ open: ['/home'],
+ },
+};