Skip to content

Commit

Permalink
fix sets filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@Manwe-777
Manwe-777 committed Oct 20, 2023
1 parent dba9e81 commit 442618c
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 129 deletions.
2 changes: 1 addition & 1 deletion src/components/ContentWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ const ContentWrapper = (mainProps: ContentWrapperProps) => {
open={false}
className={getPopupClass(os)}
width="1000px"
height="540px"
height="620px"
openFnRef={openAdvancedCollectionSearch}
closeFnRef={closeAdvancedCollectionSearch}
>
Expand Down
5 changes: 4 additions & 1 deletion src/components/ui/Section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,13 @@ export type SectionProps = React.PropsWithChildren<{
style?: CSSProperties;
onClick?: () => void;
className?: string;
showIf?: boolean;
}>;

export default function Section(props: SectionProps): JSX.Element {
const { children, style, onClick, className } = props;
const { children, style, onClick, className, showIf } = props;

if (showIf === false) return <></>;

return (
<div
Expand Down
7 changes: 5 additions & 2 deletions src/components/views/collection/CollectionStatsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export default function CollectionStatsPanel({

let boostersMode = inBoostersMode[0];

defaultFilters.forEach((f: any) => {
if (f.id == "boosters") {
defaultFilters.forEach((f) => {
if (f.id == "booster" && f.type == "inbool") {
const filter: InBoolFilter = f.value;
if (filter.not == false) boostersMode = inBoostersMode[1];
if (filter.not == true) boostersMode = inBoostersMode[0];
Expand All @@ -98,13 +98,16 @@ export default function CollectionStatsPanel({
if (!stats) {
return <></>;
}

const setStats = stats.complete;
const wanted: { [key: string]: number } = {};
const missing: { [key: string]: number } = {};

const filteredRarities = CARD_RARITIES.filter((rarity) => {
const key = getRarityKey(rarity);
return !!key && setStats[key].total > 0;
});

filteredRarities.forEach((rarity) => {
const key = getRarityKey(rarity);
if (key) {
Expand Down
111 changes: 61 additions & 50 deletions src/components/views/collection/SetsView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ import SetCompletionStats from "./SetCompletionStats";

interface SetsViewProps {
stats: CollectionStats;
filterSets: string[];
filters: Filters<CardsData>;
setQuery: (query: string) => void;
}

export default function SetsView(props: SetsViewProps): JSX.Element {
const { stats, filterSets, filters, setQuery } = props;
const { stats, filters, setQuery } = props;

const {
futureBoosters,
Expand All @@ -29,7 +28,16 @@ export default function SetsView(props: SetsViewProps): JSX.Element {
boosterWinFactor,
} = useSelector((state: AppState) => state.collection);

const firstSet = filterSets[0] ? filterSets[0].toLowerCase() : "";
const setsFiltered: string[] = [];
filters.forEach((f) => {
if (f.type === "array" && f.id === "setCode") {
f.value.arr.forEach((setCode) => setsFiltered.push(setCode));
}
});

const firstSet = setsFiltered.sort()[0] ?? "";

const setsSelectedNum = setsFiltered.length;

const currentSetName = Object.keys(database.sets).filter(
(s) => database.sets[s].arenacode.toLowerCase() == firstSet
Expand All @@ -44,53 +52,56 @@ export default function SetsView(props: SetsViewProps): JSX.Element {

return (
<div className="sets-view-grid">
{stats[firstSet] ? (
<>
<Section
style={{
flexDirection: "column",
gridArea: "set",
padding: "16px",
}}
>
<Flex style={{ margin: "0 auto", lineHeight: "24px" }}>
<div
className="stats-set-icon"
style={{ backgroundImage: setIcon }}
/>
<div>{currentSetName}</div>
</Flex>
{database.sets[currentSetName]?.collation !== -1 ? (
<SetCompletionStats
setStats={stats[firstSet]}
boosterMath
rareDraftFactor={rareDraftFactor}
mythicDraftFactor={mythicDraftFactor}
boosterWinFactor={boosterWinFactor}
futureBoosters={futureBoosters}
/>
) : (
<div className="message">This set is not available for draft</div>
)}
</Section>
<Section
style={{
flexDirection: "column",
gridArea: "chart",
padding: "16px",
}}
>
<CompletionHeatMap
key={firstSet}
cardData={stats[firstSet]?.cards}
/>
</Section>
</>
) : (
<Section style={{ gridArea: "set" }}>
<div className="message">Select a set to see detailed statistics</div>
</Section>
)}
<Section showIf={setsSelectedNum > 1} style={{ gridArea: "set" }}>
<div className="message">
Select only one set to see per-set statistics
</div>
</Section>

<Section
showIf={stats[firstSet] && setsSelectedNum === 1}
style={{
flexDirection: "column",
gridArea: "set",
padding: "16px",
}}
>
<Flex style={{ margin: "0 auto", lineHeight: "24px" }}>
<div
className="stats-set-icon"
style={{ backgroundImage: setIcon }}
/>
<div>{currentSetName}</div>
</Flex>
{database.sets[currentSetName]?.collation !== -1 ? (
<SetCompletionStats
setStats={stats[firstSet]}
boosterMath
rareDraftFactor={rareDraftFactor}
mythicDraftFactor={mythicDraftFactor}
boosterWinFactor={boosterWinFactor}
futureBoosters={futureBoosters}
/>
) : (
<div className="message">This set is not available for draft</div>
)}
</Section>

<Section
showIf={stats[firstSet] && setsSelectedNum === 1}
style={{
flexDirection: "column",
gridArea: "chart",
padding: "16px",
}}
>
<CompletionHeatMap key={firstSet} cardData={stats[firstSet]?.cards} />
</Section>

<Section showIf={setsSelectedNum == 0} style={{ gridArea: "set" }}>
<div className="message">Select a set to see detailed statistics.</div>
</Section>

<Section
style={{ flexDirection: "column", gridArea: "stats", padding: "16px" }}
>
Expand Down
95 changes: 28 additions & 67 deletions src/components/views/collection/ViewCollection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,10 @@ import { useHistory, useRouteMatch } from "react-router-dom";

import usePagingControls from "../../../hooks/usePagingControls";
import reduxAction from "../../../redux/reduxAction";
import store, { AppState } from "../../../redux/stores/rendererStore";
import { AppState } from "../../../redux/stores/rendererStore";
import { CardsData } from "../../../types/collectionTypes";
import { Filters } from "../../../types/genericFilterTypes";
import doCollectionFilter from "../../../utils/tables/doCollectionFilter";
import setFilter from "../../../utils/tables/filters/setFilter";
import InputContainer from "../../InputContainer";
import PagingControls from "../../PagingControls";
import SetsFilter from "../../SetsFilter";
Expand All @@ -19,7 +18,7 @@ import Button from "../../ui/Button";
import Section from "../../ui/Section";
import Toggle from "../../ui/Toggle";
import CardCollection from "./CardCollection";
import getFiltersFromQuery from "./collectionQuery";
import getFiltersFromQuery, { removeFilterFromQuery } from "./collectionQuery";
import { getCollectionStats } from "./collectionStats";
import makeExportSetForScryfallFn from "./exportSetForScryfall";
import SetsView from "./SetsView";
Expand All @@ -42,23 +41,29 @@ export default function ViewCollection(props: ViewCollectionProps) {

makeExportSetForScryfallFn(collectionData);

const [filterSets, setFilterSets] = useState<string[]>([]);

const [filters, setFilters] = useState<Filters<CardsData>>();
const [sortValue, setSortValue] = useState<Sort<CardsData>>({
key: "setCode",
sort: -1,
});

const filterSets = useMemo(() => {
const sets: string[] = [];
if (filters) {
filters.forEach((f) => {
if (f.type === "array" && f.id === "setCode") {
f.value.arr.forEach((setCode) => sets.push(setCode));
}
});
}
return sets;
}, [filters]);

const toggleView = useCallback(() => {
if (viewMode === "cards") setViewMode("set");
else if (viewMode === "set") setViewMode("cards");
}, [viewMode]);

const forceQuery = useSelector(
(state: AppState) => state.renderer.forceQuery
);

const collectionQuery = useSelector(
(state: AppState) => state.renderer.collectionQuery
);
Expand All @@ -74,33 +79,16 @@ export default function ViewCollection(props: ViewCollectionProps) {
const pagingControlProps = usePagingControls(filteredData.length, 24);

useEffect(() => {
const newFilters = getFiltersFromQuery(
store.getState().renderer.collectionQuery
);
const newFilters = getFiltersFromQuery(collectionQuery);
setFilters(newFilters);
newFilters.forEach((f) => {
if (f.id === "setCode" && f.type === "array") {
setFilterSets(f.value.arr);
}
});
}, [forceQuery]);

useEffect(() => {
if (filters) {
filters.forEach((f) => {
if (f.id === "setCode" && f.type === "array") {
setFilterSets(f.value.arr);
}
});
}
}, [filters]);
}, [collectionQuery]);

useEffect(() => {
if (match) {
const { query } = match.params;
reduxAction(dispatch, {
type: "SET_COLLECTION_QUERY",
arg: { query, forceQuery: true },
arg: { query },
});
}
}, []);
Expand All @@ -114,55 +102,33 @@ export default function ViewCollection(props: ViewCollectionProps) {
(query: string) => {
reduxAction(dispatch, {
type: "SET_COLLECTION_QUERY",
arg: { query, forceQuery: true },
arg: { query },
});
},
[dispatch]
);

const setFilterSetsPre = useCallback(
const setFilterSets = useCallback(
(sets: string[]) => {
// if (filters) {
// const newFilters = setFilter(filters, {
// type: "array",
// id: "setCode",
// value: {
// mode: ":",
// arr: sets,
// not: false,
// },
// });
// setFilters(newFilters);
// }

let newQuery = removeFilterFromQuery(collectionQuery, ["s", "set"]);
if (sets.length > 0) {
newQuery += ` s:${sets.join(",")}`;
}
reduxAction(dispatch, {
type: "SET_COLLECTION_QUERY",
arg: {
query: sets.length > 0 ? `s:${sets.join(",")}` : "",
forceQuery: true,
},
});

const newFilters: Filters<CardsData> = setFilter([], {
type: "array",
id: "setCode",
value: {
mode: ":",
arr: sets,
not: false,
query: newQuery,
},
});

setFilters(newFilters);
},
[dispatch, filters]
[dispatch, filters, collectionQuery]
);

const handleChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>): void => {
reduxAction(dispatch, {
type: "SET_COLLECTION_QUERY",
arg: { query: e.currentTarget.value, forceQuery: false },
arg: { query: e.currentTarget.value },
});
},
[dispatch]
Expand Down Expand Up @@ -285,17 +251,12 @@ export default function ViewCollection(props: ViewCollectionProps) {
text={viewMode === "set" ? "Cards view" : "Set view"}
/>
<div style={{ width: "100%" }}>
<SetsFilter callback={setFilterSetsPre} filtered={filterSets} />
<SetsFilter callback={setFilterSets} filtered={filterSets} />
</div>
</div>
</Section>
{viewMode === "set" && (
<SetsView
setQuery={setQuery}
filterSets={filterSets}
filters={filters || []}
stats={stats}
/>
<SetsView setQuery={setQuery} filters={filters || []} stats={stats} />
)}
{viewMode === "cards" && (
<Section className="collection-sort-controls">
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/collection/advancedSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ export default function AdvancedSearch(
history.push(`/collection/${query}`);
reduxAction(dispatch, {
type: "SET_COLLECTION_QUERY",
arg: { query, forceQuery: true },
arg: { query },
});
handleClose();
}, [history, handleClose, dispatch, query]);
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/collection/collectionQuery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const { WHITE, BLUE, RED, BLACK, GREEN, COLORLESS } = constants;
* Matches a query string and returns an array to be used in the filters converter
* @param filterValue Query string
*/
function parseFilterValue(filterValue: string): ParsedToken[] {
export function parseFilterValue(filterValue: string): ParsedToken[] {
const reg =
/(([^\s"]+)(\b[>=|<=|:|=|!=|>|<]{1,2})([^\s"]+))|(([^\s"]+)(\b[>=|<=|:|=|!=|>|<]{1,2})("[^"]*"))|(([^\s"]+))|(("[^"]*"+))/;
const filterPattern = new RegExp(reg, "g");
Expand Down Expand Up @@ -481,7 +481,7 @@ export default function getFiltersFromQuery(query: string): Filters<CardsData> {
export function removeFilterFromQuery(query: string, keys: string[]): string {
const results = parseFilterValue(query);
const newQuery: string[] = [];
results.forEach((match: any) => {
results.forEach((match) => {
const [tokenKey, separator, tokenVal] = match;
const nKey = tokenKey.startsWith("-") ? tokenKey.slice(1) : tokenKey;
if (!keys.includes(nKey)) {
Expand Down
Loading

0 comments on commit 442618c

Please sign in to comment.