diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..74afdbd
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+REACT_APP_BASE_URL=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 4d29575..8692cf6 100644
--- 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
index 3101727..d886f39 100644
--- 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
index 9000566..47343e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "template-react",
- "version": "0.1.0",
+ "version": "0.1.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "template-react",
- "version": "0.1.0",
+ "version": "0.1.1",
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
diff --git a/public/index.html b/public/index.html
index aa069f2..67db718 100644
--- 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`.
-->
- React App
+ React-Boilerplate
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a..0000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6..0000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..55b5a38 100644
--- 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
index e9e57dc..26c1d46 100644
--- 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
index 13c5255..849d4e1 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -1,7 +1,3 @@
-export {};
-
-declare global {
- interface Window {
- baseUrl: string;
- }
-}
\ No newline at end of file
+/* Declare modules here if needed */
+/* Example -> */
+// declare module "ModuleName"
\ No newline at end of file
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index 2a68616..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.tsx b/src/App.tsx
index c09d81d..10af084 100644
--- 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 (
<>
React + TS + Sass + Eslint + Prettier + MobX + Apisauce
-
+
-
+
);
diff --git a/src/components/common/alert/index.tsx b/src/components/common/alert/index.tsx
index d770daa..0e414bf 100644
--- 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 = (props: BasicAlertsProps) => {
- const { text } = props;
+const BasicAlerts: React.FC = ({ text }: BasicAlertsProps) => {
return (
{text}
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 0000000..e2bfa71
--- /dev/null
+++ 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";
\ No newline at end of file
diff --git a/src/components/section/about/index.tsx b/src/components/section/about/index.tsx
new file mode 100644
index 0000000..1574585
--- /dev/null
+++ b/src/components/section/about/index.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react"
+
+const About: React.FC = (): ReactElement => {
+ return About
+}
+
+export default About;
\ No newline at end of file
diff --git a/src/components/section/home/index.tsx b/src/components/section/home/index.tsx
new file mode 100644
index 0000000..6ef439b
--- /dev/null
+++ b/src/components/section/home/index.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from "react"
+
+const Home: React.FC = (): ReactElement => {
+ return Home
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..e84d1fe
--- /dev/null
+++ 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;
\ No newline at end of file
diff --git a/src/models/interfaces/types.ts b/src/models/interfaces/types.ts
index 5e2a819..97285b0 100644
--- 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
\ No newline at end of file
diff --git a/src/services/api-config.ts b/src/services/api/api-config.ts
similarity index 81%
rename from src/services/api-config.ts
rename to src/services/api/api-config.ts
index 075dc89..557253c 100644
--- a/src/services/api-config.ts
+++ b/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 b/src/services/api/api-problem.ts
similarity index 100%
rename from src/services/api-problem.ts
rename to src/services/api/api-problem.ts
diff --git a/src/services/api.ts b/src/services/api/api.ts
similarity index 96%
rename from src/services/api.ts
rename to src/services/api/api.ts
index ed62b5c..70b9f8b 100644
--- a/src/services/api.ts
+++ b/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 b/src/services/example/index.ts
similarity index 80%
rename from src/services/example.ts
rename to src/services/example/index.ts
index 8bb4634..b609652 100644
--- a/src/services/example.ts
+++ b/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 {
+ async getExample() {
try {
const response: ApiResponse = 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 {
+ async postExample(payload: ExampleResponse) {
try {
const response: ApiResponse = await this.api.apisauce.post(
`your/route`, { payload }
@@ -43,10 +44,10 @@ export class ExampleApi {
}
}
- async putExample(id: any): Promise {
+ async putExample(id: string, payload: ExampleResponse) {
try {
const response: ApiResponse = 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 {
+ async deleteExample(id: string) {
try {
const response: ApiResponse = await this.api.apisauce.delete(
`your/route/${id}`
@@ -77,6 +78,4 @@ export class ExampleApi {
}
}
-}
-
-
+}
\ No newline at end of file
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..25fd027
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1 @@
+export * from "./example/index";
\ No newline at end of file
diff --git a/src/test/App.test.tsx b/src/test/App.test.tsx
new file mode 100644
index 0000000..5c6e664
--- /dev/null
+++ 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();
+ 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
index e69de29..3e467a0 100644
--- a/src/theme/_fonts.scss
+++ b/src/theme/_fonts.scss
@@ -0,0 +1 @@
+// Fonts are declared here
\ No newline at end of file
diff --git a/src/theme/_layout.scss b/src/theme/_layout.scss
index e69de29..51f5026 100644
--- a/src/theme/_layout.scss
+++ b/src/theme/_layout.scss
@@ -0,0 +1 @@
+// General layout styles are declared here
\ No newline at end of file
diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
index e69de29..001827c 100644
--- a/src/theme/_variables.scss
+++ b/src/theme/_variables.scss
@@ -0,0 +1 @@
+// Variables go here
\ No newline at end of file