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

🪰 Making the "fly" out sliding panel reusable

Browse Source
This commit is contained in:
Rishi Ghan
2021-09-28 21:13:49 -07:00
parent 8db52e0407
commit b87a13d006
8 changed files with 3071 additions and 2823 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -66,7 +66,7 @@
"react-window-dynamic-list": "^2.3.5",
"sharp": "^0.28.1",
"socket.io-client": "^4.1.2",
"threetwo-ui-typings": "^1.0.5",
"threetwo-ui-typings": "^1.0.9",
"voca": "^1.4.0",
"websocket": "^1.0.34",
"ws": "^7.5.3",

13
src/client/actions/comicinfo.actions.tsx
View File

@@ -63,7 +63,6 @@ export const getComicBookDetailById =
type: IMS_COMIC_BOOK_DB_OBJECT_CALL_IN_PROGRESS,
IMS_inProgress: true,
});
const result = await axios.request({
url: `http://localhost:3000/api/import/getComicBookById`,
method: "POST",
@@ -76,6 +75,18 @@ export const getComicBookDetailById =
comicBookDetail: result.data,
IMS_inProgress: false,
});
const pageCount = await axios.request({
url: "http://localhost:3000/api/import/getPageCountsForComicBook",
method: "POST",
data: {
filePath:
result.data.rawFileDetails.containedIn +
"/" +
result.data.rawFileDetails.name +
result.data.rawFileDetails.extension,
},
});
console.log(pageCount);
};
export const applyComicVineMatch =

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

@@ -40,6 +40,7 @@ type ComicDetailProps = {};
export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
const [page, setPage] = useState(1);
const [visible, setVisible] = useState(false);
const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
const comicVineSearchResults = useSelector(
(state: RootState) => state.comicInfo.searchResults,
@@ -61,11 +62,84 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
dispatch(getComicBookDetailById(comicObjectId));
}, [page, dispatch]);
// sliding panel init
const contentForSlidingPanel = {
CVMatches: {
content: () => {
return (
<>
{!isEmpty(comicVineSearchQueryObject) &&
!isUndefined(comicVineSearchQueryObject) ? (
<div className="card search-criteria-card">
<div className="card-content">
<ComicVineSearchForm />
<p className="is-size-6">Searching against:</p>
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<div className="tags has-addons">
<span className="tag">Title</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams
.searchTerms.name
}
</span>
</div>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams
.searchTerms.number
}
</span>
</div>
</div>
</div>
</div>
</div>
) : (
<div className="progress-indicator-container">
<div className="indicator">
<Loader
type="MutatingDots"
color="#CCC"
secondaryColor="#999"
height={100}
width={100}
visible={comicVineAPICallProgress}
/>
</div>
</div>
)}
<div className="search-results-container">
{!isEmpty(comicVineSearchResults) && (
<MatchResult
matchData={comicVineSearchResults}
comicObjectId={comicObjectId}
/>
)}
</div>
</>
);
},
},
editComicArchive: { content: () => <>bastard fucks</> },
};
const openDrawerWithCVMatches = useCallback(() => {
setVisible(true);
dispatch(fetchComicVineMatches(comicBookDetailData));
setSlidingPanelContentId("CVMatches");
setVisible(true);
}, [dispatch, comicBookDetailData]);
const openDrawerForEditingComicArchive = useCallback(() => {
setSlidingPanelContentId("editComicArchive");
setVisible(true);
}, [dispatch]);
const [active, setActive] = useState(1);
const createDescriptionMarkup = (html) => {
return { __html: html };
@@ -212,8 +286,12 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
<div className="content comic-detail">
<dl>
<dt>Raw File Details</dt>
<dd>{props.data.containedIn}</dd>
<dd className="is-size-7">{props.data.path}</dd>
<dd className="is-size-7">
{props.data.containedIn +
"/" +
props.data.name +
props.data.extension}
</dd>
<dd>
<div className="field is-grouped">
<div className="control">
@@ -299,9 +377,13 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
RawFileDetails.propTypes = {
data: PropTypes.shape({
containedIn: PropTypes.string,
name: PropTypes.string,
fileSize: PropTypes.number,
path: PropTypes.string,
extension: PropTypes.string,
cover: PropTypes.shape({
filePath: PropTypes.string,
}),
}),
};
@@ -313,7 +395,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
if (!isNil(comicBookDetailData.rawFileDetails)) {
const encodedFilePath = encodeURI(
"http://localhost:3000" +
removeLeadingPeriod(comicBookDetailData.rawFileDetails.path),
removeLeadingPeriod(comicBookDetailData.rawFileDetails.cover.filePath),
);
imagePath = escapePoundSymbol(encodedFilePath);
comicBookTitle = comicBookDetailData.rawFileDetails.name;
@@ -332,6 +414,12 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
</span>
);
const editArchive = (
<span>
<i className="fas fa-file-archive"></i> Edit Comic Archive
</span>
);
const editLabel = (
<span>
<i className="fas fa-pencil-alt"></i> Edit Metadata
@@ -347,6 +435,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
};
const actionOptions = [
{ value: "match-on-comic-vine", label: CVMatchLabel },
{ value: "edit-comic-archive", label: editArchive },
{ value: "edit-metdata", label: editLabel },
{ value: "delete-comic", label: deleteLabel },
];
@@ -356,11 +445,15 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
case "match-on-comic-vine":
openDrawerWithCVMatches();
break;
case "edit-comic-archive":
openDrawerForEditingComicArchive();
break;
default:
console.log("No valid action selected.");
break;
}
};
return (
<section className="container">
<div className="section">
@@ -417,61 +510,8 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
title={"Comic Vine Search Matches"}
width={"600px"}
>
{!isEmpty(comicVineSearchQueryObject) &&
!isUndefined(comicVineSearchQueryObject) ? (
<div className="card search-criteria-card">
<div className="card-content">
<ComicVineSearchForm />
<p className="is-size-6">Searching against:</p>
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<div className="tags has-addons">
<span className="tag">Title</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams
.searchTerms.name
}
</span>
</div>
</div>
<div className="control">
<div className="tags has-addons">
<span className="tag">Number</span>
<span className="tag is-info">
{
comicVineSearchQueryObject.issue.searchParams
.searchTerms.number
}
</span>
</div>
</div>
</div>
</div>
</div>
) : (
<div className="progress-indicator-container">
<div className="indicator">
<Loader
type="MutatingDots"
color="#CCC"
secondaryColor="#999"
height={100}
width={100}
visible={comicVineAPICallProgress}
/>
</div>
</div>
)}
<div className="search-results-container">
{!isEmpty(comicVineSearchResults) && (
<MatchResult
matchData={comicVineSearchResults}
comicObjectId={comicObjectId}
/>
)}
</div>
{slidingPanelContentId !== "" &&
contentForSlidingPanel[slidingPanelContentId].content()}
</SlidingPane>
</>
)}

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

@@ -38,7 +38,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
const RawFileDetails = ({ value }) => {
if (!isNil(value.path)) {
const encodedFilePath = encodeURI(
"http://localhost:3000" + removeLeadingPeriod(value.path),
"http://localhost:3000" + removeLeadingPeriod(value.cover.filePath),
);
const filePath = escapePoundSymbol(encodedFilePath);
return (

2
src/client/components/LibraryGrid.tsx
View File

@@ -47,7 +47,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
if (!isNil(rawFileDetails)) {
const encodedFilePath = encodeURI(
"http://localhost:3000" +
removeLeadingPeriod(rawFileDetails.path),
removeLeadingPeriod(rawFileDetails.cover.filePath),
);
imagePath = escapePoundSymbol(encodedFilePath);
comicName = rawFileDetails.name;

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

@@ -39,7 +39,7 @@ export const RecentlyImported = ({
if (!isNil(rawFileDetails)) {
const encodedFilePath = encodeURI(
"http://localhost:3000" +
removeLeadingPeriod(rawFileDetails.path),
removeLeadingPeriod(rawFileDetails.cover.filePath),
);
imagePath = escapePoundSymbol(encodedFilePath);
comicName = rawFileDetails.name;

2
src/server/route/routes/opds.routes.ts
View File

@@ -79,8 +79,6 @@ router.use("/opds", async (req, res, next) => {
allowEmpty: true,
},
});
// write data to file
console.log(data);
});
return res.end(data);
});

5713
yarn.lock
View File

File diff suppressed because it is too large Load Diff