From a80f4ae7a759db4a6158c8beeedd1a9cf699ff01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Brand=C3=A3o?= <dcb@cin.ufpe.br>
Date: Mon, 31 Jul 2023 14:49:30 -0300
Subject: [PATCH] Fix alignments + warnings

---
 src/components/Filter/index.tsx | 15 +++++-----
 src/pages/Home/index.tsx        | 50 ++++++++++++++++++---------------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/Filter/index.tsx b/src/components/Filter/index.tsx
index 0a39f32..e5bf010 100644
--- a/src/components/Filter/index.tsx
+++ b/src/components/Filter/index.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
-import Conference, { DeadlineProps } from '../Conference';
-
 import { Box, Stack, Typography, TextField } from '@mui/material';
+import { Conference, DeadlineProps } from '../Conference';
 
 interface FilterProps {
   deadlines: DeadlineProps[];
 }
 
-const FilterPage: React.FC<FilterProps> = ({ deadlines }) => {
+function FilterPage({ deadlines }: FilterProps) {
   const [filterText, setFilterText] = useState('');
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -20,7 +19,7 @@ const FilterPage: React.FC<FilterProps> = ({ deadlines }) => {
     ),
   );
   return (
-    <Box width='100%' display='flex' flexDirection='column'>
+    <Box width='100%' height='100%' display='flex' flexDirection='column' flexGrow='1'>
       <TextField
         type='text'
         id='standard-basic'
@@ -31,13 +30,13 @@ const FilterPage: React.FC<FilterProps> = ({ deadlines }) => {
         placeholder='Type to filter'
       />
       <Stack marginTop='15px' spacing={2} display='flex' alignItems='center' width='100%'>
-        {filteredDeadlines.map(deadline => {
-          return <Conference key={deadline.deadlineId} {...deadline} />;
-        })}
+        {filteredDeadlines.map(deadline => (
+          <Conference key={deadline.deadlineId} {...deadline} />
+        ))}
         {filteredDeadlines.length === 0 && <Typography>No results, try again!</Typography>}
       </Stack>
     </Box>
   );
-};
+}
 
 export default FilterPage;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 35c68ff..222ed99 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,8 +1,8 @@
-import { DeadlineProps } from '../../components/Conference';
+import { Box, CircularProgress, Link, Typography } from '@mui/material';
 import Papa from 'papaparse';
 import { useEffect, useState } from 'react';
+import { DeadlineProps } from '../../components/Conference';
 import FilterPage from '../../components/Filter';
-import { CircularProgress, Link, Typography } from '@mui/material';
 
 function compare(a: DeadlineProps, b: DeadlineProps) {
   if (a.submissionDeadline < b.submissionDeadline) {
@@ -25,24 +25,24 @@ function Home() {
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
-    const sheetUrl = `https://docs.google.com/spreadsheets/d/${process.env.REACT_APP_SHEET_ID}/gviz/tq?tqx=out:csv&sheet=${process.env.REACT_APP_SHEET_NAME}`;
+    const sheetUrl =
+      'https://docs.google.com/spreadsheets/d/' +
+      `${process.env.REACT_APP_SHEET_ID}/gviz/tq?tqx=out:csv&sheet=${process.env.REACT_APP_SHEET_NAME}`;
     Papa.parse(sheetUrl, {
       download: true,
-      complete: function (results) {
+      complete(results) {
         const rawDeadlines: string[][] = results.data as string[][];
-        const parsedDeadlines = rawDeadlines.map((deadline: string[]) => {
-          return {
-            deadlineId: deadline[rawDeadlines[0].indexOf('DeadlineId')],
-            conference: deadline[rawDeadlines[0].indexOf('Conference')],
-            website: deadline[rawDeadlines[0].indexOf('WebSite')],
-            conferenceDetail: deadline[rawDeadlines[0].indexOf('ConferenceDetail')],
-            area: deadline[rawDeadlines[0].indexOf('GreatArea')] + ' - ' + deadline[rawDeadlines[0].indexOf('Area')],
-            conferenceDates: deadline[rawDeadlines[0].indexOf('ConferenceDates')],
-            location: deadline[rawDeadlines[0].indexOf('Location')],
-            submissionDeadline: new Date(deadline[rawDeadlines[0].indexOf('DeadlineISO')]),
-            deadlineDetails: deadline[15],
-          };
-        });
+        const parsedDeadlines = rawDeadlines.map((deadline: string[]) => ({
+          deadlineId: deadline[rawDeadlines[0].indexOf('DeadlineId')],
+          conference: deadline[rawDeadlines[0].indexOf('Conference')],
+          website: deadline[rawDeadlines[0].indexOf('WebSite')],
+          conferenceDetail: deadline[rawDeadlines[0].indexOf('ConferenceDetail')],
+          area: `${deadline[rawDeadlines[0].indexOf('GreatArea')]} - ${deadline[rawDeadlines[0].indexOf('Area')]}`,
+          conferenceDates: deadline[rawDeadlines[0].indexOf('ConferenceDates')],
+          location: deadline[rawDeadlines[0].indexOf('Location')],
+          submissionDeadline: new Date(deadline[rawDeadlines[0].indexOf('DeadlineISO')]),
+          deadlineDetails: deadline[15],
+        }));
 
         parsedDeadlines.splice(0, 1);
         parsedDeadlines.sort(compare);
@@ -53,16 +53,20 @@ function Home() {
   }, []);
 
   return (
-    <main>
-      <Typography variant='h5'>
-        The top CS conferences are listed in{' '}
-        <Link target='_blank' href={`https://CSRankings.org`}>
+    <>
+      <Typography variant='h6'>
+        {'The top CS conferences are listed in '}
+        <Link target='_blank' href='https://CSRankings.org'>
           CSRankings.org
         </Link>
       </Typography>
-      {loading && <CircularProgress />}
+      {loading && (
+        <Box display='flex' justifyContent='center' alignItems='center' flexGrow='1' width='100%'>
+          <CircularProgress />
+        </Box>
+      )}
       {!loading && <FilterPage deadlines={deadlines} />}
-    </main>
+    </>
   );
 }