From b3b4c74c5fb45b5db0b284f2adf11f8e5fab5adf Mon Sep 17 00:00:00 2001
From: Arthur Green <curious.dev@icloud.com>
Date: Fri, 27 Oct 2023 12:09:16 +0400
Subject: [PATCH] refactor: folder stracture (#52)

---
 .github/workflows/lint-bun.yml                |  2 +-
 app/Loading.tsx                               | 10 --------
 app/custom.d.ts => custom.d.ts                |  0
 {app => src/api}/api.ts                       |  0
 src/api/index.ts                              |  1 +
 {app => src/app}/App.css                      |  0
 {app => src/app}/error.tsx                    |  0
 {app => src/app}/favicon.svg                  |  0
 {app => src/app}/index.css                    |  0
 {app => src/app}/layout.tsx                   |  0
 src/app/loading.tsx                           |  6 +++++
 {app => src/app}/manufacturers/[id]/page.tsx  |  0
 {app => src/app}/not-found.tsx                |  0
 {app => src/app}/page.tsx                     |  2 +-
 {app => src/app}/reducers.ts                  |  0
 {app => src/app}/sagas.ts                     |  0
 .../components/layout/grid.module.css         |  0
 src/components/loader/Loader.tsx              | 10 ++++++++
 src/components/loader/index.ts                |  1 +
 .../components/loader/loader.module.css       |  2 ++
 .../Table => src/components/table}/Table.tsx  | 24 +++++++++----------
 .../Table => src/components/table}/index.ts   |  0
 .../components/table}/table.module.css        |  6 ++---
 {app => src}/components/toLamaCase.ts         |  0
 {app => src}/helpers/constants.ts             |  0
 .../helpers/getEmojiFlagByISO.test.ts         |  0
 {app => src}/helpers/getEmojiFlagByISO.ts     |  0
 {app => src}/helpers/helpers.css              |  0
 tsconfig.json                                 | 13 ++++------
 29 files changed, 42 insertions(+), 35 deletions(-)
 delete mode 100644 app/Loading.tsx
 rename app/custom.d.ts => custom.d.ts (100%)
 rename {app => src/api}/api.ts (100%)
 create mode 100644 src/api/index.ts
 rename {app => src/app}/App.css (100%)
 rename {app => src/app}/error.tsx (100%)
 rename {app => src/app}/favicon.svg (100%)
 rename {app => src/app}/index.css (100%)
 rename {app => src/app}/layout.tsx (100%)
 create mode 100644 src/app/loading.tsx
 rename {app => src/app}/manufacturers/[id]/page.tsx (100%)
 rename {app => src/app}/not-found.tsx (100%)
 rename {app => src/app}/page.tsx (89%)
 rename {app => src/app}/reducers.ts (100%)
 rename {app => src/app}/sagas.ts (100%)
 rename {app => src}/components/layout/grid.module.css (100%)
 create mode 100644 src/components/loader/Loader.tsx
 create mode 100644 src/components/loader/index.ts
 rename app/Loading.css => src/components/loader/loader.module.css (99%)
 rename {app/components/Table => src/components/table}/Table.tsx (69%)
 rename {app/components/Table => src/components/table}/index.ts (100%)
 rename {app/components/Table => src/components/table}/table.module.css (87%)
 rename {app => src}/components/toLamaCase.ts (100%)
 rename {app => src}/helpers/constants.ts (100%)
 rename {app => src}/helpers/getEmojiFlagByISO.test.ts (100%)
 rename {app => src}/helpers/getEmojiFlagByISO.ts (100%)
 rename {app => src}/helpers/helpers.css (100%)

diff --git a/.github/workflows/lint-bun.yml b/.github/workflows/lint-bun.yml
index 3e40ac0..4bc6ad6 100644
--- a/.github/workflows/lint-bun.yml
+++ b/.github/workflows/lint-bun.yml
@@ -1,4 +1,4 @@
-name: Code Linting
+name: Code Linting with Bun
 
 on: push
 
diff --git a/app/Loading.tsx b/app/Loading.tsx
deleted file mode 100644
index e69489c..0000000
--- a/app/Loading.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import './loading.css';
-
-const Loading = () => (
-  <>
-    {/* <div className="loading-icon_animated" /> */}
-    <h3>Loading...</h3>
-  </>
-);
-
-export default Loading;
diff --git a/app/custom.d.ts b/custom.d.ts
similarity index 100%
rename from app/custom.d.ts
rename to custom.d.ts
diff --git a/app/api.ts b/src/api/api.ts
similarity index 100%
rename from app/api.ts
rename to src/api/api.ts
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..b7148b0
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1 @@
+export { getManufacturers } from './api'
diff --git a/app/App.css b/src/app/App.css
similarity index 100%
rename from app/App.css
rename to src/app/App.css
diff --git a/app/error.tsx b/src/app/error.tsx
similarity index 100%
rename from app/error.tsx
rename to src/app/error.tsx
diff --git a/app/favicon.svg b/src/app/favicon.svg
similarity index 100%
rename from app/favicon.svg
rename to src/app/favicon.svg
diff --git a/app/index.css b/src/app/index.css
similarity index 100%
rename from app/index.css
rename to src/app/index.css
diff --git a/app/layout.tsx b/src/app/layout.tsx
similarity index 100%
rename from app/layout.tsx
rename to src/app/layout.tsx
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..4484de2
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,6 @@
+import Loader from '@/components/loader'
+
+export default function Loading() {
+  // Or a custom loading skeleton component
+  return <Loader />
+}
diff --git a/app/manufacturers/[id]/page.tsx b/src/app/manufacturers/[id]/page.tsx
similarity index 100%
rename from app/manufacturers/[id]/page.tsx
rename to src/app/manufacturers/[id]/page.tsx
diff --git a/app/not-found.tsx b/src/app/not-found.tsx
similarity index 100%
rename from app/not-found.tsx
rename to src/app/not-found.tsx
diff --git a/app/page.tsx b/src/app/page.tsx
similarity index 89%
rename from app/page.tsx
rename to src/app/page.tsx
index 174b560..05fc483 100644
--- a/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 // import { useEffect, useState } from 'react';
 
 import Table from '@/components/table';
-import { getManufacturers } from './api';
+import { getManufacturers } from '@/api/index';
 
 import styles from '@/components/layout/grid.module.css';
 
diff --git a/app/reducers.ts b/src/app/reducers.ts
similarity index 100%
rename from app/reducers.ts
rename to src/app/reducers.ts
diff --git a/app/sagas.ts b/src/app/sagas.ts
similarity index 100%
rename from app/sagas.ts
rename to src/app/sagas.ts
diff --git a/app/components/layout/grid.module.css b/src/components/layout/grid.module.css
similarity index 100%
rename from app/components/layout/grid.module.css
rename to src/components/layout/grid.module.css
diff --git a/src/components/loader/Loader.tsx b/src/components/loader/Loader.tsx
new file mode 100644
index 0000000..9cfee5a
--- /dev/null
+++ b/src/components/loader/Loader.tsx
@@ -0,0 +1,10 @@
+import loader from './loader.module.css';
+
+const Loader = () => (
+  <>
+    <div className={loader['loading-icon_animated']} />
+    <h3>Loading...</h3>
+  </>
+);
+
+export default Loader;
diff --git a/src/components/loader/index.ts b/src/components/loader/index.ts
new file mode 100644
index 0000000..348c02a
--- /dev/null
+++ b/src/components/loader/index.ts
@@ -0,0 +1 @@
+export { default } from './Loader';
diff --git a/app/Loading.css b/src/components/loader/loader.module.css
similarity index 99%
rename from app/Loading.css
rename to src/components/loader/loader.module.css
index 9e2cc2b..caf50b7 100644
--- a/app/Loading.css
+++ b/src/components/loader/loader.module.css
@@ -16,6 +16,7 @@
     transform: rotate(220deg);
   }
 }
+
 .loading-icon_animated:after {
   animation: animate2 1.5s ease-in-out infinite;
   clip: rect(0, 80px, 80px, 40px);
@@ -25,6 +26,7 @@
   height: 80px;
   content: '';
 }
+
 @keyframes animate2 {
   0% {
     transform: rotate(-140deg);
diff --git a/app/components/Table/Table.tsx b/src/components/table/Table.tsx
similarity index 69%
rename from app/components/Table/Table.tsx
rename to src/components/table/Table.tsx
index e207f21..994e276 100644
--- a/app/components/Table/Table.tsx
+++ b/src/components/table/Table.tsx
@@ -7,7 +7,7 @@ import { getFlagByCountryName } from '@/helpers/getEmojiFlagByISO';
 // import { toLamaCase } from './toLamaCase';
 
 import '@/helpers/helpers.css';
-import styles from './table.module.css';
+import table from './table.module.css';
 
 interface TableProps {
   manufacturers: Array<any> | null;
@@ -17,34 +17,34 @@ const Table = ({ manufacturers }: TableProps) => {
   const router = useRouter();
 
   return (
-    <table className={styles.table}>
+    <table className={table.default}>
       <thead>
         <tr>
-          <td className={[styles.heading, 'txt-right'].join(' ')}>ID</td>
-          <td className={[styles.heading, 'txt-right'].join(' ')}>
+          <td className={[table.heading, 'txt-right'].join(' ')}>ID</td>
+          <td className={[table.heading, 'txt-right'].join(' ')}>
             Common name
           </td>
-          <td className={styles.heading}>Country</td>
-          <td className={styles.heading} />
+          <td className={table.heading}>Country</td>
+          <td className={table.heading} />
         </tr>
       </thead>
       <tbody>
         {manufacturers?.map(
           ({ Mfr_ID: Id, Country, Mfr_CommonName: Name, Mfr_Name }) => (
-            <tr key={Id} className={styles.row}>
+            <tr key={Id} className={table.row}>
               <td
                 className={[
-                  styles.cell,
+                  table.cell,
                   'txt-right',
-                  styles['table-cell_secondary'],
+                  table['cell_secondary'],
                 ].join(' ')}
               >
                 {Id}
               </td>
-              <td className={[styles.cell, 'txt-left'].join(' ')}>
+              <td className={[table.cell, 'txt-left'].join(' ')}>
                 {Name ? Name : Mfr_Name}
               </td>
-              <td className={styles.cell}>
+              <td className={table.cell}>
                 {Country} {getFlagByCountryName(Country)}
               </td>
               <td>
@@ -54,7 +54,7 @@ const Table = ({ manufacturers }: TableProps) => {
                     router.push(`/manufacturers/${Id}`);
                   }}
                   href={`/manufacturers/${Id}`}
-                  className={styles['table-cell__link']}
+                  className={table['cell__link']}
                 >
                   <ArrowTopRightOnSquareIcon width={18} height={18} />
                 </a>
diff --git a/app/components/Table/index.ts b/src/components/table/index.ts
similarity index 100%
rename from app/components/Table/index.ts
rename to src/components/table/index.ts
diff --git a/app/components/Table/table.module.css b/src/components/table/table.module.css
similarity index 87%
rename from app/components/Table/table.module.css
rename to src/components/table/table.module.css
index fd2ebc1..24f87e2 100644
--- a/app/components/Table/table.module.css
+++ b/src/components/table/table.module.css
@@ -1,4 +1,4 @@
-.table {
+.default {
   margin-bottom: 20px;
   border-collapse: collapse;
   border-spacing: 0;
@@ -21,10 +21,10 @@
   padding: 1px 8px 1px 1px;
 }
 
-.table-cell_secondary {
+.cell_secondary {
   color: #5c5c5c;
 }
 
-.table-cell__link {
+.cell__link {
   color: #373737;
 }
diff --git a/app/components/toLamaCase.ts b/src/components/toLamaCase.ts
similarity index 100%
rename from app/components/toLamaCase.ts
rename to src/components/toLamaCase.ts
diff --git a/app/helpers/constants.ts b/src/helpers/constants.ts
similarity index 100%
rename from app/helpers/constants.ts
rename to src/helpers/constants.ts
diff --git a/app/helpers/getEmojiFlagByISO.test.ts b/src/helpers/getEmojiFlagByISO.test.ts
similarity index 100%
rename from app/helpers/getEmojiFlagByISO.test.ts
rename to src/helpers/getEmojiFlagByISO.test.ts
diff --git a/app/helpers/getEmojiFlagByISO.ts b/src/helpers/getEmojiFlagByISO.ts
similarity index 100%
rename from app/helpers/getEmojiFlagByISO.ts
rename to src/helpers/getEmojiFlagByISO.ts
diff --git a/app/helpers/helpers.css b/src/helpers/helpers.css
similarity index 100%
rename from app/helpers/helpers.css
rename to src/helpers/helpers.css
diff --git a/tsconfig.json b/tsconfig.json
index aaf52d1..3f09e93 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,17 +23,14 @@
       { "name": "typescript-plugin-css-modules" }
     ],
     "paths": {
-      "@/components/*": ["./app/components/*"],
-      "@/helpers/*": ["./app/helpers/*"]
+      "@/components/*": ["./src/components/*"],
+      "@/helpers/*": ["./src/helpers/*"],
+      "@/api/*": ["./src/api/*"],
     }
   },
   "include": [
-    "app/page.tsx",
-    "app/manufacturers/[id]/page.tsx",
-    "app/components",
-    "app/helpers",
-    "app/api.ts",
-    "app/**/*.tsx",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
     ".next/types/**/*.ts"
   ],
   "references": [