tech(basic): update snippets directory

Author: ramsunvtech

recipes/basic/config.js

@@ -2,7 +2,7 @@ const getConfig = () => {
   return {
     bundler: "webpack",
     ui: "material-ui",
-    state: "redux",
+    state: "none",
     buildDir: "public",
     sourceDir: {
       main: "src",
@@ -13,7 +13,7 @@ const getConfig = () => {
       i18n: "i18n",
       components: "components",
       businessLogic: "blocks",
-      userInterface: "widgets",
+      userInterface: "ui",
       utility: "utils",
       hooks: "hooks",
       theme: "theme",
@@ -24,11 +24,15 @@ const getConfig = () => {
     modules: {
       signIn: "SignIn",
       dashboard: "Dashboard",
+      notFound: "NotFound",
     },
     canAdd: {
+      gitIgnore: true,
       eslint: true,
+      environment: true,
       prettier: true,
       husky: true,
+      hooks: true,
       hookForm: true,
       routes: true,
       utils: true,
@@ -45,6 +49,7 @@ const getModulesList = () => {
   return [
     "reactWithI18n",
     "router",
+    "services",
     "utils"
   ];
 };

recipes/basic/snippets/sources/App.js

@@ -6,9 +6,9 @@ import { createBrowserHistory } from 'history'
 import Routes from './Routes'
 
 // Block Components.
-import { ErrorHandler, PageLoader } from '@${appName}/${sourceDir.businessLogic}'
+import { ErrorHandler, PageLoader } from '@/${sourceDir.businessLogic}'
 
-import { withTranslation } from '@${appName}/${sourceDir.i18n}'
+import { withTranslation } from '@/${sourceDir.i18n}'
 
 const browserHistory = createBrowserHistory()
 

recipes/basic/snippets/sources/Dashboard.js

@@ -1,25 +1,39 @@
 function getSourceCode(appName, { sourceDir }) {
-return `import React, { useState } from 'react'
-import { useHistory } from 'react-router-dom'
+return `import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import { I18nMsg } from '@${appName}/${sourceDir.i18n}'
+import { I18nMsg } from '@/${sourceDir.i18n}'
 
 // Utils.
-import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+import { RoutePaths } from '@/${sourceDir.utility}'
+
+// Service Hooks
+import useFetch from '@/${sourceDir.hooks}/useFetch'
+
+const SAMPLE_GET_API_URL = 'https://jsonplaceholder.typicode.com/users'
 
 const Dashboard = (props) => {
-  let history = useHistory()
+  const navigate = useNavigate()
+
+  const { loading, error, response = [] } = useFetch(SAMPLE_GET_API_URL)
+
+  if (loading) return 'Loading..'
+  if (error) return error.message
+
   return (
     <>
       <section>
         <div>
           <h1>
             <I18nMsg id="dashboard" /> goes here
           </h1>
+          {response.map((user) => {
+            return <li key={user.id}>{user.name}</li>
+          })}
           <button
             onClick={() => {
-              history.push(RoutePaths.SignIn)
+              navigate(RoutePaths.SignIn)
             }}
           >
             Click back

recipes/basic/snippets/sources/PageLoader.js

@@ -2,7 +2,7 @@ function getSourceCode(appName, { sourceDir }) {
 return `import React, { Fragment } from 'react'
 
 // UI Components.
-import { Spinner } from '@${appName}/${sourceDir.userInterface}'
+import { Spinner } from '@/${sourceDir.userInterface}'
 
 export default function PageLoader({ loading }) {
   // Add your business logic with store condition.

recipes/basic/snippets/sources/Routes.js

@@ -1,33 +1,38 @@
 function getSourceCode(appName, { sourceDir, modules }) {
 return `import React, { Suspense } from 'react'
-import { Route, Switch, Redirect } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 
 // Block Components.
-import { PageLoader } from '@${appName}/${sourceDir.businessLogic}'
+import { PageLoader } from '@/${sourceDir.businessLogic}'
 
 // Utils.
-import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+import { RoutePaths } from '@/${sourceDir.utility}'
 
 const SignInModule = React.lazy(() =>
   import(/* webpackChunkName: "${sourceDir.containers}/${modules.signIn}" */ './${sourceDir.containers}/${modules.signIn}')
 )
+
 const DashboardModule = React.lazy(() =>
   import(/* webpackChunkName: "${sourceDir.containers}/${modules.dashboard}" */ './${sourceDir.containers}/${modules.dashboard}')
 )
 
-const Routes = () => {
+const NotFoundModule = React.lazy(() =>
+  import(/* webpackChunkName: "${sourceDir.containers}/${modules.notFound}" */ './${sourceDir.containers}/${modules.notFound}')
+)
+
+const RoutesComponent = () => {
   return (
     <Suspense fallback={<PageLoader />}>
-      <Switch>
-        <Route path={RoutePaths.SignIn} exact component={SignInModule} />
-        <Route path={RoutePaths.Dashboard} component={DashboardModule} />
-        <Redirect to={RoutePaths.NotFound} />
-      </Switch>
+      <Routes>
+        <Route path={RoutePaths.SignIn} exact element={SignInModule} />
+        <Route path={RoutePaths.Dashboard} element={DashboardModule} />
+        <Route path="*" element={<NotFoundModule />} />
+      </Routes>
     </Suspense>
   )
 }
 
-export default Routes
+export default RoutesComponent
 `
 }
 

recipes/basic/snippets/sources/Sidebar.js

@@ -1,13 +1,13 @@
 function getSourceCode(appName, { sourceDir }) {
 return `import React from 'react'
 import PropTypes from 'prop-types'
-import { useI18n } from '@${appName}/${sourceDir.i18n}'
+import { useI18n } from '@/${sourceDir.i18n}'
 
 // Domain Components.
 import SidebarNav from './SidebarNav'
 
 // Utils.
-import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+import { RoutePaths } from '@/${sourceDir.utility}'
 
 const Sidebar = (props) => {
   const { open, variant, onClose, className, ...rest } = props

recipes/basic/snippets/sources/SignIn.js

@@ -1,36 +1,57 @@
 function getSourceCode(appName, { sourceDir }) {
 return `import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
 // UI Components.
-import { InputTextField } from '@${appName}/${sourceDir.userInterface}'
+import { InputTextField } from '@/${sourceDir.userInterface}'
 
 // Custom Hooks.
-import { useI18n } from '@${appName}/${sourceDir.i18n}'
+import { useI18n } from '@/${sourceDir.i18n}'
 
 // Utils.
-import { RoutePaths } from '@${appName}/${sourceDir.utility}'
+import { RoutePaths } from '@/${sourceDir.utility}'
+
+// Service Hooks
+import usePost from '@/${sourceDir.hooks}/usePost'
+
+const SAMPLE_POST_API_URL = 'https://jsonplaceholder.typicode.com/posts'
 
 const SignIn = (props) => {
-  let history = useHistory()
+  const navigate = useNavigate()
   const { formatMessage } = useI18n()
 
+  const { loading, error, response, sendPostData } = usePost(
+    SAMPLE_POST_API_URL,
+    'sendPostData'
+  )
+
   return (
     <>
       <section>
         <div>
           <h1>Login Form</h1>
+          <div>
+            {error && 'API is failed'}
+            {response && 'Submitted successfully'}
+          </div>
           Username:
           <InputTextField
             name="name"
             value=""
             placeholder={formatMessage({ id: 'user_name' })}
           />
           <button
-            onClick={() => {
-              history.push(RoutePaths.DashBoard)
+            onClick={async () => {
+              await sendPostData({
+                id: 1,
+                title: 'title',
+                body: 'body',
+                userId: 1,
+              })
+              navigate(RoutePaths.DashBoard)
             }}
+            disabled={loading}
           >
             go to dashboard
           </button>

recipes/basic/snippets/sources/TopBar.js

@@ -3,7 +3,7 @@ return `import React from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import { I18nMsg } from '@${appName}/${sourceDir.i18n}'
+import { I18nMsg } from '@/${sourceDir.i18n}'
 
 const TopBar = (props) => {
   const { className, ...rest } = props