updated, improved and fixed the entire project

jd-apprentice · Jul 24, 2022 · 7e778a5 · 7e778a5
1 parent bff8839
commit 7e778a5
Show file tree

Hide file tree

Showing 27 changed files with 84 additions and 60 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+REACT_APP_BASE_URL=
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ Make sure you have node.js and git installed
 
 >> cd ./React-Boilerplate
 
+>> cp .env.example .env
+
 >> npm run install
 
 >> npm run start

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React-Boilerplate</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,23 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
+  "short_name": "React Boilerplate",
+  "name": "React + Mui + MobX",
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

diff --git a/public/robots.txt b/public/robots.txt
@@ -1,3 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: *
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
@@ -1,7 +1,3 @@
-export {};
-
-declare global { 
-    interface Window {
-      baseUrl: string;
-    }
-}
+/* Declare modules here if needed */
+/* Example -> */
+// declare module "ModuleName"
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,16 @@
 import { Divider } from "@mui/material";
-import BasicAlerts from "components/common/alert";
-import BasicRating from "components/common/rating";
-import React from "react";
+import { Alert, Rating } from "components/index";
+import React, { ReactElement } from "react";
 
-const App = () => {
+const App: React.FC = (): ReactElement => {
   return (
     <>
       <h1 className="title">React + TS + Sass + Eslint + Prettier + MobX + Apisauce</h1>
       <Divider>
-      <BasicRating text="Quality" />
+        <Rating text="Quality" />
       </Divider>
       <Divider>
-      <BasicAlerts text="This is an sample alert" />
+        <Alert text="This is an sample alert" />
       </Divider>
     </>
   );

diff --git a/src/components/common/alert/index.tsx b/src/components/common/alert/index.tsx
@@ -3,8 +3,7 @@ import Alert from '@mui/material/Alert';
 import Stack from '@mui/material/Stack';
 import { BasicAlertsProps } from 'models/interfaces/types';
 
-const BasicAlerts: React.FC<BasicAlertsProps> = (props: BasicAlertsProps) => {
-  const { text } = props;
+const BasicAlerts: React.FC<BasicAlertsProps> = ({ text }: BasicAlertsProps) => {
   return (
     <Stack sx={{ width: '100%', marginTop: "5px" }} spacing={2}>
       <Alert severity="error">{text}</Alert>

diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -0,0 +1,4 @@
+export { default as Home } from "./section/home/index";
+export { default as About } from "./section/about/index";
+export { default as Alert } from "./common/alert/index";
+export { default as Rating } from "./common/rating/index";
diff --git a/src/components/section/about/index.tsx b/src/components/section/about/index.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react"
+
+const About: React.FC = (): ReactElement => {
+    return <h1>About</h1>
+}
+
+export default About;
diff --git a/src/components/section/home/index.tsx b/src/components/section/home/index.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react"
+
+const Home: React.FC = (): ReactElement => {
+    return <h1>Home</h1>
+}
+
+export default Home;
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -0,0 +1,9 @@
+// You can set your configuration here
+
+const config = {
+    app: {
+        baseURL: process.env.REACT_APP_BASE_URL
+    }
+}
+
+export default config;
diff --git a/src/models/interfaces/types.ts b/src/models/interfaces/types.ts
@@ -1,5 +1,16 @@
+/* eslint-disable camelcase */
 export interface BasicRatingProps {
     text: string
 }
 
+export interface ExampleResponse {
+    id: number;
+    uid: string;
+    account_number: string;
+    iban: string;
+    bank_name: string;
+    routing_number: string;
+    swift_bic: string;
+}
+
 export type BasicAlertsProps = BasicRatingProps
diff --git a/src/services/api-config.ts → src/services/api/api-config.ts b/src/services/api-config.ts → src/services/api/api-config.ts
@@ -1,4 +1,6 @@
-const API_URL = window.config.baseUrl;
+import config from "config/index";
+
+const API_URL = config.app.baseURL || "";
 
 /**
  * The options used to configure the API.

diff --git a/src/services/api-problem.ts → src/services/api/api-problem.ts b/src/services/api-problem.ts → src/services/api/api-problem.ts
diff --git a/src/services/api.ts → src/services/api/api.ts b/src/services/api.ts → src/services/api/api.ts
@@ -1,6 +1,6 @@
 import { ApisauceInstance, create } from "apisauce";
 import { ApiConfig, DEFAULT_API_CONFIG } from "./api-config";
-import { ExampleApi } from "./example";
+import { ExampleApi } from "../index";
 
 /**
  * Manages all requests to the API.

diff --git a/src/services/example.ts → src/services/example/index.ts b/src/services/example.ts → src/services/example/index.ts
@@ -1,6 +1,7 @@
 import { ApiResponse } from "apisauce";
-import { Api } from "./api";
-import { getGeneralApiProblem } from "./api-problem";
+import { ExampleResponse } from "models/interfaces/types";
+import { Api } from "../api/api";
+import { getGeneralApiProblem } from "../api/api-problem";
 
 export class ExampleApi {
   private api: Api;
@@ -9,10 +10,10 @@ export class ExampleApi {
     this.api = api;
   }
 
-  async getExample(): Promise<any> {
+  async getExample() {
     try {
       const response: ApiResponse<never> = await this.api.apisauce.get(
-        `your/route`
+        `bank/random_bank`
       );
       if (!response.ok) {
         const problem = getGeneralApiProblem(response);
@@ -26,7 +27,7 @@ export class ExampleApi {
     }
   }
 
-  async postExample(payload: any):  Promise<any> {
+  async postExample(payload: ExampleResponse) {
     try {
       const response: ApiResponse<never> = await this.api.apisauce.post(
         `your/route`, { payload }
@@ -43,10 +44,10 @@ export class ExampleApi {
     }
   }
 
-  async putExample(id: any):  Promise<any> {
+  async putExample(id: string, payload: ExampleResponse) {
     try {
       const response: ApiResponse<never> = await this.api.apisauce.put(
-        `your/route/${id}`
+        `your/route/${id}`, payload
       );
       if (!response.ok) {
         const problem = getGeneralApiProblem(response);
@@ -60,7 +61,7 @@ export class ExampleApi {
     }
   }
 
-  async deleteExample(id: any):  Promise<any> {
+  async deleteExample(id: string) {
     try {
       const response: ApiResponse<never> = await this.api.apisauce.delete(
         `your/route/${id}`
@@ -77,6 +78,4 @@ export class ExampleApi {
     }
   }
 
-}
-
-
+}
diff --git a/src/services/index.ts b/src/services/index.ts
@@ -0,0 +1 @@
+export * from "./example/index";
diff --git a/src/test/App.test.tsx b/src/test/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from '../App';
+
+test('renders the home pag', () => {
+  render(<App />);
+  const linkElement = screen.getByText("React + TS + Sass + Eslint + Prettier + MobX + Apisauce");
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/src/theme/_fonts.scss b/src/theme/_fonts.scss
@@ -0,0 +1 @@
+// Fonts are declared here
diff --git a/src/theme/_layout.scss b/src/theme/_layout.scss
@@ -0,0 +1 @@
+// General layout styles are declared here
diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
@@ -0,0 +1 @@
+// Variables go here