Merge pull request #457 from Klotske/add-longer-response-incentive

#435 Added longer response incentive

website/src/components/Survey/TrackedTextarea.tsx

@@ -0,0 +1,35 @@
+import { Progress, Stack, Textarea, TextareaProps } from "@chakra-ui/react";
+
+interface TrackedTextboxProps {
+  text: string;
+  thresholds: {
+    low: number;
+    medium: number;
+    goal: number;
+  };
+  textareaProps?: TextareaProps;
+  onTextChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TrackedTextarea = (props: TrackedTextboxProps) => {
+  const wordCount = props.text.split(" ").length - 1;
+
+  let progressColor: string;
+  switch (true) {
+    case wordCount < props.thresholds.low:
+      progressColor = "red";
+      break;
+    case wordCount < props.thresholds.medium:
+      progressColor = "yellow";
+      break;
+    default:
+      progressColor = "green";
+  }
+
+  return (
+    <Stack direction={"column"}>
+      <Textarea data-cy="reply" value={props.text} onChange={props.onTextChange} {...props.textareaProps} onCapture />
+      <Progress size={"md"} rounded={"md"} value={wordCount} colorScheme={progressColor} max={props.thresholds.goal} />
+    </Stack>
+  );
+};