Merge pull request #17 from CS3219-AY2324S1/develop

Update Assignment 4

client/src/components/Questions (prev)/Read/QuestionConstraints.tsx

@@ -0,0 +1,28 @@
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import { QuestionConstraint as QuestionConstraintType } from '../../../types';
+import SectionHeader from './SectionHeader';
+
+interface QuestionConstraintsProps {
+  constraints?: QuestionConstraintType[];
+}
+
+const QuestionConstraints: React.FC<QuestionConstraintsProps> = ({
+  constraints
+}) => {
+  return (
+    <div className="flex flex-col w-full gap-2">
+      <SectionHeader title="Constraints" />
+
+      <div className="flex flex-col gap-1 text-gray-100 text-sm">
+        {constraints?.map((constraint, index) => (
+          <div key={index} className="flex gap-4 items-center">
+            <ArrowRightIcon className="w-4 h-4" />
+            {constraint}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default QuestionConstraints;

client/src/components/Questions (prev)/Read/QuestionDescription.tsx

@@ -0,0 +1,22 @@
+import { QuestionDescription as QuestionDescriptionType } from '../../../types';
+import SectionHeader from './SectionHeader';
+
+interface QuestionDescriptionProps {
+  description?: QuestionDescriptionType;
+}
+
+const QuestionDescription: React.FC<QuestionDescriptionProps> = ({
+  description
+}) => {
+  return (
+    <>
+      <div className="flex flex-col gap-2 w-full">
+        <SectionHeader title="Description" />
+
+        <p className="text-sm text-gray-100">{description}</p>
+      </div>
+    </>
+  );
+};
+
+export default QuestionDescription;

client/src/components/Questions (prev)/Read/QuestionExamples.tsx

@@ -0,0 +1,24 @@
+import { QuestionExample as QuestionExampleType } from '../../../types';
+import QuestionExample from './QuestionExample';
+
+interface QuestionExampleProps {
+  examples?: QuestionExampleType[];
+}
+
+const QuestionExamples: React.FC<QuestionExampleProps> = ({ examples }) => {
+  return (
+    <>
+      {examples?.map((example, index) => (
+        <QuestionExample
+          key={index}
+          index={index + 1}
+          input={example.in}
+          output={example.out}
+          explanation={example.explanation}
+        />
+      ))}
+    </>
+  );
+};
+
+export default QuestionExamples;

client/src/components/Questions (prev)/Write/QuestionConstraints.tsx

@@ -0,0 +1,66 @@
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/solid';
+import { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  addConstraint,
+  deleteConstraint,
+  selectConstraints,
+  updateConstraint
+} from '../../../features/questions/creatorSlice';
+import { store } from '../../../store';
+import { QuestionConstraint } from '../../../types';
+import SectionHeader from './SectionHeader';
+
+const QuestionConstraints = () => {
+  const constraints = useSelector(selectConstraints);
+
+  const onAdd = useCallback(() => {
+    store.dispatch(addConstraint(''));
+  }, [store, constraints]);
+
+  const onRemove = useCallback(
+    (constraint: QuestionConstraint) => {
+      store.dispatch(deleteConstraint(constraint));
+    },
+    [store, constraints]
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      store.dispatch(updateConstraint({ constraint: e.target.value, index }));
+    },
+    [store]
+  );
+
+  return (
+    <div className="flex flex-col bg-gray-800 p-8 rounded-2xl shadow-lg gap-4">
+      <SectionHeader title="Constraints" />
+
+      {constraints.map((constraint, index) => (
+        <div key={index} className="flex gap-4 items-center px-4 text-gray-100">
+          <ArrowRightIcon className="w-4 h-4" />
+          <input
+            type="text"
+            value={constraint}
+            onChange={(e) => handleChange(e, index)}
+            className="rounded-md outline-none px-2 border shadow-inner bg-gray-800 w-full"
+          />
+          <button onClick={() => onRemove(constraint)} className="pl-3 flex">
+            <div className="p-1 bg-gray-700 rounded-full shadow-lg hover:scale-105">
+              <MinusIcon className="w-4 h-4 text-rose-500" />
+            </div>
+          </button>
+        </div>
+      ))}
+
+      <button onClick={onAdd} className="pl-3 flex">
+        <div className="p-1 bg-gray-700 rounded-full shadow-lg hover:scale-105">
+          <PlusIcon className="w-4 h-4 text-gray-100" />
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default QuestionConstraints;