Delete sections when creating a theorem (#41)

hanshs · Nov 7, 2021 · 31d54c3 · 31d54c3 · vercel · Nov 7, 2021
1 parent af9446e
commit 31d54c3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git a/components/CreateClaim.tsx b/components/CreateClaim.tsx
@@ -11,6 +11,7 @@ interface CreateClaimProps {
     className?: string
     claim?: IClaimCreate
     onChange: (claim: IClaimCreate) => void
+    onRemoveSuccessor?: () => void
 }
 
 export function CreateClaim(props: CreateClaimProps) {
@@ -21,6 +22,10 @@ export function CreateClaim(props: CreateClaimProps) {
         setClaim(newClaim)
     }
 
+    const removeSuccessor = () => {
+        setClaim({ ...claim, successor: undefined })
+    }
+
     const onChangeSuccessor = (successor: IClaimCreate) => {
         const newClaim = { ...claim, successor }
         setClaim(newClaim)
@@ -39,8 +44,16 @@ export function CreateClaim(props: CreateClaimProps) {
     return (
         <div className={`space-y-1 ${props.className || ''}`}>
             <input className="basic-input" placeholder="Insert statement" onChange={onChangeStatement} />
-            {claim.successor && <CreateClaim className="ml-4" claim={claim.successor} onChange={onChangeSuccessor} />}
-            {!claim.successor && <button className="ml-2" onClick={addSuccessor}>➕</button>}
+            {claim.successor && (
+                <>
+                    <CreateClaim className="ml-4" claim={claim.successor} onChange={onChangeSuccessor} onRemoveSuccessor={removeSuccessor} />
+                </>)}
+            {!claim.successor && (
+                <>
+                    {props.onRemoveSuccessor && <button className="ml-2" onClick={props.onRemoveSuccessor}>➖</button>}
+                    <button className="ml-2" onClick={addSuccessor}>➕</button>
+                </>
+            )}
         </div>
     )
 }
diff --git a/components/CreateProofSteps.tsx b/components/CreateProofSteps.tsx
@@ -10,11 +10,14 @@ export interface IProofStepCreate {
 interface CreateProofStepsProps {
     onChange: (steps: IProofStepCreate[]) => void
     className?: string
+    isSubProof?: boolean
+    onRemoveSubProof?: () => void
 }
 
 export function CreateProofSteps(props: CreateProofStepsProps) {
     const emptyClaim = { claim: { statement: '' } }
     const [steps, setSteps] = React.useState<IProofStepCreate[]>([emptyClaim])
+    const [hoverStep, setHoverStep] = React.useState<number | undefined>()
 
     const addStep = () => {
         const newSteps = [...steps]
@@ -40,6 +43,17 @@ export function CreateProofSteps(props: CreateProofStepsProps) {
         setSteps(newSteps)
     }
 
+    const removeStep = (stepIndex: number) => {
+        const newSteps = [...steps]
+        newSteps.splice(stepIndex, 1)
+        setSteps(newSteps)
+    }
+
+    const removeSubProof = (stepIndex: number) => {
+        const newSteps = steps.map((step, index) => index === stepIndex ? { ...step, subProof: undefined } : step)
+        setSteps(newSteps)
+    }
+
     React.useEffect(() => {
         props.onChange(steps)
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -49,7 +63,7 @@ export function CreateProofSteps(props: CreateProofStepsProps) {
         <ol className="space-y-4">
             {steps.map((step, stepIndex) => (
 
-                <li className="space-x-4 flex" key={stepIndex}>
+                <li className={`space-x-4 flex justify-between p-2 rounded ${stepIndex === hoverStep ? ' bg-red-200' : ''}`} key={stepIndex}>
                     <div className="flex items-center">
 
                         <div className="text-2xl font-semibold mr-4 self-start pt-2">{stepIndex + 1}.</div>
@@ -59,19 +73,25 @@ export function CreateProofSteps(props: CreateProofStepsProps) {
                             <CreateClaim claim={step.claim} onChange={(claim) => updateClaim(claim, stepIndex)} />
 
                             {step.subProof && (
-                                <div className="text-sm scale-95 p-3 border">
-                                    <CreateProofSteps onChange={(subProof) => updateSubProof(subProof, stepIndex)} />
+                                <div className={`text-sm scale-95 p-3 border w-full`}>
+                                    <CreateProofSteps onChange={(subProof) => updateSubProof(subProof, stepIndex)} isSubProof={true} onRemoveSubProof={() => removeSubProof(stepIndex)} />
                                 </div>
                             )}
                         </div>
 
                     </div>
+                    <div className="flex items-center space-x-4">
+                        {stepIndex !== 0 && <button className="btn btn-small" onClick={() => removeStep(stepIndex)} onMouseEnter={() => setHoverStep(stepIndex)} onMouseLeave={() => setHoverStep(undefined)}>Delete Step</button>}
+                        {!step.subProof && <button className="btn btn-secondary btn-small" onClick={() => addSubProof(stepIndex)}>Add Subproof</button>}
+                    </div>
 
-                    {!step.subProof && <button className="btn self-end" onClick={() => addSubProof(stepIndex)}>Add SubProof</button>}
                 </li>
 
             ))}
-            <button className="btn btn-secondary" onClick={addStep}>Add Step</button>
+            <div className="flex justify-between">
+                <button className="btn btn-secondary" onClick={addStep}>Add Step</button>
+                {props.isSubProof && <button className="btn" onClick={props.onRemoveSubProof}>Delete Subproof</button>}
+            </div>
         </ol>
     )
 }
diff --git a/package.json b/package.json
@@ -31,4 +31,4 @@
     "tailwindcss": "^2.2.16",
     "typescript": "^4.4.3"
   }
-}
+}
diff --git a/public/styles/global.css b/public/styles/global.css
@@ -30,6 +30,11 @@ hr {
     height: fit-content;
 }
 
+.btn-small {
+    padding: 4px 10px;
+    font-size: 14px;
+}
+
 .btn-secondary {
     background-color: theme('colors.secondary');
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,4 +31,4 @@ @@
         "tailwindcss": "^2.2.16",
         "typescript": "^4.4.3"
       }
-    }
+    }