Add UI for updating problems with admin key set (#18)

2025-06-26 18:26:38 +00:00 · 2025-02-12 08:59:42 -08:00
parent b2a98b4180
commit 4cf70843c0
3 changed files with 167 additions and 74 deletions
--- a/app/lib/replay/Problems.ts
+++ b/app/lib/replay/Problems.ts
@@ -24,9 +24,6 @@ export enum BoltProblemStatus {
  // Problem has been reviewed and has not been solved yet.
  Unsolved = "Unsolved",

-  // There are one or more known prompts describing the recording which solve the problem.
-  HasPrompt = "HasPrompt",
-
  // Nut automatically produces a suitable explanation for solving the problem.
  Solved = "Solved",
 }
--- a/app/routes/problem.$id.tsx
+++ b/app/routes/problem.$id.tsx
@@ -3,56 +3,21 @@ import { Header } from '~/components/header/Header';
 import { Menu } from '~/components/sidebar/Menu.client';
 import BackgroundRays from '~/components/ui/BackgroundRays';
 import { TooltipProvider } from '@radix-ui/react-tooltip';
-import { ToastContainerWrapper } from './problems';
+import { ToastContainerWrapper, Status, Keywords } from './problems';
 import { toast } from 'react-toastify';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useState } from 'react';
 import { useParams } from '@remix-run/react';
 import { getProblem, updateProblem as backendUpdateProblem, getProblemsUsername, BoltProblemStatus, hasNutAdminKey } from '~/lib/replay/Problems';
 import type { BoltProblem, BoltProblemComment, BoltProblemInput } from '~/lib/replay/Problems';

-function Status({ status }: { status: BoltProblemStatus }) {
-  const statusColors: Record<BoltProblemStatus, string> = {
-    [BoltProblemStatus.Pending]: 'bg-yellow-400',
-    [BoltProblemStatus.Unsolved]: 'bg-orange-500',
-    [BoltProblemStatus.HasPrompt]: 'bg-blue-200',
-    [BoltProblemStatus.Solved]: 'bg-blue-500'
-  };
-
-  return (
-    <div className="flex items-center gap-2 my-2">
-      <span className="font-semibold">Status:</span>
-      <div className={`inline-flex items-center px-3 py-1 rounded-full bg-opacity-10 ${statusColors[status]} text-${status}`}>
-        <span className={`w-2 h-2 rounded-full mr-2 ${statusColors[status]}`}></span>
-        <span className="font-medium">
-          {status.charAt(0).toUpperCase() + status.slice(1)}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-function Keywords({ keywords }: { keywords: string[] }) {
-  return (
-    <div>
-      <div className="keywords">
-        {keywords.map((keyword, index) => (
-          <span key={index} className="keyword">
-            {keyword}
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-}
-
 function Comments({ comments }: { comments: BoltProblemComment[] }) {
  return (
    <div className="comments">
      {comments.map((comment, index) => (
        <div key={index} className="comment">
          <div className="comment-header">
-            <span className="comment-author">{comment.username ?? ""}</span>
+            <span className="comment-username">{comment.username ?? ""}</span>
            <span className="comment-date">
              {new Date(comment.timestamp).toLocaleString()}
            </span>
@@ -84,15 +49,49 @@ function ProblemViewer({ problem }: { problem: BoltProblem }) {
  )
 }

+interface UpdateProblemFormProps {
+  handleSubmit: (content: string) => void;
+  updateText: string;
+  placeholder: string;
+}
+
+function UpdateProblemForm(props: UpdateProblemFormProps) {
+  const { handleSubmit, updateText, placeholder } = props;
+  const [value, setValue] = useState("");
+
+  const onSubmitClicked = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (value.trim()) {
+      handleSubmit(value)
+      setValue('')
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmitClicked} className="mb-6 p-4 bg-bolt-elements-background-depth-2 rounded-lg">
+      <textarea
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={placeholder}
+        rows={4}
+        className="w-full p-3 mb-3 bg-bolt-elements-background-depth-3 rounded-md border border-bolt-elements-background-depth-4 text-black placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y min-h-[100px]"
+        required
+      />
+      <button 
+        type="submit" 
+        disabled={!value.trim()}
+        className="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+      >
+        {updateText}
+      </button>
+    </form>
+  )
+}
+
 type DoUpdateCallback = (problem: BoltProblem) => BoltProblem;
 type UpdateProblemCallback = (doUpdate: DoUpdateCallback) => void;

-function CommentForm({ updateProblem }: { updateProblem: UpdateProblemCallback }) {
-  const [comment, setComment] = useState({
-    author: '',
-    text: ''
-  })
-
+function UpdateProblemForms({ updateProblem }: { updateProblem: UpdateProblemCallback }) {
  const handleAddComment = (content: string) => {
    const newComment: BoltProblemComment = {
      timestamp: Date.now(),
@@ -108,30 +107,48 @@ function CommentForm({ updateProblem }: { updateProblem: UpdateProblemCallback }
    });
  }

-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    if (comment.text.trim() && comment.author.trim()) {
-      handleAddComment(comment.text)
-      setComment({ author: '', text: '' })
+  const handleSetTitle = (title: string) => {
+    updateProblem(problem => ({
+      ...problem,
+      title,
+    }));
+  }
+
+  const handleSetDescription = (description: string) => {
+    updateProblem(problem => ({
+      ...problem,
+      description,
+    }));
+  }
+
+  const handleSetStatus = (status: string) => {
+    const statusEnum = BoltProblemStatus[status as keyof typeof BoltProblemStatus];
+    if (!statusEnum) {
+      toast.error('Invalid status');
+      return;
    }
+    updateProblem(problem => ({
+      ...problem,
+      status: statusEnum,
+    }));
+  }
+
+  const handleSetKeywords = (keywordString: string) => {
+    const keywords = keywordString.split(' ').map(keyword => keyword.trim()).filter(keyword => keyword.length > 0);
+    updateProblem(problem => ({
+      ...problem,
+      keywords,
+    }));
  }

  return (
-    <form onSubmit={handleSubmit} className="comment-form">
-      <textarea
-        value={comment.text}
-        onChange={(e) => setComment({ ...comment, text: e.target.value })}
-        placeholder="Add a comment..."
-        rows={3}
-        required
-      />
-      <button 
-        type="submit" 
-        disabled={!comment.text.trim() || !comment.author.trim()}
-      >
-        Add Comment
-      </button>
-    </form>
+    <>
+      <UpdateProblemForm handleSubmit={handleAddComment} updateText="Add Comment" placeholder="Add a comment..." />
+      <UpdateProblemForm handleSubmit={handleSetTitle} updateText="Set Title" placeholder="Set the title of the problem..." />
+      <UpdateProblemForm handleSubmit={handleSetDescription} updateText="Set Description" placeholder="Set the description of the problem..." />
+      <UpdateProblemForm handleSubmit={handleSetStatus} updateText="Set Status" placeholder="Set the status of the problem..." />
+      <UpdateProblemForm handleSubmit={handleSetKeywords} updateText="Set Keywords" placeholder="Set the keywords of the problem..." />
+    </>
  )
 }

@@ -144,19 +161,20 @@ function ViewProblemPage() {

  const [problemData, setProblemData] = useState<BoltProblem | null>(null);

-  const updateProblem = async (callback: DoUpdateCallback) => {
+  const updateProblem = useCallback(async (callback: DoUpdateCallback) => {
    if (!problemData) {
      toast.error('Problem data missing');
      return;
    }
    const newProblem = callback(problemData);
    setProblemData(newProblem);
+    console.log("BackendUpdateProblem", problemId, newProblem);
    await backendUpdateProblem(problemId, newProblem);
-  }
+  }, [problemData]);

  useEffect(() => {
    getProblem(problemId).then(setProblemData);
-  }, []);
+  }, [problemId]);

  return (
    <TooltipProvider>
@@ -173,7 +191,7 @@ function ViewProblemPage() {
           : <ProblemViewer problem={problemData} />}
        </div>
        {hasNutAdminKey() && problemData && (
-          <CommentForm updateProblem={updateProblem} />
+          <UpdateProblemForms updateProblem={updateProblem} />
        )}
        <ToastContainerWrapper />
      </div>
--- a/app/routes/problems.tsx
+++ b/app/routes/problems.tsx
@@ -6,7 +6,7 @@ import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { cssTransition, ToastContainer } from 'react-toastify';
 import { useEffect } from 'react';
 import { useState } from 'react';
-import { listAllProblems } from '~/lib/replay/Problems';
+import { BoltProblemStatus, listAllProblems } from '~/lib/replay/Problems';
 import type { BoltProblemDescription } from '~/lib/replay/Problems';

 const toastAnimation = cssTransition({
@@ -44,21 +44,97 @@ export function ToastContainerWrapper() {
  />
 }

+export function Status({ status }: { status: BoltProblemStatus | undefined }) {
+  if (!status) {
+    status = BoltProblemStatus.Pending;
+  }
+
+  const statusColors: Record<BoltProblemStatus, string> = {
+    [BoltProblemStatus.Pending]: 'bg-yellow-400',
+    [BoltProblemStatus.Unsolved]: 'bg-orange-500',
+    [BoltProblemStatus.Solved]: 'bg-blue-500'
+  };
+
+  return (
+    <div className="flex items-center gap-2 my-2">
+      <span className="font-semibold">Status:</span>
+      <div className={`inline-flex items-center px-3 py-1 rounded-full bg-opacity-10 ${statusColors[status]} text-${status}`}>
+        <span className={`w-2 h-2 rounded-full mr-2 ${statusColors[status]}`}></span>
+        <span className="font-medium">
+          {status.charAt(0).toUpperCase() + status.slice(1)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function Keywords({ keywords }: { keywords: string[] | undefined }) {
+  if (!keywords?.length) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2 mb-3">
+      {keywords.map((keyword, index) => (
+        <span
+          key={index}
+          className="px-3 py-1 text-sm rounded-full border border-bolt-elements-border bg-bolt-elements-background-depth-2 text-bolt-content-primary"
+        >
+          {keyword}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function getProblemStatus(problem: BoltProblemDescription): BoltProblemStatus {
+  return problem.status ?? BoltProblemStatus.Pending;
+}
+
 function ProblemsPage() {
  const [problems, setProblems] = useState<BoltProblemDescription[] | null>(null);
+  const [statusFilter, setStatusFilter] = useState<BoltProblemStatus | 'all'>(BoltProblemStatus.Solved);

  useEffect(() => {
    listAllProblems().then(setProblems);
  }, []);

+  const filteredProblems = problems?.filter(problem => {
+    return statusFilter === 'all' || getProblemStatus(problem) === statusFilter;
+  });
+
  return (
    <TooltipProvider>
      <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
        <BackgroundRays />
        <Header />
        <ClientOnly>{() => <Menu />}</ClientOnly>
-        
+
        <div className="p-6">
+          {problems && <div className="mb-4">
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as BoltProblemStatus | 'all')}
+              className="appearance-none w-48 px-4 py-2.5 rounded-lg bg-bolt-elements-background-depth-2 border border-bolt-elements-border text-bolt-content-primary hover:border-bolt-elements-border-hover focus:outline-none focus:ring-2 focus:ring-bolt-accent-primary/20 focus:border-bolt-accent-primary cursor-pointer relative pr-10"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'right 12px center',
+                backgroundSize: '16px'
+              }}
+            >
+              <option value="all">{`All Problems (${problems?.length ?? 0})`}</option>
+              {Object.values(BoltProblemStatus).map((status) => {
+                const count = problems?.filter(problem => getProblemStatus(problem) === status).length ?? 0;
+                return (
+                  <option key={status} value={status}>
+                    {status.charAt(0).toUpperCase() + status.slice(1) + ` (${count})`}
+                  </option>
+                );
+              })}
+            </select>
+          </div>}
+
          {problems === null ? (
            <div className="flex items-center justify-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
@@ -67,7 +143,7 @@ function ProblemsPage() {
            <div className="text-center text-gray-600">No problems found</div>
          ) : (
            <div className="grid gap-4">
-              {problems.map((problem) => (
+              {filteredProblems?.map((problem) => (
                <a
                  href={`/problem/${problem.problemId}`}
                  key={problem.problemId}
@@ -75,6 +151,8 @@ function ProblemsPage() {
                >
                  <h2 className="text-xl font-semibold mb-2">{problem.title}</h2>
                  <p className="text-gray-700 mb-2">{problem.description}</p>
+                  <Status status={problem.status} />
+                  <Keywords keywords={problem.keywords} />
                  <p className="text-sm text-gray-600">
                    Time: {new Date(problem.timestamp).toLocaleString()}
                  </p>