MAKS-IT/reactredux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(refactor): update all packages to latest, layouts and components structure improvement

Browse Source
This commit is contained in:
Maksym Sadovnychyy 2022-04-16 00:23:29 +02:00
parent fe78191893
commit cf8e29caf0
14 changed files with 2159 additions and 2283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
clientapp/package.json
View File

@ -1,40 +1,39 @@
{
"name": "react_redux_demo",
"name": "react-redux-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "5.1.3",
"history": "5.2.0",
"jquery": "^3.6.0",
"history": "5.3.0",
"merge": "^2.1.1",
"popper.js": "^1.16.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "7.2.6",
"react-router": "6.2.1",
"react-router-dom": "6.2.1",
"reactstrap": "9.0.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "7.2.8",
"react-router": "6.3.0",
"react-router-dom": "6.3.0",
"reactstrap": "9.0.2",
"redux": "4.1.2",
"redux-first-history": "^5.0.8",
"redux-first-history": "^5.0.9",
"redux-thunk": "2.4.1",
"svgo": "2.8.0"
},
"devDependencies": {
"@types/history": "4.7.11",
"@types/jest": "27.4.0",
"@types/node": "17.0.18",
"@types/react": "17.0.39",
"@types/react-dom": "17.0.11",
"@types/react-redux": "7.1.22",
"@types/jest": "27.4.1",
"@types/node": "17.0.24",
"@types/react": "18.0.5",
"@types/react-dom": "18.0.1",
"@types/react-redux": "7.1.24",
"@types/react-router": "5.1.18",
"@types/react-router-dom": "5.3.3",
"@types/reactstrap": "8.7.1",
"@typescript-eslint/parser": "^5.19.0",
"cross-env": "7.0.3",
"eslint": "^8.13.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"nan": "^2.15.0",
"react-scripts": "^5.0.0",
"sass": "^1.49.7",
"typescript": "4.5.5"
"react-scripts": "^5.0.1",
"sass": "^1.50.0",
"typescript": "4.6.3"
},
"scripts": {
"start": "react-scripts start",

2
clientapp/public/index.html
View File

@ -20,7 +20,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_redux_demo</title>
<title>react-redux-template</title>
</head>
<body>
<noscript>

4
clientapp/public/manifest.json
View File

@ -1,6 +1,6 @@
{
"short_name": "react_redux_demo",
"name": "react_redux_demo",
"short_name": "react-redux-template",
"name": "react-redux-template",
"icons": [
{
"src": "favicon.ico",

6
clientapp/src/App.tsx
View File

@ -6,8 +6,8 @@ import { useSelector, useDispatch } from 'react-redux'
import { actionCreators as settingsActionCreators, ISettingsState, IRoute } from './store/reducers/Settings'
// Components
import { DynamicLayout } from './DynamicLayout'
import { DynamicPage } from './DynamicPage'
import { DynamicLayout } from './layouts'
import { DynamicPage } from './pages'
interface IRouteProp {
path: string,
@ -43,7 +43,7 @@ const App: FC = () => {
return <>
{routes.length > 0 ? <Routes>
{NestedRoutes(routes, 'BasicLayout')}
{NestedRoutes(routes, 'PublicLayout')}
</Routes> : ''}
</>
}

29
clientapp/src/DynamicLayout.tsx
View File

@ -1,29 +0,0 @@
import React, { FC } from 'react'
import { BasicLayout } from './layouts'
import { ILayout } from './layouts/interfaces'
interface ILayouts {
[key: string]: React.FC<ILayout>;
}
const layouts: ILayouts = {
BasicLayout: BasicLayout
}
export interface IDynamicLayout {
tag: string,
children: React.ReactNode
}
const DynamicLayout: FC<IDynamicLayout> = (props) => {
const { tag, children } = props
const TagName = layouts[tag]
return <TagName>{children}</TagName>
}
export {
DynamicLayout
}

28
clientapp/src/DynamicPage.tsx
View File

@ -1,28 +0,0 @@
import React, { FC } from 'react'
import { Home, Counter, FetchData } from './pages'
interface IPages {
[key: string]: React.FC<any>;
}
const pages: IPages = {
Home: Home,
Counter: Counter,
FetchData: FetchData
}
export interface IDynamicPage {
tag: string
}
const DynamicPage: FC<IDynamicPage> = (props) => {
const { tag } = props
const TagName = pages[tag]
return <TagName />
}
export {
DynamicPage
}

12
clientapp/src/index.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { HistoryRouter as Router } from "redux-first-history/rr6"
import { createRoot } from 'react-dom/client'
import { HistoryRouter as Router } from 'redux-first-history/rr6'
import { Provider } from 'react-redux'
import { createBrowserHistory } from 'history'
@ -12,12 +14,14 @@ import registerServiceWorker from './registerServiceWorker'
// Get the application-wide store instance, prepopulating with state from the server where available.
const { store, history } = configureStore( createBrowserHistory(window))
ReactDOM.render(
const container = document.getElementById('root')
const root = createRoot(container as HTMLElement)
root.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById('root'))
</Provider>)
registerServiceWorker()

18
clientapp/src/layouts/admin/index.tsx Normal file
View File

@ -0,0 +1,18 @@
import React, { FC } from 'react'
import { Container } from 'reactstrap'
import { ILayout } from '../interfaces'
import 'bootstrap/dist/css/bootstrap.min.css'
const AdminLayout: FC<ILayout> = ({ children = null }) => {
return <>
<Container>
{children}
</Container>
</>
}
export {
AdminLayout
}

34
clientapp/src/layouts/index.tsx
View File

@ -1,5 +1,33 @@
import { BasicLayout } from './basic'
import React, { FC } from 'react'
import { ILayout } from './interfaces'
import { PublicLayout } from './public'
import { AdminLayout } from './admin'
interface ILayouts {
[key: string]: React.FC<ILayout>;
}
const layouts: ILayouts = {
PublicLayout,
AdminLayout
}
export interface IDynamicLayout {
tag: string,
children: React.ReactNode
}
const DynamicLayout: FC<IDynamicLayout> = (props) => {
const { tag, children } = props
const TagName = layouts[tag]
return <TagName>{children}</TagName>
}
export {
BasicLayout
}
DynamicLayout
}

2
clientapp/src/layouts/basic/NavMenu/index.tsx → clientapp/src/layouts/public/NavMenu/index.tsx
View File

@ -17,7 +17,7 @@ const NavMenu = () => {
return <header>
<Navbar className="navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3" light>
<NavbarBrand tag={Link} to="/">react_redux_demo</NavbarBrand>
<NavbarBrand tag={Link} to="/">react-redux-template</NavbarBrand>
<NavbarToggler onClick={toggle} className="mr-2"/>
<Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={state.isOpen} navbar>
<ul className="navbar-nav flex-grow">

6
clientapp/src/layouts/basic/index.tsx → clientapp/src/layouts/public/index.tsx
View File

@ -4,10 +4,10 @@ import { NavMenu } from './NavMenu'
import { ILayout } from '../interfaces'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import './scss/style.scss'
const BasicLayout: FC<ILayout> = ({ children = null }) => {
const PublicLayout: FC<ILayout> = ({ children = null }) => {
return <>
<NavMenu />
<Container>
@ -17,5 +17,5 @@ const BasicLayout: FC<ILayout> = ({ children = null }) => {
}
export {
BasicLayout
PublicLayout
}

0
clientapp/src/layouts/basic/scss/style.scss → clientapp/src/layouts/public/scss/style.scss
View File

29
clientapp/src/pages/index.tsx
View File

@ -1,9 +1,30 @@
import React, { FC } from 'react'
import { Home } from './Home'
import { Counter } from './Counter'
import { FetchData } from './FetchData'
interface IPages {
[key: string]: React.FC<any>;
}
const pages: IPages = {
Home: Home,
Counter: Counter,
FetchData: FetchData
}
export interface IDynamicPage {
tag: string
}
const DynamicPage: FC<IDynamicPage> = (props) => {
const { tag } = props
const TagName = pages[tag]
return <TagName />
}
export {
Home,
Counter,
FetchData
}
DynamicPage
}

4233
clientapp/yarn.lock
View File

File diff suppressed because it is too large Load Diff