format code

resources/js/pages/Rainfall/RainfallGraph.tsx

@@ -39,7 +39,7 @@ const RainfallGraph = () => {
 
     return <PageLayout>
         {errorLabel()}
-        <div className="mx-5 mb-2 flex items-center justify-between">
+        <div className="mx-5 mb-2 flex items-center justify-between flex-col md:flex-row gap-5">
             <form className="flex flex-wrap gap-2">
                 <Field name="start_date"
                        type="date"

resources/js/pages/Weather.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useEffect, useState} from "react"
+import React, {FC, Dispatch, SetStateAction, useEffect, useState} from "react"
 import PageLayout from "../components/PageLayout"
 import useAxiosTools from "../hooks/AxiosTools"
 import {WeatherValue} from "../types"
@@ -7,9 +7,9 @@ import Img from "../components/Img"
 
 const Weather = () => {
 
-    const [currentWeather, setCurrentWeather] = useState<WeatherValue|null>(null)
+    const [currentWeather, setCurrentWeather] = useState<WeatherValue | null>(null)
     const [fetchTime, setFetchTime] = useState(0)
-    const [weatherDays, setWeatherDays] = useState<[string, WeatherValue[]][]|null>(null)
+    const [weatherDays, setWeatherDays] = useState<[string, WeatherValue[]][] | null>(null)
     const {loading, setLoading, errorLabel, errorCatch, cleanErrors, axiosGet} = useAxiosTools()
 
     useEffect(() => {
@@ -21,7 +21,7 @@ const Weather = () => {
         return () => clearInterval(timer)
     }, [fetchTime])
 
-    const getCurrentTime = () => Number(((new Date).getTime() /1000).toFixed())
+    const getCurrentTime = () => Number(((new Date).getTime() / 1000).toFixed())
 
     const fetchWeather = async () => {
         try {
@@ -71,18 +71,21 @@ const Weather = () => {
         <Card className={`flex justify-between ${loading ? 'animate-pulse' : ''}`}>
             <div className="m-2 flex flex-col justify-between">
                 <span className="text-6xl">{currentWeather?.main.temp.toFixed() ?? '--'} °C</span>
-                <span className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
+                <span
+                    className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
             </div>
             <div className="flex items-stretch">
                 <div>
                     {/*{currentWeather && <img src={`http://openweathermap.org/img/wn/${currentWeather?.weather[0].icon}@2x.png`}*/}
                     {/*     alt={currentWeather?.weather[0].main} width="120px" />}*/}
                     {currentWeather && <Img src={`images/icons/${currentWeather?.weather[0].icon}.svg`}
-                                            alt={currentWeather?.weather[0].main} width="120px" />}
+                                            alt={currentWeather?.weather[0].main} width="120px"/>}
                 </div>
                 <div className="flex flex-col gap-1">
-                    <span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span className="text-2xl">°C</span></span>
+                    <span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span
-                    <span className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
+                        className="text-2xl">°C</span></span>
+                    <span
+                        className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
                 </div>
             </div>
         </Card>
@@ -95,9 +98,15 @@ const Weather = () => {
 
 export default Weather
 
-const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values= []}) => {
+const WeatherCard: FC<{ date: string, values: WeatherValue[] }> = ({date, values = []}) => {
 
-    const [weatherState, setWeatherState] = useState<{main: string, description: string, icon: string, min: number, max: number}|null>(null)
+    const [weatherState, setWeatherState] = useState<{
+        main: string,
+        description: string,
+        icon: string,
+        min: number,
+        max: number
+    } | null>(null)
     const [showDetails, setShowDetails] = useState(false)
 
     useEffect(() => {
@@ -119,15 +128,15 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
             }
 
             const tag = value.weather[0].main
-            if (! result[tag]) {
+            if (!result[tag]) {
                 result[tag] = 0
             }
             result[tag]++
         })
 
-        let itemToReturn: {name:string, value: number}|null = null
+        let itemToReturn: { name: string, value: number } | null = null
         for (const item in result) {
-            if (! itemToReturn || itemToReturn.value < result[item]) {
+            if (!itemToReturn || itemToReturn.value < result[item]) {
                 itemToReturn = {name: item, value: result[item]}
             }
         }
@@ -162,11 +171,11 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
                 <span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
             </div>
         </div>
-        <WeatherDetails showDetails={showDetails} closeDetails={() => showDetails(false)} values={values} />
+        <WeatherDetails showDetails={showDetails} closeDetails={() => showDetails(false)} values={values}/>
     </>
 }
 
-const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values: WeatherValue[]}> = ({showDetails, closeDetails, values}) => {
+const WeatherDetails: FC<WeatherDetailsProps> = ({showDetails, closeDetails, values}) => {
 
     return <ul onClick={closeDetails}
                className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
@@ -186,3 +195,9 @@ const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values
         </li>)}
     </ul>
 }
+
+interface WeatherDetailsProps {
+    showDetails: boolean,
+    closeDetails: Dispatch<SetStateAction<boolean>>,
+    values: WeatherValue[],
+}