Skip to content

Commit

Permalink
Resolve state setting chaos in EvnetPicker detail views
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregorbg
gregorbg committed Jan 3, 2024
1 parent 31a4316 commit ac83a48
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 106 deletions.
27 changes: 9 additions & 18 deletions tnoodle-ui/src/main/components/EventPicker.tsx
View file
Expand Up @@ -17,7 +17,7 @@ import "./EventPicker.css";
import FmcTranslationsDetail from "./FmcTranslationsDetail";
import MbldDetail from "./MbldDetail";
import "@cubing/icons";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import SVG from "react-inlinesvg";
import SchemeColorPicker from "./SchemeColorPicker";
import ScrambleAndImage from "../model/ScrambleAndImage";
Expand Down Expand Up @@ -61,11 +61,17 @@ const EventPicker = ({ wcaEvent, wcifEvent }: EventPickerProps) => {

const [defaultColorScheme, setDefaultColorScheme] =
useState<Record<string, string>>();
const [colorScheme, setColorScheme] = useState<Record<string, string>>();

const [showColorSchemeConfig, setShowColorSchemeConfig] =
useState<boolean>(false);

const colorScheme = useMemo(() => {
return (
findExtension(wcifEvent, colorSchemeExtensionId)?.data
?.colorScheme || defaultColorScheme
);
}, [wcifEvent, defaultColorScheme]);

const fetchDisplayScramble = useCallback(
(fetchNewScramble = true) => {
// we need this additional boolean to make sure we can fetch only once
Expand Down Expand Up @@ -93,19 +99,6 @@ const EventPicker = ({ wcaEvent, wcifEvent }: EventPickerProps) => {
}
}, [wcaEvent.puzzle_id, colorScheme, fetchDisplayScramble]);

useEffect(() => {
let colorSchemeExtension = findExtension(
wcifEvent,
colorSchemeExtensionId
);

if (colorSchemeExtension !== undefined) {
setColorScheme(colorSchemeExtension.data.colorScheme);
} else if (defaultColorScheme !== undefined) {
setColorScheme(defaultColorScheme);
}
}, [wcifEvent, defaultColorScheme]);

const dispatch = useDispatch();

useEffect(() => {
Expand Down Expand Up @@ -243,9 +236,7 @@ const EventPicker = ({ wcaEvent, wcifEvent }: EventPickerProps) => {
setExtensionLazily(
wcifEvent,
colorSchemeExtensionId,
() => {
return buildColorSchemeExtension(colorScheme);
},
() => buildColorSchemeExtension(colorScheme),
dispatchWcifEvent
);
}
Expand Down
52 changes: 13 additions & 39 deletions tnoodle-ui/src/main/components/FmcTranslationsDetail.tsx
View file
@@ -1,5 +1,5 @@
import { chunk } from "lodash";
import React, { useCallback, useEffect, useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import RootState from "../model/RootState";
import { setFileZip } from "../redux/slice/ScramblingSlice";
Expand All @@ -8,11 +8,7 @@ import tnoodleApi from "../api/tnoodle.api";
import WcifEvent from "../model/WcifEvent";
import { fmcTranslationsExtensionId } from "../util/wcif.util";
import { setWcifEvent } from "../redux/slice/WcifSlice";
import {
findAndProcessExtension,
findExtension,
setExtensionLazily,
} from "../util/extension.util";
import { findExtension, setExtensionLazily } from "../util/extension.util";

const TRANSLATIONS_PER_LINE = 3;

Expand All @@ -32,21 +28,6 @@ const FmcTranslationsDetail = ({

const [availableTranslations, setAvailableTranslations] =
useState<Record<string, string>>();
const [selectedTranslations, setSelectedTranslations] = useState<string[]>(
[]
);

const [showTranslations, setShowTranslations] = useState(false);

useEffect(() => {
findAndProcessExtension(
fmcWcifEvent,
fmcTranslationsExtensionId,
(ext) => {
setSelectedTranslations(ext.data.languageTags);
}
);
}, [fmcWcifEvent]);

useEffect(() => {
if (availableTranslations === undefined) {
Expand All @@ -56,6 +37,17 @@ const FmcTranslationsDetail = ({
}
}, [availableTranslations]);

const [showTranslations, setShowTranslations] = useState(false);

const selectedTranslations = useMemo<string[]>(() => {
return (
findExtension(fmcWcifEvent, fmcTranslationsExtensionId)?.data
?.languageTags ||
suggestedFmcTranslations ||
[]
);
}, [fmcWcifEvent, suggestedFmcTranslations]);

const dispatch = useDispatch();

const buildFmcExtension = (selectedTranslations: string[]) => {
Expand All @@ -81,24 +73,6 @@ const FmcTranslationsDetail = ({
[dispatch, fmcWcifEvent]
);

useEffect(() => {
const existingExtensionFmc = findExtension(
fmcWcifEvent,
fmcTranslationsExtensionId
);

if (
existingExtensionFmc === undefined &&
suggestedFmcTranslations !== undefined
) {
updateEventSelectedTranslations(suggestedFmcTranslations);
}
}, [
fmcWcifEvent,
updateEventSelectedTranslations,
suggestedFmcTranslations,
]);

const handleTranslation = (id: string, status: boolean) => {
let newSelectedTranslations = selectedTranslations.filter(
(it) => it !== id || status
Expand Down
31 changes: 9 additions & 22 deletions tnoodle-ui/src/main/components/MbldDetail.tsx
View file
Expand Up @@ -5,9 +5,8 @@ import { setWcifEvent } from "../redux/slice/WcifSlice";
import { setFileZip } from "../redux/slice/ScramblingSlice";
import WcifEvent from "../model/WcifEvent";
import { mbldCubesExtensionId } from "../util/wcif.util";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useMemo } from "react";
import {
findAndProcessExtension,
findExtension,
setExtensionLazily,
upsertExtension,
Expand All @@ -25,13 +24,14 @@ const MbldDetail = ({ mbldWcifEvent }: MbldDetailProps) => {
(state: RootState) => state.scramblingSlice.generatingScrambles
);

const [mbld, setMbld] = useState<number>(MBLD_DEFAULT);

useEffect(() => {
findAndProcessExtension(mbldWcifEvent, mbldCubesExtensionId, (ext) =>
setMbld(ext.data.requestedScrambles)
const mbld = useMemo(() => {
return (
findExtension(mbldWcifEvent, mbldCubesExtensionId)?.data
?.requestedScrambles ||
bestMbldAttempt ||
MBLD_DEFAULT
);
}, [mbldWcifEvent]);
}, [mbldWcifEvent, bestMbldAttempt]);

const dispatch = useDispatch();

Expand All @@ -53,6 +53,7 @@ const MbldDetail = ({ mbldWcifEvent }: MbldDetailProps) => {
newWcifEvent.rounds = newWcifEvent.rounds.map(
(wcifRound) => {
const overrideExtension = buildMbldExtension(mbld);

return upsertExtension(
wcifRound,
overrideExtension
Expand All @@ -68,20 +69,6 @@ const MbldDetail = ({ mbldWcifEvent }: MbldDetailProps) => {
[dispatch, mbldWcifEvent]
);

useEffect(() => {
const existingExtensionMbld = findExtension(
mbldWcifEvent,
mbldCubesExtensionId
);
const shouldOverride =
existingExtensionMbld === undefined ||
existingExtensionMbld.data.requestedScrambles !== bestMbldAttempt;

if (shouldOverride && bestMbldAttempt !== undefined) {
updateEventMbld(bestMbldAttempt);
}
}, [mbldWcifEvent, updateEventMbld, bestMbldAttempt]);

return (
<tfoot>
<tr>
Expand Down
4 changes: 2 additions & 2 deletions tnoodle-ui/src/test/Main.test.tsx
View file
Expand Up @@ -136,8 +136,8 @@ it("There should be only 1 button of type submit, check FMC changes", async () =
// The only submit button must be Generate Scrambles
expect(buttonsTypeSubmit[0].innerHTML).toBe("Generate Scrambles");

// At first, the default translation selection should be the recommended tags
expect(getFmcLanguageTags(store)).toEqual(suggestedFmcTranslations);
// At first, there should be no translation information at all
expect(getFmcLanguageTags(store)).toBeUndefined();

// Select suggested
await act(async () => {
Expand Down
27 changes: 2 additions & 25 deletions tnoodle-ui/src/test/mock/wca.api.test.mock.ts
View file
Expand Up @@ -681,15 +681,7 @@ export const wcifs: Record<string, Wcif> = {
scrambleSetCount: "1",
},
],
extensions: [
{
data: {
languageTags: ["de", "es", "pt-BR"],
},
id: "org.worldcubeassociation.tnoodle.FmcLanguages",
specUrl: "",
},
],
extensions: [],
},
{
id: "333mbf",
Expand All @@ -706,26 +698,11 @@ export const wcifs: Record<string, Wcif> = {
id: "org.worldcubeassociation.tnoodle.SheetCopyCount",
specUrl: "",
},
{
data: {
requestedScrambles: 60,
},
id: "org.worldcubeassociation.tnoodle.MultiScrambleCount",
specUrl: "",
},
],
scrambleSetCount: "1",
},
],
extensions: [
{
data: {
requestedScrambles: 60,
},
id: "org.worldcubeassociation.tnoodle.MultiScrambleCount",
specUrl: "",
},
],
extensions: [],
},
],
schedule: { numberOfDays: 0, venues: [] },
Expand Down

0 comments on commit ac83a48

Please sign in to comment.