Rewrite SortButton

Includes:
- Replace previously hand-made button with button component from Geist UI.
- Change text depending on sorting condition (sort / sorting / sorted).
- Change styles depending on sorting state.
- Only execute clickAction prop if sorting state is not sorted.
- If sorting state is sorted, display a checkmark icon alongside the text.

Author: danilhendrasr

components/SortButton.tsx

@@ -1,17 +1,44 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { Button, Spacer } from "@geist-ui/react"
+import { Check } from "@geist-ui/react-icons"
 
-export const SortButton: React.FC<{ clickAction: () => void }> = (props) => {
-  const [text, setText] = useState("Sort!")
-  const { clickAction } = props
+type SortingState = "Sort" | "Sorting" | "Sorted"
+
+interface SortButtonProps {
+  clickAction: () => void
+  sortState: SortingState
+}
+
+export const SortButton: React.FC<SortButtonProps> = (props) => {
+  const { sortState, clickAction } = props
+  const [text, setText] = useState<SortingState>("Sort")
+
+  useEffect(() => {
+    if (sortState !== text) {
+      setText(sortState)
+    }
+  }, [sortState])
+
+  let isSorting = text === "Sorting"
+  let isSorted = text === "Sorted"
+  const onClick = () => {
+    if (isSorted) return
+    clickAction()
+  }
   return (
-    <button
-      disabled={text === "Sorting!"}
-      className="border rounded-md text-white bg-black font-bold shadow-md px-5 py-2 mx-auto w-32 block mt-8 transition-all disabled:opacity-60 disabled:bg-gray-400"
-      onClick={() => {
-        clickAction()
-        setText("Sorting!")
-      }}>
+    <Button
+      loading={isSorting}
+      shadow
+      type={isSorted ? "success" : "secondary"}
+      onClick={onClick}
+      style={{ display: "block", margin: "0 auto" }}>
+      {isSorted && (
+        <>
+          <Check size={20} />
+          <Spacer inline x={0.2} />
+        </>
+      )}
       {text}
-    </button>
+    </Button>
   )
 }