Fix Pageing issue

ansulagrawal · May 7, 2023 · a4fe4f0 · a4fe4f0
1 parent 6145112
commit a4fe4f0
Show file tree

Hide file tree

Showing 24 changed files with 652 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,84 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# dependencies
+node_modules
+dist
+dist-ssr
+*.local
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+__snapshots__/
+
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+
+# Compiled Java class files
+*.class
+
+# Compiled Python bytecode
+*.py[cod]
+
+
+# Package files
+*.jar
+
+# Maven
+target/
+
+# JetBrains IDE
+.idea/
+
+# Unit test reports
+TEST*.xml
+
+# Generated by Windows
+Thumbs.db
+
+
+# Applications
+*.app
+*.exe
+*.war
+
+# Large media files
+*.mp4
+*.tiff
+*.avi
+*.flv
+*.mov
+*.wmv
+
+package-lock.json
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Countries Around the World</title>
+  </head>
+  <body class="bg-color">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "rest-countries-api-with-color-theme-switcher",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "author": "Ansul Agrawal",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.10.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.3.1",
+    "vite": "^4.2.0"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import Country from './pages/Country';
+import CountryDetail from './pages/CountryDetail';
+import Home from './pages/Home';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Home />,
+    children: [
+      { path: '/', element: <Country /> },
+      { path: '/:id', element: <CountryDetail /> },
+    ],
+  },
+]);
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}
diff --git a/src/app/apiSlices/api.js b/src/app/apiSlices/api.js
@@ -0,0 +1,39 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const countryApi = createApi({
+  reducerPath: "countryApi",
+  baseQuery: fetchBaseQuery({ baseUrl: "https://restcountries.com/v3.1" }),
+  endpoints: builder => ({
+    getAllCountries: builder.query({
+      query: name => {
+        if (name === "") {
+          return "all";
+        } else return `name/${name.trim()}`;
+      },
+      transformResponse: response => {
+        response.sort((a, b) => {
+          if (a.name.common < b.name.common) {
+            return -1;
+          }
+          if (a.name.common > b.name.common) {
+            return 1;
+          }
+          return 0;
+        });
+        return response;
+      },
+    }),
+    getCountryDetail: builder.query({
+      query: name => {
+        return `name/${name.trim()}?fullText=true`;
+      },
+    }),
+    getBorderCountries: builder.query({
+      query: name => {
+        return `alpha?codes=${name}`;
+      },
+    }),
+  }),
+});
+
+export const { useGetAllCountriesQuery, useGetCountryDetailQuery, useGetBorderCountriesQuery } = countryApi;
diff --git a/src/app/index.js b/src/app/index.js
@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { setupListeners } from "@reduxjs/toolkit/query";
+import { countryApi } from "./apiSlices/api";
+
+export const store = configureStore({
+  reducer: {
+    [countryApi.reducerPath]: countryApi.reducer,
+  },
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(countryApi.middleware),
+});
+
+setupListeners(store.dispatch);
diff --git a/src/assets/ArrowLeft.jsx b/src/assets/ArrowLeft.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function ArrowLeft({ className }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className={className}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+    </svg>
+  );
+}
+
+export default ArrowLeft;
diff --git a/src/assets/MagnifyingGlass.jsx b/src/assets/MagnifyingGlass.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function MagnifyingGlass({ className }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className={className}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+    </svg>
+  );
+}
+
+export default MagnifyingGlass;
diff --git a/src/assets/Moon.jsx b/src/assets/Moon.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+function MoonOutline({ className }) {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth='1.5' stroke='currentColor' className={className}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z'
+      />
+    </svg>
+  );
+}
+
+function MoonSolid({ className }) {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' className={className}>
+      <path
+        fillRule='evenodd'
+        d='M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
+
+export default function Moon({ dark, className }) {
+  return (
+    <>
+      {!dark && <MoonOutline className={className} />}
+      {dark && <MoonSolid className={className} />}
+    </>
+  );
+}
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Card = ({ data: { flags, name, population, region, capital } }) => {
+  return (
+    <div className='groupe text-color bg-color-component w-[330px] h-[400px] flex flex-col sm:w-[280px] rounded-md overflow-hidden cursor-pointer shadow-md easy-in-out duration-300 hover:scale-110'>
+      <div className='h-[180px]  bg-red-500'>
+        <img src={flags.png} alt={`${flags.alt} Flag`} className='h-full w-full object-fill' />
+      </div>
+      <div className='pt-[30px] px-[25px]'>
+        <h2 className='font-extraBold text-[20px]'>{name.common}</h2>
+        <p className='font-semiBold text-[16px] mt-[20px]'>
+          Population: <span className='font-light'>{population}</span>
+        </p>
+        <p className='font-semiBold mt-[5px]'>
+          Region: <span className='font-light'>{region}</span>
+        </p>
+        <p className='font-semiBold mt-[5px]'>
+          Capital: <span className='font-light'>{capital}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/Cards.jsx b/src/components/Cards.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Card from './Card';
+import { useGetAllCountriesQuery } from '../app/apiSlices/api';
+import { Link } from 'react-router-dom';
+import Loading from './Loading.jsx';
+import NotFound from './NotFound.jsx';
+
+const Cards = ({ search, setSearch, setText }) => {
+  const { data, isLoading, isError } = useGetAllCountriesQuery(search.get('search') || '');
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (isError) {
+    return (
+      <NotFound
+        setSearch={setSearch}
+        action={() => {
+          setText('');
+          setSearch({ search: '' });
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className='w-auto flex flex-wrap gap-[100px] justify-center'>
+      {data?.map(data => (
+        <li key={data?.name.common} className='list-none'>
+          <Link to={`${data?.name.common.toLowerCase()}`}>
+            <Card data={data} />
+          </Link>
+        </li>
+      ))}
+    </div>
+  );
+};
+
+export default Cards;
diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default function Loading() {
+  return (
+    <div className='absolute top-[50%] left-[50%]'>
+      <div role='status'>
+        <svg aria-hidden='true' className='w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600' viewBox='0 0 100 101' fill='none' xmlns='http://www.w3.org/2000/svg'>
+          <path
+            d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
+            fill='currentColor'
+          />
+          <path
+            d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
+            fill='currentFill'
+          />
+        </svg>
+        <span className='sr-only'>Loading...</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function NotFound({ action }) {
+  return (
+    <main className='h-screen w-full flex flex-col justify-center items-center bg-[#1A2238]'>
+      <h1 className='text-9xl font-extrabold text-white tracking-widest'>404</h1>
+      <div className='bg-[#FF6A3D] px-2 text-sm rounded rotate-12 absolute'>Page Not Found</div>
+      <div className='mt-5'>
+        <div className='relative inline-block text-sm font-medium text-[#FF6A3D] group active:text-orange-500 focus:outline-none focus:ring'>
+          <span className='absolute inset-0 transition-transform translate-x-0.5 translate-y-0.5 bg-[#FF6A3D] group-hover:translate-y-0 group-hover:translate-x-0'></span>
+
+          <span className='relative block px-8 py-3 bg-[#1A2238] border border-current'>
+            <button onClick={action}>Go Home</button>
+          </span>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export default NotFound;