From 5329b1fd16d0b8940f9526b523676dfb1cdbf317 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Thu, 24 Jun 2021 15:53:42 +0530
Subject: switching to typescript

---
 src/components/Pages/BillingPage.js  | 93 ----------------------------------
 src/components/Pages/BillingPage.tsx | 96 ++++++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/Pages/BillingPage.js
 create mode 100644 src/components/Pages/BillingPage.tsx

(limited to 'src/components/Pages')

diff --git a/src/components/Pages/BillingPage.js b/src/components/Pages/BillingPage.js
deleted file mode 100644
index abb7b7d..0000000
--- a/src/components/Pages/BillingPage.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-import React, { useState, useEffect } from "react";
-import axios from "axios";
-
-import AddNewItemForm from "./../Form/Items/AddNewItemForm";
-import RegisterItemForm from "./../Form/Items/RegisterItemForm";
-
-import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
-
-import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
-import MetaInfoForm from "./../Form/MetaInfoForm";
-
-import ItemsDisplay from "./../Display/ItemsDisplay";
-import SummaryDisplay from "./../Display/SummaryDisplay"; 
-
-const BillingPage = () => {
-  const [savedItems, getSavedItems] = useState([]);
-  const [savedPeople, getSavedPeople] = useState([]);
-  const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState(false);
-  const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState(false);
-  const [items, setItems] = useState([]);
-
-  const getRegisteredItems = () =>
-    axios.get(`/api/items/get-all`)
-      .then((res) => getSavedItems(res.data))
-      .catch((res) => console.log(res));
-
-  const getRegisteredPeople = () => 
-    axios.get(`/api/people/get-all`)
-      .then((res) => getSavedPeople(res.data))
-      .catch((res) => console.log(res));
-
-  // get data from server on startup
-  useEffect(() => {
-    getRegisteredItems();
-    getRegisteredPeople();
-  }, []);
-  // TODO: to be handled by backend
-  const defGSTValue = 18;
-
-  // update the items from AddNewItemForm
-  const getItems = (item) => setItems([...items, item]);
-
-  return (
-    <>
-      {registerItemFormVisibility &&
-        <RegisterItemForm 
-          defGSTValue={defGSTValue}
-          updateItemsList={getRegisteredItems} 
-          setVisibility={setRegisterItemFormVisibility}
-        />
-      }
-
-      {registerPersonFormVisibility &&
-        <RegisterPersonForm 
-          updateItemsList={getRegisteredItems} 
-          setVisibility={setRegisterPersonFormVisibility}
-        />
-      }
-
-      <DocumentInfoForm 
-        savedPeople={savedPeople}
-      />
-
-      <AddNewItemForm 
-        savedItems={savedItems} 
-        addItem={getItems} 
-        defGSTValue={defGSTValue}
-        registerItemFormVisibility={setRegisterItemFormVisibility}
-        registerPersonFormVisibility={setRegisterPersonFormVisibility}
-      />
-
-      <ItemsDisplay 
-        items={items} 
-        defGSTValue={defGSTValue}
-      />
-
-      <div className={"BillingPageFlex"}>
-        <MetaInfoForm/>
-        <SummaryDisplay items={items}/>
-      </div>
-    </>
-  );
-}
-
-export default BillingPage;
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
new file mode 100644
index 0000000..9697a24
--- /dev/null
+++ b/src/components/Pages/BillingPage.tsx
@@ -0,0 +1,96 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+import { Item } from "../../interfaces";
+
+import AddNewItemForm from "./../Form/Items/AddNewItemForm";
+import RegisterItemForm from "./../Form/Items/RegisterItemForm";
+
+import RegisterPersonForm from "./../Form/People/RegisterPersonForm";
+
+import DocumentInfoForm from "./../Form/Document/DocumentInfoForm";
+import MetaInfoForm from "./../Form/Document/MetaInfoForm";
+
+import ItemsDisplay from "./../Display/ItemsDisplay";
+import SummaryDisplay from "./../Display/SummaryDisplay"; 
+
+const BillingPage: React.FC = () => {
+  const [savedItems, getSavedItems] = useState<Item[]>([]);
+  const [savedPeople, getSavedPeople] = useState([]);
+  const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState<boolean>(false);
+  const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState<boolean>(false);
+  const [items, setItems] = useState<Item[]>([]);
+
+  const getRegisteredItems = () =>
+    axios.get(`/api/items/get-all`)
+      .then((res) => getSavedItems(res.data))
+      .catch((res) => console.log(res));
+
+  const getRegisteredPeople = () => 
+    axios.get(`/api/people/get-all`)
+      .then((res) => getSavedPeople(res.data))
+      .catch((res) => console.log(res));
+
+  // get data from server on startup
+  useEffect(() => {
+    getRegisteredItems();
+    getRegisteredPeople();
+  }, []);
+
+  // TODO: to be handled by backend
+  const defGSTValue = 18;
+
+  // update the items from AddNewItemForm
+  const getItems = (item: Item) => setItems([...items, item]);
+
+  return (
+    <>
+      {registerItemFormVisibility &&
+        <RegisterItemForm 
+          defGSTValue={defGSTValue}
+          updateItemsList={getRegisteredItems} 
+          setVisibility={setRegisterItemFormVisibility}
+        />
+      }
+
+      {registerPersonFormVisibility &&
+        <RegisterPersonForm 
+          updateItemsList={getRegisteredItems} 
+          setVisibility={setRegisterPersonFormVisibility}
+        />
+      }
+
+      <DocumentInfoForm 
+        savedPeople={savedPeople}
+      />
+
+      <AddNewItemForm 
+        savedItems={savedItems} 
+        addItem={getItems} 
+        defGSTValue={defGSTValue}
+        registerItemFormVisibility={setRegisterItemFormVisibility}
+        registerPersonFormVisibility={setRegisterPersonFormVisibility}
+      />
+
+      <ItemsDisplay 
+        items={items} 
+        defGSTValue={defGSTValue}
+      />
+
+      <div className={"BillingPageFlex"}>
+        <MetaInfoForm/>
+        <SummaryDisplay items={items}/>
+      </div>
+    </>
+  );
+}
+
+export default BillingPage;
-- 
cgit v1.2.3