sorted view and tournament sort UIs

src/App.tsx

@@ -1,12 +1,43 @@
-import { ComparatorInputs } from "./components/ComparatorInputs";
+import { useState } from "react";
+import { OptionsInput } from "./components/OptionsInput";
+import { TournamentSort } from "./components/TournamentSort";
+import { SortedView } from "./components/SortedView";
 import "./App.css";
 
+enum PAGES {
+  INPUT = 1,
+  SORT,
+  VIEW,
+}
+
 function App() {
+  const [page, setPage] = useState(PAGES.INPUT);
+  const [options, setOptions] = useState([""]);
+
+  const renderPage = () => {
+    switch (page) {
+      case PAGES.INPUT:
+        return <OptionsInput advancePage={() => setPage(PAGES.SORT)} options={options} setOptions={setOptions} />;
+      case PAGES.SORT:
+        return (
+          <TournamentSort
+            options={options}
+            onSortComplete={(sorted: string[]) => {
+              setOptions(sorted);
+              setPage(PAGES.VIEW);
+            }}
+          />
+        );
+      case PAGES.VIEW:
+        return <SortedView options={options} />;
+      default:
+        return null; // Handle invalid pages
+    }
+  };
   return (
     <>
-      <div></div>
       <h1>This Or That</h1>
-      <ComparatorInputs />
+      {renderPage()}
     </>
   );
 }

src/components/ComparatorInputs.tsx → src/components/OptionsInput.tsx

@@ -1,10 +1,13 @@
-import { useState } from "react";
 import { TextField, Button, IconButton, Stack } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 
-const ComparatorInputs = () => {
-  const [options, setOptions] = useState([""]);
+interface OptionsInputProps {
+  advancePage: () => void;
+  options: string[];
+  setOptions: (options: string[]) => void;
+}
 
+const OptionsInput: React.FC<OptionsInputProps> = ({ setOptions, options, advancePage }) => {
   const handleAddNewOption = () => {
     setOptions([...options, ""]);
   };
@@ -22,7 +25,7 @@ const ComparatorInputs = () => {
   // Handle form submission
   const handleSubmit = () => {
     console.log("Submitted Strings:", options);
-    alert(`Submitted Strings: ${options.join(", ")}`);
+    advancePage();
   };
 
   return (
@@ -32,7 +35,7 @@ const ComparatorInputs = () => {
         <Stack key={index} direction="row" spacing={1} alignItems="center">
           <TextField
             fullWidth
-            label={`Option ${index + 1}`}
+            label={input ? "" : "New Option"} // Hide label when text is present
             variant="outlined"
             value={input}
             onChange={(e) => handleOptionChange(index, e.target.value)}
@@ -56,4 +59,4 @@ const ComparatorInputs = () => {
   );
 };
 
-export { ComparatorInputs };
+export { OptionsInput };

src/components/SortedView.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Typography, Card, CardContent, Stack } from "@mui/material";
+
+interface SortedViewProps {
+  options: string[]; // The sorted options to display
+}
+
+const SortedView: React.FC<SortedViewProps> = ({ options }) => {
+  console.log("sorted options", options);
+  return (
+    <Stack spacing={2} sx={{ width: "60%", margin: "auto", mt: 4 }}>
+      <Typography variant="h4" align="center">
+        Ranked Options
+      </Typography>
+      {options.map((option, index) => (
+        <Card key={index} elevation={3} sx={{ width: "100%" }}>
+          <CardContent>
+            <Typography variant="h6" color="text.secondary">
+              Rank #{index + 1}
+            </Typography>
+            <Typography variant="body1" sx={{ mt: 1 }}>
+              {option}
+            </Typography>
+          </CardContent>
+        </Card>
+      ))}
+    </Stack>
+  );
+};
+
+export { SortedView };

src/components/TournamentSort.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import { Stack, Typography, Paper } from "@mui/material";
+
+interface TournamentSortProps {
+  options: string[]; // List of options to sort
+  onSortComplete: (sortedOptions: string[]) => void; // Callback when sorting is complete
+}
+
+const TournamentSort: React.FC<TournamentSortProps> = ({ options, onSortComplete }) => {
+  const [pairQueue, setPairQueue] = useState<[string, string][]>([]);
+  const [comparisonResults, setComparisonResults] = useState<Map<string, number>>(new Map());
+
+  // Generate all unique pairs from the options
+  useEffect(() => {
+    const pairs: [string, string][] = [];
+    for (let i = 0; i < options.length; i++) {
+      for (let j = i + 1; j < options.length; j++) {
+        pairs.push([options[i], options[j]]);
+      }
+    }
+    setPairQueue(pairs);
+  }, [options]);
+
+  // Handle the user's vote and update the comparison results
+  const handleVote = (winner: string, loser: string): void => {
+    // Update the comparison results
+    setComparisonResults((prevResults) => {
+      const updatedResults = new Map(prevResults);
+      updatedResults.set(winner, (updatedResults.get(winner) || 0) + 1);
+      updatedResults.set(loser, updatedResults.get(loser) || 0);
+      return updatedResults;
+    });
+
+    // Remove the current pair from the queue and set the next pair
+    const newPairQueue = pairQueue.slice(1);
+    setPairQueue(newPairQueue);
+
+    // If there are no more pairs to compare, finalize the sorted order
+    if (newPairQueue.length === 0) {
+      const finalSorted = [...options].sort((a, b) => (comparisonResults.get(b) || 0) - (comparisonResults.get(a) || 0));
+      onSortComplete(finalSorted); // Callback that the sorting is complete
+    }
+  };
+
+  const renderPair = (): React.ReactNode => {
+    if (pairQueue.length === 0) return null; // No more pairs to compare
+
+    const [leftOption, rightOption] = pairQueue[0];
+
+    return (
+      <Stack spacing={2}>
+        <Typography variant="h6">Which do you prefer?</Typography>
+        <Stack direction="row" spacing={2}>
+          <Paper
+            elevation={3}
+            sx={{
+              padding: 2,
+              textAlign: "center",
+              cursor: "pointer",
+            }}
+            onClick={() => handleVote(leftOption, rightOption)}
+          >
+            {leftOption}
+          </Paper>
+          <Paper
+            elevation={3}
+            sx={{
+              padding: 2,
+              textAlign: "center",
+              cursor: "pointer",
+            }}
+            onClick={() => handleVote(rightOption, leftOption)}
+          >
+            {rightOption}
+          </Paper>
+        </Stack>
+      </Stack>
+    );
+  };
+
+  return (
+    <Stack spacing={4} sx={{ width: "50%", margin: "auto", mt: 4 }}>
+      {renderPair()}
+    </Stack>
+  );
+};
+
+export { TournamentSort };