76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Switch, Route, useHistory } from 'react-router-dom';
|
|
|
|
import './App.css';
|
|
import Header from './Header';
|
|
import Home from './Home';
|
|
import Navbar from './Navbar';
|
|
import { queryIsEmpty } from './Navbar/utils';
|
|
import SubjectList from './SubjectList';
|
|
import { ILoadingState, IFilterQuery } from './types';
|
|
import NothingFound from './NothingFound';
|
|
|
|
const useDidUpdate: typeof useEffect = (func, dependencies) => {
|
|
const didMountRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (didMountRef.current) {
|
|
func();
|
|
} else {
|
|
didMountRef.current = true;
|
|
}
|
|
|
|
return () => {};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, dependencies);
|
|
};
|
|
|
|
const App = () => {
|
|
const history = useHistory();
|
|
|
|
const [loading, setLoading] = useState<ILoadingState>({
|
|
fetching: true,
|
|
error: ''
|
|
});
|
|
|
|
const [searchQuery, setSearchQuery] = useState<IFilterQuery>({
|
|
search: '',
|
|
class_num: '',
|
|
type_num: '',
|
|
predmet_type: '',
|
|
teacher: ''
|
|
});
|
|
|
|
useDidUpdate(() => {
|
|
if (queryIsEmpty(searchQuery)) return;
|
|
|
|
history.push('/list');
|
|
}, [searchQuery]);
|
|
|
|
return (
|
|
<>
|
|
<Header query={searchQuery} loading={loading} setSearchQuery={setSearchQuery} />
|
|
<Navbar query={searchQuery} setSearchQuery={setSearchQuery} />
|
|
<Switch>
|
|
<Route exact path="/">
|
|
<Home
|
|
setLoading={setLoading}
|
|
setSearchQuery={setSearchQuery}
|
|
/>
|
|
</Route>
|
|
<Route path="/list">
|
|
<SubjectList
|
|
searchQuery={searchQuery}
|
|
setLoading={setLoading}
|
|
/>
|
|
</Route>
|
|
<Route path="*">
|
|
<NothingFound setLoading={setLoading} />
|
|
</Route>
|
|
</Switch>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|