separate ui react components

chriswebb09 · Dec 15, 2023 · 1ba99c8 · 1ba99c8
1 parent e3d8c74
commit 1ba99c8
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 185 deletions.
diff --git a/DirectReport/browserview/static/js/account.js b/DirectReport/browserview/static/js/account.js
@@ -18,6 +18,52 @@ const AccountUserInfo = (userData, reportData) => {
     )
 }
 
+const ReportInfo = () => {
+    return (
+        <div className="lg:col-span-1 sm:col-span-3 justify-center my-1">
+            <div className="shadow-lg self-center bg-blue-200 py-10 px-10 my-2 shadow-lg rounded-2xl">
+                <div className="py-10 mb-20 bg-blue-50 rounded-2xl">
+                    <a className="py-10 text-md hover:text-gray-200" href="/teamreport">
+                        <button type="button" className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">New Report</button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const ListDiv = () => {
+    return (
+        <div className="lg:col-span-1 sm:col-span-3 justify-center my-1">
+            <div className="shadow-lg self-center bg-blue-200 py-10 px-10 my-2 shadow-lg rounded-2xl">
+                <a className="py-10 text-md hover:text-gray-200" href="/list">
+                    <button type="button"
+                            className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+                        List
+                    </button>
+                </a>
+            </div>
+        </div>
+    )
+}
+
+
+const LogoutDiv = () => {
+    return (
+        <div className="col-span-3 justify-center my-1">
+            <div className="shadow-lg self-center bg-blue-200 py-10 px-8 my-2 shadow-lg rounded-2xl">
+                <div className="mx-80">
+                    <a className="px-6 text-md hover:text-gray-200" href="/logout">
+                        <button type="button"
+                                className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Log
+                            Out
+                        </button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+}
 const Account = () => {
 
     const [userData, setUserData] = useState({});
@@ -62,37 +108,9 @@ const Account = () => {
         return (
             <div className="grid grid-cols-3 gap-8 mb-1 mx-20 justify-cente">
                 {userData && AccountUserInfo(userData, reportData)}
-                <div className="lg:col-span-1 sm:col-span-3 justify-center my-1">
-                    <div className="shadow-lg self-center bg-blue-200 py-10 px-10 my-2 shadow-lg rounded-2xl">
-                        <div className="py-10 mb-20 bg-blue-50 rounded-2xl">
-                            <a className="py-10 text-md hover:text-gray-200" href="/teamreport">
-                                <button type="button" className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
-                                    New Report
-                                </button>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div className="lg:col-span-1 sm:col-span-3 justify-center my-1">
-                    <div className="shadow-lg self-center bg-blue-200 py-10 px-10 my-2 shadow-lg rounded-2xl">
-                        <a className="py-10 text-md hover:text-gray-200" href="/list">
-                            <button type="button" className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
-                                List
-                            </button>
-                        </a>
-                    </div>
-                </div>
-                <div className="col-span-3 justify-center my-1">
-                    <div className="shadow-lg self-center bg-blue-200 py-10 px-8 my-2 shadow-lg rounded-2xl">
-                        <div className="mx-80">
-                            <a className="px-6 text-md hover:text-gray-200" href="/logout">
-                                <button type="button" className="w-full text-white bg-indigo-700 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
-                                    Log Out
-                                </button>
-                            </a>
-                        </div>
-                    </div>
-                </div>
+                <ReportInfo />
+                <ListDiv />
+                <LogoutDiv />
             </div>
         )
     }

diff --git a/DirectReport/browserview/static/js/chart_helper.js b/DirectReport/browserview/static/js/chart_helper.js
@@ -1,16 +1,21 @@
 
 function showGraphics(data, divtag) {
+
     const newData = data
+
     const stringData = JSON.stringify(newData['broad_categories']);
+
     const values = Object.keys(newData['broad_categories']).map(function (key) {
         return [key, Number(newData['broad_categories'][key])]
     });
 
     const chartWidth = 350
     const chartHeight = 300
     const padding = 25
+
     var data = values
     const heightScalingFactor = chartHeight / 67
+
     var container = d3.select(divtag)
         .append('svg')
         .attr('width', chartWidth)
@@ -63,23 +68,28 @@ function showGraphics(data, divtag) {
 }
 
 function showGraphics2(data, divtag) {
+
     const newData = data
+
     const stringData = JSON.stringify(newData['broad_categories']);
+
     const values = Object.keys(newData['broad_categories']).map(function (key) {
         return [key, Number(newData['broad_categories'][key])]
     });
 
     const chartWidth = 350
     const chartHeight = 300
     const padding = 25
+
     var data = values
     const heightScalingFactor = chartHeight / 67
+
     var container = d3.select(divtag)
         .append('svg')
         .attr('width', chartWidth)
         .attr('height', chartHeight)
 
-     var svg = d3.select(divtag).select("svg")
+    var svg = d3.select(divtag).select("svg")
     var groups = svg.selectAll(".groups")
         .data(data)
         .enter()
@@ -126,15 +136,19 @@ function showGraphics2(data, divtag) {
 }
 
 function showGraphics3(data, divtag) {
+
     const newData = data
+
     const stringData = JSON.stringify(newData['broad_categories']);
+
     const values = Object.keys(newData['broad_categories']).map(function (key) {
         return [key, Number(newData['broad_categories'][key])]
     });
 
     const chartWidth = 350
     const chartHeight = 300
     const padding = 25
+
     var data = values
     const heightScalingFactor = chartHeight / 67
     var container = d3.select(divtag)

diff --git a/DirectReport/browserview/static/js/list.js b/DirectReport/browserview/static/js/list.js
@@ -19,7 +19,6 @@ class EntryList extends React.Component {
             </div>
         );
     }
-    // Thest
 }
 
 class EmptyEntryList extends React.Component {
@@ -37,6 +36,7 @@ class EmptyEntryList extends React.Component {
 
 
 const App = () => {
+
     const [listData, setListData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -71,7 +71,9 @@ const App = () => {
     } else {
         if (listData.length > 0) {
             return (
-                <div><EntryList name="Entry List" listdata={listData}/></div>
+                <div>
+                    <EntryList name="Entry List" listdata={listData}/>
+                </div>
             )
         } else {
             return (

diff --git a/DirectReport/browserview/static/js/note.js b/DirectReport/browserview/static/js/note.js
@@ -35,6 +35,7 @@ class ReportItem extends React.Component {
 }
 
 const App = () => {
+
     const [reportData, setReportData] = useState(null);
     const [teamData, setTeamData] = useState([]);
     const [loading, setLoading] = useState(true);