fix: autoselect

colonizer-training-camp · Jul 17, 2024 · fbe1138 · fbe1138
1 parent ba62e4e
commit fbe1138
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/components/form/JyanshiSelect.tsx b/src/components/form/JyanshiSelect.tsx
@@ -1,23 +1,35 @@
 import { FilterOptionsState } from "@mui/base";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuth } from "../../contexts/AuthContext";
 import { useGlobals } from "../../contexts/GlobalsContext";
 import { UserResponse } from "../../types/UserResponse";
 import Autocomplete from "../commons/Autocomplete";
 
 interface Props {
   value: UserResponse | null;
+  exceptIds?: number[];
   onChange?: (value: UserResponse | null) => void;
   setToMyself?: boolean;
   fullWidth?: boolean;
 }
 
-const JyanshiSelect = ({ value, onChange, setToMyself, fullWidth }: Props) => {
+const JyanshiSelect = ({
+  value,
+  exceptIds,
+  onChange,
+  setToMyself,
+  fullWidth,
+}: Props) => {
   const { user } = useAuth();
   const { jyanshis } = useGlobals();
 
   const [initialSetToMyself, setInitialSetToMyself] = useState(false);
 
+  const filteredJyanshis = useMemo(
+    () => (jyanshis || []).filter((x) => !exceptIds?.includes(x.userId)),
+    [exceptIds, jyanshis]
+  );
+
   useEffect(() => {
     if (
       !value &&
@@ -56,7 +68,7 @@ const JyanshiSelect = ({ value, onChange, setToMyself, fullWidth }: Props) => {
 
   return (
     <Autocomplete
-      options={jyanshis}
+      options={filteredJyanshis}
       getOptionKey={(x) => x.userId}
       getOptionLabel={(x) => x.displayName}
       filterOptions={filterJyanshi}
@@ -78,9 +90,10 @@ const JyanshiSelect = ({ value, onChange, setToMyself, fullWidth }: Props) => {
             }
           : undefined
       }
-      autoSelect
+      // autoSelect
       autoComplete
       autoHighlight
+      filterSelectedOptions
     />
   );
 };

diff --git a/src/components/form/gameRecord/GameRecordInput.tsx b/src/components/form/gameRecord/GameRecordInput.tsx
@@ -48,6 +48,7 @@ const GameRecordInput = ({ gameType, value, onChange }: Props) => {
     index,
     gameType,
     value: value[index],
+    selectedJyanshis: value.map((v) => v.jyanshi?.userId ?? -1),
     onChange: (v: GameRecordInputValues) => handleChangeIndex(index, v),
     key: index,
   });

diff --git a/src/components/form/gameRecord/GameRecordSingleUserInput.tsx b/src/components/form/gameRecord/GameRecordSingleUserInput.tsx
@@ -47,6 +47,7 @@ const WindCheckbox = styled.span<{ oya: boolean }>`
 
 interface Props {
   index: number;
+  selectedJyanshis: number[];
   gridColumn: number;
   gameType: GameTypeResponse;
   value: GameRecordInputValues;
@@ -55,6 +56,7 @@ interface Props {
 
 const GameRecordSingleUserInput = ({
   index,
+  selectedJyanshis,
   gridColumn,
   gameType,
   value,
@@ -111,6 +113,7 @@ const GameRecordSingleUserInput = ({
         value={value.jyanshi}
         onChange={onChangeJyanshi}
         setToMyself={index === 0}
+        exceptIds={selectedJyanshis}
         fullWidth
       />
       {scoreType === "score" && (