drafish
10 months ago
committed by
yann300
parent
3586b42e20
commit
77a01a2ff9
@ -1,16 +1,16 @@ |
|||||||
import React from 'react'; |
import React from 'react' |
||||||
import BounceLoader from 'react-spinners/BounceLoader'; |
import BounceLoader from 'react-spinners/BounceLoader' |
||||||
import './index.css'; |
import './index.css' |
||||||
import { useAppSelector } from '../../redux/hooks'; |
import {useAppSelector} from '../../redux/hooks' |
||||||
|
|
||||||
const LoadingScreen: React.FC = () => { |
const LoadingScreen: React.FC = () => { |
||||||
const loading = useAppSelector((state) => state.loading.screen); |
const loading = useAppSelector((state) => state.loading.screen) |
||||||
|
|
||||||
return loading ? ( |
return loading ? ( |
||||||
<div className="spinnersOverlay"> |
<div className="spinnersOverlay"> |
||||||
<BounceLoader color="#a7b0ae" size={100} className="spinnersLoading" /> |
<BounceLoader color="#a7b0ae" size={100} className="spinnersLoading" /> |
||||||
</div> |
</div> |
||||||
) : null; |
) : null |
||||||
}; |
} |
||||||
|
|
||||||
export default LoadingScreen; |
export default LoadingScreen |
||||||
|
|||||||
@ -1,18 +1,18 @@ |
|||||||
import React, { type ReactNode, useEffect, useState } from 'react'; |
import React, {type ReactNode, useEffect, useState} from 'react' |
||||||
import { CSSTransition } from 'react-transition-group'; |
import {CSSTransition} from 'react-transition-group' |
||||||
import './index.css'; |
import './index.css' |
||||||
|
|
||||||
const SlideIn: React.FC<{children: ReactNode}> = ({children}) => { |
const SlideIn: React.FC<{children: ReactNode}> = ({children}) => { |
||||||
const [show, setShow] = useState(false); |
const [show, setShow] = useState(false) |
||||||
useEffect(() => { |
useEffect(() => { |
||||||
setShow(true); |
setShow(true) |
||||||
}, []); |
}, []) |
||||||
|
|
||||||
return ( |
return ( |
||||||
<CSSTransition in={show} timeout={400} classNames="slide" unmountOnExit> |
<CSSTransition in={show} timeout={400} classNames="slide" unmountOnExit> |
||||||
{children} |
{children} |
||||||
</CSSTransition> |
</CSSTransition> |
||||||
); |
) |
||||||
}; |
} |
||||||
|
|
||||||
export default SlideIn; |
export default SlideIn |
||||||
|
|||||||
@ -1,15 +1,13 @@ |
|||||||
import React from 'react'; |
import React from 'react' |
||||||
import ReactDOM from 'react-dom/client'; |
import ReactDOM from 'react-dom/client' |
||||||
import { Provider } from 'react-redux'; |
import {Provider} from 'react-redux' |
||||||
import './index.css'; |
import './index.css' |
||||||
import App from './App'; |
import App from './App' |
||||||
import { store } from './redux/store'; |
import {store} from './redux/store' |
||||||
|
|
||||||
const root = ReactDOM.createRoot( |
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) |
||||||
document.getElementById('root') as HTMLElement, |
|
||||||
); |
|
||||||
root.render( |
root.render( |
||||||
<Provider store={store}> |
<Provider store={store}> |
||||||
<App /> |
<App /> |
||||||
</Provider>, |
</Provider> |
||||||
); |
) |
||||||
|
|||||||
@ -1,5 +1,5 @@ |
|||||||
import { useDispatch, type TypedUseSelectorHook, useSelector } from 'react-redux'; |
import {useDispatch, type TypedUseSelectorHook, useSelector} from 'react-redux' |
||||||
import { type AppDispatch, type RootState } from './store'; |
import {type AppDispatch, type RootState} from './store' |
||||||
|
|
||||||
export const useAppDispatch: () => AppDispatch = useDispatch; |
export const useAppDispatch: () => AppDispatch = useDispatch |
||||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; |
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector |
||||||
|
|||||||
@ -1,14 +1,14 @@ |
|||||||
import { type ModelType } from '../store'; |
import {type ModelType} from '../store' |
||||||
|
|
||||||
const Model: ModelType = { |
const Model: ModelType = { |
||||||
namespace: 'loading', |
namespace: 'loading', |
||||||
state: {screen: true}, |
state: {screen: true}, |
||||||
reducers: { |
reducers: { |
||||||
save(state, {payload}) { |
save(state, {payload}) { |
||||||
return { ...state, ...payload }; |
return {...state, ...payload} |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
effects: {}, |
effects: {}, |
||||||
}; |
} |
||||||
|
|
||||||
export default Model; |
export default Model |
||||||
|
|||||||
@ -1,117 +1,97 @@ |
|||||||
import { |
import {configureStore, createSlice, type PayloadAction, type Reducer} from '@reduxjs/toolkit' |
||||||
configureStore, |
import createSagaMiddleware from 'redux-saga' |
||||||
createSlice, |
import {call, put, takeEvery, delay, select, all, fork, type ForkEffect} from 'redux-saga/effects' |
||||||
type PayloadAction, |
|
||||||
type Reducer, |
|
||||||
} from '@reduxjs/toolkit'; |
|
||||||
import createSagaMiddleware from 'redux-saga'; |
|
||||||
import { |
|
||||||
call, |
|
||||||
put, |
|
||||||
takeEvery, |
|
||||||
delay, |
|
||||||
select, |
|
||||||
all, |
|
||||||
fork, |
|
||||||
type ForkEffect, |
|
||||||
} from 'redux-saga/effects'; |
|
||||||
|
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
const context = require.context('./models', false, /\.ts$/); |
const context = require.context('./models', false, /\.ts$/) |
||||||
const models = context.keys().map((key: any) => context(key).default); |
const models = context.keys().map((key: any) => context(key).default) |
||||||
|
|
||||||
export type StateType = Record<string, any>; |
export type StateType = Record<string, any> |
||||||
export interface ModelType { |
export interface ModelType { |
||||||
namespace: string; |
namespace: string |
||||||
state: StateType; |
state: StateType |
||||||
reducers: Record< |
reducers: Record<string, (state: StateType, action: PayloadAction<any>) => StateType> |
||||||
string, |
|
||||||
(state: StateType, action: PayloadAction<any>) => StateType |
|
||||||
>; |
|
||||||
effects: Record< |
effects: Record< |
||||||
string, |
string, |
||||||
( |
( |
||||||
action: PayloadAction<any>, |
action: PayloadAction<any>, |
||||||
effects: { |
effects: { |
||||||
call: typeof call; |
call: typeof call |
||||||
put: typeof put; |
put: typeof put |
||||||
delay: typeof delay; |
delay: typeof delay |
||||||
select: typeof select; |
select: typeof select |
||||||
}, |
} |
||||||
) => Generator<any, void, any> |
) => Generator<any, void, any> |
||||||
>; |
> |
||||||
} |
} |
||||||
|
|
||||||
function createReducer(model: ModelType): Reducer { |
function createReducer(model: ModelType): Reducer { |
||||||
const reducers = model.reducers; |
const reducers = model.reducers |
||||||
Object.keys(model.effects).forEach((key) => { |
Object.keys(model.effects).forEach((key) => { |
||||||
reducers[key] = (state: StateType, action: PayloadAction<any>) => state; |
reducers[key] = (state: StateType, action: PayloadAction<any>) => state |
||||||
}); |
}) |
||||||
const slice = createSlice({ |
const slice = createSlice({ |
||||||
name: model.namespace, |
name: model.namespace, |
||||||
initialState: model.state, |
initialState: model.state, |
||||||
reducers, |
reducers, |
||||||
}); |
}) |
||||||
return slice.reducer; |
return slice.reducer |
||||||
} |
} |
||||||
|
|
||||||
const rootReducer = models.reduce((prev: any, model: ModelType) => { |
const rootReducer = models.reduce((prev: any, model: ModelType) => { |
||||||
return { ...prev, [model.namespace]: createReducer(model) }; |
return {...prev, [model.namespace]: createReducer(model)} |
||||||
}, {}); |
}, {}) |
||||||
|
|
||||||
function watchEffects(model: ModelType): ForkEffect { |
function watchEffects(model: ModelType): ForkEffect { |
||||||
return fork(function* () { |
return fork(function* () { |
||||||
for (const key in model.effects) { |
for (const key in model.effects) { |
||||||
const effect = model.effects[key]; |
const effect = model.effects[key] |
||||||
yield takeEvery( |
yield takeEvery(`${model.namespace}/${key}`, function* (action: PayloadAction) { |
||||||
`${model.namespace}/${key}`, |
|
||||||
function* (action: PayloadAction) { |
|
||||||
yield put({ |
yield put({ |
||||||
type: 'loading/save', |
type: 'loading/save', |
||||||
payload: { |
payload: { |
||||||
[`${model.namespace}/${key}`]: true, |
[`${model.namespace}/${key}`]: true, |
||||||
}, |
}, |
||||||
}); |
}) |
||||||
yield effect(action, { |
yield effect(action, { |
||||||
call, |
call, |
||||||
put, |
put, |
||||||
delay, |
delay, |
||||||
select, |
select, |
||||||
}); |
}) |
||||||
yield put({ |
yield put({ |
||||||
type: 'loading/save', |
type: 'loading/save', |
||||||
payload: { |
payload: { |
||||||
[`${model.namespace}/${key}`]: false, |
[`${model.namespace}/${key}`]: false, |
||||||
}, |
}, |
||||||
}); |
}) |
||||||
}, |
}) |
||||||
); |
|
||||||
} |
} |
||||||
}); |
}) |
||||||
} |
} |
||||||
|
|
||||||
function* rootSaga(): Generator { |
function* rootSaga(): Generator { |
||||||
yield all(models.map((model: ModelType) => watchEffects(model))); |
yield all(models.map((model: ModelType) => watchEffects(model))) |
||||||
} |
} |
||||||
|
|
||||||
const configureAppStore = (initialState = {}) => { |
const configureAppStore = (initialState = {}) => { |
||||||
const reduxSagaMonitorOptions = {}; |
const reduxSagaMonitorOptions = {} |
||||||
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions); |
const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions) |
||||||
|
|
||||||
const middleware = [sagaMiddleware]; |
const middleware = [sagaMiddleware] |
||||||
|
|
||||||
const store = configureStore({ |
const store = configureStore({ |
||||||
reducer: rootReducer, |
reducer: rootReducer, |
||||||
middleware: (gDM) => gDM().concat([...middleware]), |
middleware: (gDM) => gDM().concat([...middleware]), |
||||||
preloadedState: initialState, |
preloadedState: initialState, |
||||||
devTools: process.env.NODE_ENV !== 'production', |
devTools: process.env.NODE_ENV !== 'production', |
||||||
}); |
}) |
||||||
|
|
||||||
sagaMiddleware.run(rootSaga); |
sagaMiddleware.run(rootSaga) |
||||||
return store; |
return store |
||||||
}; |
} |
||||||
|
|
||||||
export const store = configureAppStore(); |
export const store = configureAppStore() |
||||||
|
|
||||||
export type AppDispatch = typeof store.dispatch; |
export type AppDispatch = typeof store.dispatch |
||||||
export type RootState = ReturnType<typeof store.getState>; |
export type RootState = ReturnType<typeof store.getState> |
||||||
|
|||||||
Loading…
Reference in new issue