frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔼 Upgraded to react-router v6

Browse Source
This commit is contained in:
Rishi Ghan
2022-03-01 15:20:17 -08:00
parent 9b8f66c8b2
commit 769e2e3edc
14 changed files with 164 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/actions/fileops.actions.tsx
View File

@@ -257,6 +257,7 @@ export const extractComicArchive =
});
};
export const searchIssue = (options) => async (dispatch) => {};
export const analyzeImage =
(imageFilePath: string | Buffer) => async (dispatch) => {
dispatch({

41
src/client/components/App.tsx
View File

@@ -1,6 +1,5 @@
import React, { ReactElement, useState } from "react";
import { useSelector } from "react-redux";
import { hot } from "react-hot-loader";
import Dashboard from "./Dashboard/Dashboard";
import Import from "./Import";
@@ -11,14 +10,11 @@ import Search from "./Search";
import Settings from "./Settings";
import VolumeDetail from "./VolumeDetail/VolumeDetail";
import { Switch, Route } from "react-router";
import { Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
import "../assets/scss/App.scss";
import Notifications from "react-notification-system-redux";
import { getSettings } from "../actions/settings.actions";
import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
import { isEmpty, isUndefined } from "lodash";
import AirDCPPSocket from "../services/DcppSearchService";
//Optional styling
const style = {
@@ -66,7 +62,6 @@ const style = {
export const App = (): ReactElement => {
const notifications = useSelector((state: RootState) => state.notifications);
const [ADCPPSocket, setADCPPSocket] = useState({});
return (
@@ -79,37 +74,25 @@ export const App = (): ReactElement => {
newOnTop={true}
allowHTML={true}
/>
<Switch>
<Route exact path="/">
<Dashboard />
</Route>
<Route path="/import">
<Import path={"./comics"} />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/library-grid">
<LibraryGrid />
</Route>
<Route path="/search">
<Search />
</Route>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/import" element={<Import path={"./comics"} />} />
<Route path="/library" element={<Library />} />
<Route path="/library-grid" element={<LibraryGrid />} />
<Route path="/search" element={<Search />} />
<Route
path={"/comic/details/:comicObjectId"}
component={ComicDetail}
element={<ComicDetail />}
/>
<Route
path={"/volume/details/:comicObjectId"}
component={VolumeDetail}
element={<VolumeDetail />}
/>
<Route path="/settings">
<Settings />
</Route>
</Switch>
<Route path="/settings" element={<Settings />} />
</Routes>
</div>
</AirDCPPSocketContext.Provider>
);
};
export default hot(module)(App);
export default App;

43
src/client/components/ComicDetail.tsx
View File

@@ -12,7 +12,7 @@ import DownloadsPanel from "./ComicDetail/DownloadsPanel";
import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
import { Menu } from "./ComicDetail/ActionMenu/Menu";
import { isEmpty, isUndefined, isNil } from "lodash";
import { isEmpty, isUndefined, isNil, findIndex } from "lodash";
import { RootState } from "threetwo-ui-typings";
import { getComicBookDetailById } from "../actions/comicinfo.actions";
@@ -41,8 +41,8 @@ type ComicDetailProps = {};
*/
export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
const [active, setActive] = useState(1);
const [page, setPage] = useState(1);
const [active, setActive] = useState(1);
const [visible, setVisible] = useState(false);
const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
@@ -165,7 +165,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
icon: <i className="fa-regular fa-file-archive"></i>,
name: "Archive Operations",
content: <ArchiveOperations data={comicBookDetailData} key={3} />,
include: !isNil(comicBookDetailData.rawFileDetails),
include:
!isUndefined(comicBookDetailData.rawFileDetails) &&
!isEmpty(comicBookDetailData.rawFileDetails.cover),
},
{
id: 4,
@@ -195,10 +197,12 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
include: !isNil(comicBookDetailData.rawFileDetails),
},
];
// filtered Tabs
const filteredTabs = tabGroup.filter((tab) => tab.include);
// Tabs
const MetadataTabGroup = () => {
const filteredTabs = tabGroup.filter((tab) => tab.include);
console.log("filter:m", filteredTabs);
return (
<>
<div className="tabs">
@@ -211,7 +215,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
>
{/* Downloads tab and count badge */}
<a>
{id === 4 &&
{id === 5 &&
!isNil(comicBookDetailData) &&
!isEmpty(comicBookDetailData) ? (
<span className="download-icon-labels">
@@ -241,7 +245,10 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
// 2. from the CV-scraped version
let imagePath = "";
let comicBookTitle = "";
if (!isNil(comicBookDetailData.rawFileDetails)) {
if (
!isUndefined(comicBookDetailData.rawFileDetails) &&
!isEmpty(comicBookDetailData.rawFileDetails.cover)
) {
const encodedFilePath = encodeURI(
`${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
);
@@ -276,16 +283,18 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
</div>
{/* raw file details */}
<div className="column is-three-fifths">
{!isNil(comicBookDetailData.rawFileDetails) && (
<>
<RawFileDetails
data={{
rawFileDetails: comicBookDetailData.rawFileDetails,
inferredMetadata: comicBookDetailData.inferredMetadata,
}}
/>
</>
)}
{!isUndefined(comicBookDetailData.rawFileDetails) &&
!isEmpty(comicBookDetailData.rawFileDetails.cover) && (
<>
<RawFileDetails
data={{
rawFileDetails: comicBookDetailData.rawFileDetails,
inferredMetadata:
comicBookDetailData.inferredMetadata,
}}
/>
</>
)}
</div>
</div>

48
src/client/components/ComicDetail/RawFileDetails.tsx
View File

@@ -38,35 +38,35 @@ export const RawFileDetails = (props): ReactElement => {
</div>
</dd>
</dl>
</div>
<div className="content comic-detail raw-file-details mt-3">
<dl>
{/* inferred metadata */}
<dt>Inferred Issue Metadata</dt>
<dd>
<div className="field is-grouped mt-2">
</div>
<div className="content comic-detail raw-file-details mt-3">
<dl>
{/* inferred metadata */}
<dt>Inferred Issue Metadata</dt>
<dd>
<div className="field is-grouped mt-2">
<div className="control">
<div className="tags has-addons">
<span className="tag">Name</span>
<span className="tag is-info is-light">
{inferredMetadata.issue.name}
</span>
</div>
</div>
{!isUndefined(inferredMetadata.issue.number) ? (
<div className="control">
<div className="tags has-addons">
<span className="tag">Name</span>
<span className="tag is-info is-light">
{inferredMetadata.issue.name}
<span className="tag">Number</span>
<span className="tag is-primary is-light">
{inferredMetadata.issue.number}
</span>
</div>
</div>
{!isUndefined(inferredMetadata.issue.number) ? (
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-primary is-light">
{inferredMetadata.issue.number}
</span>
</div>
</div>
) : null}
</div>
</dd>
</dl>
</div>
) : null}
</div>
</dd>
</dl>
</div>
</>
);
};

2
src/client/components/Dashboard/RecentlyImported.tsx
View File

@@ -45,7 +45,7 @@ export const RecentlyImported = ({
!isEmpty(sourcedMetadata);
let imagePath = "";
let comicName = "";
if (!isNil(rawFileDetails)) {
if (!isEmpty(rawFileDetails.cover)) {
const encodedFilePath = encodeURI(
`${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
);

12
src/client/components/Library.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useMemo, ReactElement } from "react";
import PropTypes from "prop-types";
import { useHistory } from "react-router";
import { useNavigate } from "react-router-dom";
import { useTable, usePagination } from "react-table";
import { useDispatch, useSelector } from "react-redux";
import { getComicBooks } from "../actions/fileops.actions";
@@ -27,9 +27,9 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
// programatically navigate to comic detail
const history = useHistory();
const navigate = useNavigate();
const navigateToComicDetail = (id) => {
history.push(`/comic/details/${id}`);
navigate(`/comic/details/${id}`);
};
const ImportStatus = ({ value }) => {
@@ -49,7 +49,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
Header: "File Details",
id: "fileDetails",
accessor: (row) =>
!isNil(row.rawFileDetails)
!isEmpty(row.rawFileDetails.cover)
? row.rawFileDetails
: row.sourcedMetadata,
Cell: ({ value }) => {
@@ -102,7 +102,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
accessor: "sourcedMetadata.comicvine",
Cell(props) {
return (
!isNil(props.cell.value) && (
!isEmpty(props.cell.value) && (
<span className="tag is-info is-light">
{props.cell.value.resource_type}
</span>
@@ -189,7 +189,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
<section className="container">
<div className="section">
<h1 className="title">Library</h1>
{/* Search bar */}
<SearchBar />
<div>
<div className="library">

12
src/client/index.tsx
View File

@@ -1,19 +1,17 @@
import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { ConnectedRouter } from "connected-react-router";
import configureStore, { history } from "./store/index";
import { Provider, connect } from "react-redux";
import { HistoryRouter as Router } from "redux-first-history/rr6";
import { store, history } from "./store/index";
import App from "./components/App";
const store = configureStore({});
const rootEl = document.getElementById("root");
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Router history={history}>
<App />
</ConnectedRouter>
</Router>
</Provider>,
rootEl,
);

2
src/client/reducers/airdcpp.reducer.ts
View File

@@ -7,7 +7,7 @@ import {
AIRDCPP_DOWNLOAD_PROGRESS_TICK,
AIRDCPP_BUNDLES_FETCHED,
} from "../constants/action-types";
import { LOCATION_CHANGE } from "connected-react-router";
import { LOCATION_CHANGE } from "redux-first-history";
import { difference } from "../shared/utils/object.utils";
const initialState = {

2
src/client/reducers/comicinfo.reducer.js → src/client/reducers/comicinfo.reducer.ts
View File

@@ -1,4 +1,4 @@
import { isEmpty, pull } from "lodash";
import { isEmpty } from "lodash";
import {
CV_API_CALL_IN_PROGRESS,
CV_SEARCH_SUCCESS,

2
src/client/reducers/fileops.reducer.ts
View File

@@ -1,4 +1,4 @@
import { LOCATION_CHANGE } from "connected-react-router";
import { LOCATION_CHANGE } from "redux-first-history";
import {
RMQ_SOCKET_CONNECTED,
IMS_COMICBOOK_METADATA_FETCHED,

18
src/client/reducers/index.js
View File

@@ -1,17 +1,13 @@
import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
import comicinfoReducer from "../reducers/comicinfo.reducer";
import fileOpsReducer from "../reducers/fileops.reducer";
import airdcppReducer from "../reducers/airdcpp.reducer";
import settingsReducer from "../reducers/settings.reducer";
import { reducer as notifications } from "react-notification-system-redux";
export default (history) =>
combineReducers({
notifications,
comicInfo: comicinfoReducer,
fileOps: fileOpsReducer,
airdcpp: airdcppReducer,
settings: settingsReducer,
router: connectRouter(history),
});
export const reducers = {
notifications,
comicInfo: comicinfoReducer,
fileOps: fileOpsReducer,
airdcpp: airdcppReducer,
settings: settingsReducer,
};

44
src/client/store/index.ts
View File

@@ -1,28 +1,32 @@
import { routerMiddleware } from "connected-react-router";
import { createStore, applyMiddleware, compose } from "redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { createBrowserHistory } from "history";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import createRootReducer from "../reducers";
import { createReduxHistoryContext } from "redux-first-history";
import { reducers } from "../reducers/index";
import { io } from "socket.io-client";
import socketIoMiddleware from "redux-socket.io-middleware";
import { SOCKET_BASE_URI } from "../constants/endpoints";
const socketConnection = io(SOCKET_BASE_URI, { transports: ["websocket"] });
export const history = createBrowserHistory();
const configureStore = (initialState) => {
const store = createStore(
createRootReducer(history),
initialState,
compose(
applyMiddleware(
socketIoMiddleware(socketConnection),
thunk,
routerMiddleware(history),
),
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
const { createReduxHistory, routerMiddleware, routerReducer } =
createReduxHistoryContext({
history: createBrowserHistory(),
});
export const store = createStore(
combineReducers({
router: routerReducer,
...reducers,
}),
composeWithDevTools(
applyMiddleware(
socketIoMiddleware(socketConnection),
thunk,
routerMiddleware,
),
);
return store;
};
export default configureStore;
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
),
);
export const history = createReduxHistory(store);