From 14a24f7352eefc37baa2e09fc29a4f28d8f85406 Mon Sep 17 00:00:00 2001
From: obfuscatedgenerated
 <75035364+obfuscatedgenerated@users.noreply.github.com>
Date: Thu, 2 Jun 2022 22:54:50 +0100
Subject: [PATCH] sfc is deprecated, lets use regular functions

---
 src/js/popup/Components.tsx | 110 +++++++++++++++++++++---------------
 src/js/popup/Popup.tsx      |   2 +-
 2 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/src/js/popup/Components.tsx b/src/js/popup/Components.tsx
index b1bd3fb..9bf94e2 100644
--- a/src/js/popup/Components.tsx
+++ b/src/js/popup/Components.tsx
@@ -1,53 +1,71 @@
 import * as React from "react";
 import { Flex, Box, Image, Text, Button } from "rebass";
 
-export const Page: React.SFC<{
-  url: string;
-  moveUp: any;
-  moveDown: any;
-}> = ({ url, moveUp, moveDown }) => (
-  <Flex key={url} alignItems="center">
-    <Box>
-      <Image src={url} my={1} width={0.95} height="100px" />
-    </Box>
-    <Flex flexDirection="column" justifyContent="around" width={0.05}>
-      {moveUp && (
-        <Text css={{ cursor: "pointer" }} onClick={moveUp}>
-          ⬆️
-        </Text>
-      )}
-      {moveDown && (
-        <Text css={{ cursor: "pointer" }} onClick={moveDown}>
-          ⬇️
-        </Text>
-      )}
+interface PageParams {
+  url: any,
+  moveUp: any,
+  moveDown: any
+}
+
+function Page({ url, moveUp, moveDown }: PageParams) {
+  return (
+    <Flex key={url} alignItems="center">
+      <Box>
+        <Image src={url} my={1} width={0.95} height="100px" />
+      </Box>
+      <Flex flexDirection="column" justifyContent="around" width={0.05}>
+        {moveUp && (
+          <Text css={{ cursor: "pointer" }} onClick={moveUp}>
+            ⬆️
+          </Text>
+        )}
+        {moveDown && (
+          <Text css={{ cursor: "pointer" }} onClick={moveDown}>
+            ⬇️
+          </Text>
+        )}
+      </Flex>
     </Flex>
-  </Flex>
-);
+  )
+};
 
-export const ResetButton: React.SFC<{ reset: any }> = ({ reset, children }) => (
-  <Button
-    onClick={reset}
-    css={{
-      "text-align": "right",
-      background: "#FAFAFA",
-      border: "1px solid red"
-    }}
-    color="red"
-    p={1}
-  >
-    {children}
-  </Button>
-);
+interface ResetButtonParams {
+  reset: any,
+  children: any
+}
 
-export const Checkbox: React.SFC<{
-  checked: boolean;
-  onChange: any;
-}> = ({ checked, onChange, children }) => (
-  <Box my={1}>
-    <label>
-      <input type="checkbox" checked={checked} onChange={onChange} />
+function ResetButton({ reset, children }: ResetButtonParams) {
+  return (
+    <Button
+      onClick={reset}
+      css={{
+        "text-align": "right",
+        background: "#FAFAFA",
+        border: "1px solid red"
+      }}
+      color="red"
+      p={1}
+    >
       {children}
-    </label>
-  </Box>
-);
+    </Button>
+  )
+};
+
+interface CheckboxParams {
+  checked: boolean,
+  onChange: any,
+  children: any
+}
+
+function Checkbox({ checked, onChange, children }: CheckboxParams) {
+  return (
+    <Box my={1}>
+      <label>
+        <input type="checkbox" checked={checked} onChange={onChange} />
+        {children}
+      </label>
+    </Box>
+  )
+};
+
+export { Page, ResetButton, Checkbox };
\ No newline at end of file
diff --git a/src/js/popup/Popup.tsx b/src/js/popup/Popup.tsx
index 43e9017..ef8b36d 100644
--- a/src/js/popup/Popup.tsx
+++ b/src/js/popup/Popup.tsx
@@ -5,7 +5,7 @@ import { getURL, getBookURL, getBook } from "../common/utils";
 import { Page, ResetButton, Checkbox } from "./Components";
 import { createPDF } from './pdf';
 
-const Popup: React.SFC = () => {
+function Popup() {
   // const [pageNumber, setPageNumber] = useState<number>(undefined);
   const [displayPages, setDisplayPages] = useState<boolean>(false);
   const [book, setBook] = useState<Book>(undefined);