diff --git a/client/src/components/AdminView.tsx b/client/src/components/AdminView.tsx index 107c279..615b479 100644 --- a/client/src/components/AdminView.tsx +++ b/client/src/components/AdminView.tsx @@ -21,6 +21,7 @@ export const AdminView = () => { const pollOptionMaxTextLength = 100; const pollQuestionMaxTextLength = 150; const maxOptions = 10; + const minOptions = 2; // state const [question, setQuestion] = useState(""); @@ -57,7 +58,7 @@ export const AdminView = () => { }, [poll]); const validOptions = options.filter((o) => o.trim() !== ""); - const isValid = question.trim() !== "" && validOptions.length >= 2; + const isValid = question.trim() !== "" && validOptions.length >= minOptions; // handlers const addOption = () => { @@ -65,6 +66,15 @@ export const AdminView = () => { setOptions((prev) => [...prev, ""]); } }; + const removeOption = (i: number) => { + if (options.length > minOptions) { // 2 is min options + setOptions(prev => { + const copy = [...prev]; + copy.splice(i, 1); + return copy; + }); + } + } // detect edits for modal type changes useEffect(() => { @@ -152,7 +162,7 @@ export const AdminView = () => { }; return ( -
+

Create or Update Poll

{errorMessage &&

{errorMessage}

} @@ -171,33 +181,48 @@ export const AdminView = () => { {question.length}/{pollQuestionMaxTextLength}
- + {/* poll options */}
+ {options.map((opt, i) => ( -
- -
- { - const copy = [...options]; - copy[i] = e.target.value; - setOptions(copy); - }} - maxLength={pollOptionMaxTextLength} - placeholder={`Option ${i + 1}`} - /> +
+
+ + + { + const copy = [...options]; + copy[i] = e.target.value; + setOptions(copy); + }} + maxLength={pollOptionMaxTextLength} + placeholder={`Option ${i + 1}`} + /> + + + {opt.length}/{pollOptionMaxTextLength} +
- - {opt.length}/{pollOptionMaxTextLength} - + + {options.length > minOptions && ( + + )}
))}
+ {/* add poll option */} {options.length < maxOptions && (
@@ -208,7 +233,7 @@ export const AdminView = () => { )}

Results Display

-
+