fix eslint rule

.eslintrc.js

@@ -73,6 +73,11 @@ module.exports = {
       'no-underscore-dangle': 'off',
       'default-param-last': 'off',
       radix: 'off',
+      "import/extensions" :"off",
+      "import/no-unresolved": "off",
+      "react/react-in-jsx-scope": "off",
+      "no-param-reassign": "off",
+      "react-hooks/exhaustive-deps": "warn"
     },
     settings: {
       react: {

src/commons/constant.ts

@@ -1 +1 @@
-export const API_URL : string = process.env.API_URL || "http://localhost:5000"
+export const API_URL: string = process.env.API_URL || "http://localhost:5000";

src/commons/routes.tsx

@@ -1,13 +1,13 @@
-import { createBrowserRouter } from "react-router-dom"
-import Homepage from "../pages/Homepage"
+import { createBrowserRouter } from "react-router-dom";
+import Homepage from "../pages/Homepage";
 
 const routes = [
   {
-      path: "/",
-      element: <Homepage />,
-    },
-]
+    path: "/",
+    element: <Homepage />,
+  },
+];
 
-const routeBrowser = createBrowserRouter(routes)
+const routeBrowser = createBrowserRouter(routes);
 
-export default routeBrowser
+export default routeBrowser;

src/components/hello.tsx

@@ -1,23 +1,19 @@
-import { useDispatch, useSelector } from "react-redux"
-import {  exampleAction, exampleState } from "../redux/reducers/example"
-import { useEffect } from "react"
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { exampleAction, exampleState } from "../redux/reducers/example";
 
-const Hello =() =>{
-    const helloState = useSelector(exampleState)
-    const dispatch = useDispatch()
-    useEffect(() => {
+const Hello = () => {
+  const helloState = useSelector(exampleState);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(exampleAction.setName({ name: "React Boilerplate TS By Saddam" }));
+  }, []);
 
-        dispatch(exampleAction.setName({name:"React Boilerplate TS By Saddam"}))
+  return (
+    <div>
+      <h1 className="text-red-500">{helloState.name}</h1>
+    </div>
+  );
+};
 
-    },[])
-
-    return(
-        <div>
-            <h1 className="text-red-500">
-                {helloState.name}
-            </h1>
-        </div>
-    )
-}
-
-export default Hello
+export default Hello;

src/index.tsx

@@ -1,17 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
+import { Provider } from "react-redux";
 import { RouterProvider } from "react-router-dom";
 import routes from "./commons/routes";
-import { Provider } from "react-redux";
 import store from "./redux/store";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Provider store={store}>
-
-    <RouterProvider router={routes} />
+      <RouterProvider router={routes} />
     </Provider>
-
   </React.StrictMode>,
 );

src/pages/Homepage.tsx

@@ -1,11 +1,9 @@
-import Hello from "../components/hello"
+import Hello from "../components/hello";
 
 const Homepage = () => {
-    return (
-        <>
-            <Hello />
-        </>
-    )
-}
+  return (
+    <Hello />
+  );
+};
 
-export default Homepage
+export default Homepage;

src/pkg/axios.ts

@@ -1,6 +1,6 @@
-import axios from 'axios';
-import { API_URL } from '../commons/constant';
+import axios from "axios";
+import { API_URL } from "../commons/constant";
 
 export default axios.create({
   baseURL: API_URL,
-});
+});

src/redux/reducers/example.ts

@@ -1,27 +1,27 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit"
-import store from "../store"
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import store from "../store";
 
-interface IExample{
-    name: string
+interface IExample {
+  name: string;
 }
 
-const initialExample : IExample = {
-    name: ""
-}
+const initialExample: IExample = {
+  name: "",
+};
 
 const exampleSlicer = createSlice({
-    name: "example",
-    initialState: initialExample,
-    reducers:{ 
-        setName: (state: IExample, action : PayloadAction<IExample, string>)=>{
-            state.name = action.payload.name
-        }
-    }
-})
+  name: "example",
+  initialState: initialExample,
+  reducers: {
+    setName: (state: IExample, action: PayloadAction<IExample, string>) => {
+      state.name = action.payload.name;
+    },
+  },
+});
 
-const exampleReducer = exampleSlicer.reducer
-export const exampleAction = exampleSlicer.actions
+const exampleReducer = exampleSlicer.reducer;
+export const exampleAction = exampleSlicer.actions;
 
-export const exampleState = (state: store) => state.posts
+export const exampleState = (state: store) => state.posts;
 
-export default exampleReducer
+export default exampleReducer;

src/redux/store.ts

@@ -1,14 +1,13 @@
-import { configureStore } from '@reduxjs/toolkit'
-import exampleReducer from './reducers/example'
+import { configureStore } from "@reduxjs/toolkit";
+import exampleReducer from "./reducers/example";
 
 export const store = configureStore({
   reducer: {
     posts: exampleReducer,
   },
-})
+});
 
-export type store = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
+export type store = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
 
-
-export default store
+export default store;