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
-
+