Fixed centering the map, added other solar data

src/components/Map.tsx

@@ -1,30 +1,20 @@
-import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
 import React, { FC } from "react";
 
-import { LatLng } from "leaflet";
+import UpdateMapCentre from "./UpdateMapCenter";
 import { useAppContext } from "./Context";
 
-interface MapCentreProps {
-  mapCentre: LatLng;
-}
-
 const Map: FC = (): JSX.Element => {
   const { coords } = useAppContext();
   const { latitude, longitude } = coords;
 
-  const UpdateMapCentre = (props: MapCentreProps): JSX.Element => {
-    const map = useMap();
-    map.panTo(props.mapCentre);
-    return null;
-  };
-
   return (
     <MapContainer center={[latitude, longitude]} zoom={12} scrollWheelZoom={false} style={{ width: "100%", height: "400px" }}>
       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       <Marker position={[latitude, longitude]}>
         <Popup>Selected Location</Popup>
       </Marker>
-      {/* <UpdateMapCentre mapCentre={{ lat: latitude, lng: longitude }} /> */}
+      <UpdateMapCentre center={[latitude, longitude]} />
     </MapContainer>
   );
 };

src/components/Slider.tsx

@@ -36,6 +36,7 @@ const Slider: FC = (): JSX.Element => {
   const inputProps = {
     value: getProgess(),
   };
+
   const sunriseIcon: IDateProps = {
     label: "sunrise",
     date: sunriseTime,
@@ -50,6 +51,7 @@ const Slider: FC = (): JSX.Element => {
     label: "sunset",
     date: sunsetTime,
   };
+
   return (
     <>
       <Section {...progressProps} />

src/components/UpdateMapCenter.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { IUpdateMapCentre } from "../interfaces/props/IUpdateMapCenter";
+import { useAppContext } from "./Context";
+import { useMap } from "react-leaflet";
+
+const UpdateMapCentre: FC<IUpdateMapCentre> = (): JSX.Element => {
+  const { coords } = useAppContext();
+  const { latitude, longitude } = coords;
+  const map = useMap();
+  map.setView([latitude, longitude]);
+  return null;
+};
+
+export default UpdateMapCentre;

src/components/tabs/Pri.tsx

@@ -12,8 +12,14 @@ const Pri: FC = (): JSX.Element => {
   const timeRef = useRef(null);
 
   const handleOnChange = () => {
-    const parsedDate = Date.parse(`${dateRef.current.value} ${timeRef.current.value}`);
+    const dateRefVal = dateRef.current.value;
+    //console.log(dateRefVal);
+    const timeRefVal = timeRef.current.value;
+    //console.log(timeRefVal);
+    const parsedDate = Date.parse(`${dateRefVal}T${timeRefVal}`);
+    //console.log(parsedDate);
     const customDate = new Date(parsedDate);
+    //console.log(customDate);
     changeTime(customDate);
   };
 

src/components/tabs/Tri.tsx

@@ -1,16 +1,20 @@
 import React, { FC } from "react";
 
 import Angle from "../partials/_Angle";
+import { IDateProps } from "../../interfaces/props/IDateProps";
 import { ISectionProps } from "../../interfaces/props/ISectionProps";
 import LABELS from "../../common/Labels";
 import Section from "../partials/_Section";
+import SliderIcon from "../partials/_SliderIcon";
 import suncalc from "suncalc";
 import { useAppContext } from "../Context";
 
 const Tri: FC = (): JSX.Element => {
   const { appTime, coords } = useAppContext();
   const { latitude, longitude } = coords;
 
+  const solarTimes = suncalc.getTimes(appTime, latitude, longitude);
+
   const currentAltitude = suncalc.getPosition(appTime, latitude, longitude).altitude;
   const altitudeProps: ISectionProps = {
     label: LABELS.CURRENT_ALTITUDE,
@@ -24,10 +28,72 @@ const Tri: FC = (): JSX.Element => {
     value: shadowLength,
   };
 
+  const dawn: IDateProps = {
+    label: "sunrise",
+    date: solarTimes.dawn,
+  };
+
+  const dusk: IDateProps = {
+    label: "sunset",
+    date: solarTimes.dusk,
+  };
+
+  const nauticalDawn: IDateProps = {
+    label: "sunrise",
+    date: solarTimes.nauticalDawn,
+  };
+
+  const nauticalDusk: IDateProps = {
+    label: "sunset",
+    date: solarTimes.nauticalDusk,
+  };
+
+  const nightStart: IDateProps = {
+    label: "sunrise",
+    date: solarTimes.night,
+  };
+
+  const nadir: IDateProps = {
+    label: "sunset",
+    date: solarTimes.nadir,
+  };
+
+  const nightEnd: IDateProps = {
+    label: "sunset",
+    date: solarTimes.nightEnd,
+  };
+
   return (
     <>
       <Angle {...altitudeProps} />
       {shadowLength > 0 ? <Section {...shadowProps} /> : null}
+      <div className="mt-3">
+        <h6>Dawn/dusk (alt: 6-12°)</h6>
+        <div className="slider mt-3">
+          <SliderIcon {...dawn} />
+          <SliderIcon {...dusk} />
+        </div>
+      </div>
+      <div className="mt-3">
+        <h6>Nautical dawn/dusk (alt: 12-18°)</h6>
+        <div className="slider mt-3">
+          <SliderIcon {...nauticalDawn} />
+          <SliderIcon {...nauticalDusk} />
+        </div>
+      </div>
+      <div className="mt-3">
+        <h6>Night start/end (alt&lt;18°)</h6>
+        <div className="slider mt-3">
+          <SliderIcon {...nightStart} />
+          <SliderIcon {...nightEnd} />
+        </div>
+      </div>
+      <div className="mt-3">
+        <h6>Nadir</h6>
+        <div className="slider mt-3">
+          <SliderIcon {...nadir} />
+        </div>
+      </div>
     </>
   );
 };

src/interfaces/props/IUpdateMapCenter.ts

@@ -0,0 +1,3 @@
+export interface IUpdateMapCentre {
+  center: number[];
+}