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