updates to handle more than one weather widget

src/components/widget.jsx

@@ -1,9 +1,10 @@
-import Weather from "components/widgets/weather/weather";
+import WeatherApi from "components/widgets/weather/weather";
 import OpenWeatherMap from "components/widgets/openweathermap/weather";
 import Resources from "components/widgets/resources/resources";
 
 const widgetMappings = {
-  weather: Weather,
+  weather: WeatherApi, // This key will be deprecated in the future
+  weatherapi: WeatherApi,
   openweathermap: OpenWeatherMap,
   resources: Resources,
 };

src/components/widgets/openweathermap/weather.jsx

@@ -8,33 +8,48 @@ export default function OpenWeatherMap({ options }) {
     `/api/widgets/openweathermap?lat=${options.latitude}&lon=${options.longitude}&apiKey=${options.apiKey}&duration=${options.cache}&units=${options.units}`
   );
 
-  if (error) {
+  if (error || data?.cod == 401) {
     return (
-      <div className="order-last grow flex-none flex flex-row items-center justify-end">
+      <div className="flex flex-col">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
             <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
             <div className="flex flex-col ml-3 text-left">
               <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
               <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
             </div>
           </div>
+        </div>
+      </div>
     );
   }
 
   if (!data) {
-    return <div className="order-last grow flex-none flex flex-row items-center justify-end"></div>;
+    return <div className="flex flex-row items-center"></div>;
   }
 
   if (data.error) {
-    return <div className="order-last grow flex-none flex flex-row items-center justify-end"></div>;
+    return <div className="flex flex-row items-center"></div>;
   }
+
   return (
-    <div className="order-last grow flex-none flex flex-row items-center justify-end">
+    <div className="flex flex-col">
-      <Icon condition={data.weather[0].id} timeOfDay={(data.dt > data.sys.sunrise) && (data.dt < data.sys.sundown) ? "day" : "night"} />
+      <div className="flex flex-row items-center justify-end">
+        <div className="flex flex-col items-center">
+          <Icon
+            condition={data.weather[0].id}
+            timeOfDay={data.dt > data.sys.sunrise && data.dt < data.sys.sundown ? "day" : "night"}
+          />
+        </div>
         <div className="flex flex-col ml-3 text-left">
           <span className="text-theme-800 dark:text-theme-200 text-sm">
+            {options.label && `${options.label}, `}
             {data.main.temp.toFixed(1)}&deg;
           </span>
-        <span className="text-theme-800 dark:text-theme-200 text-xs">{data.weather[0].description.charAt(0).toUpperCase() + data.weather[0].description.slice(1)}</span>
+          <span className="text-theme-800 dark:text-theme-200 text-xs">
+            {data.weather[0].description.charAt(0).toUpperCase() + data.weather[0].description.slice(1)}
+          </span>
+        </div>
       </div>
     </div>
   );

src/components/widgets/weather/weather.jsx

@@ -3,29 +3,33 @@ import { BiError } from "react-icons/bi";
 
 import Icon from "./icon";
 
-export default function Weather({ options }) {
+export default function WeatherApi({ options }) {
   const { data, error } = useSWR(
     `/api/widgets/weather?lat=${options.latitude}&lon=${options.longitude}&apiKey=${options.apiKey}&duration=${options.cache}`
   );
 
   if (error) {
     return (
-      <div className="flex flex-row items-center">
+      <div className="flex flex-col">
+        <div className="flex flex-row items-center justify-end">
+          <div className="flex flex-col items-center">
             <BiError className="w-8 h-8 text-theme-800 dark:text-theme-200" />
             <div className="flex flex-col ml-3 text-left">
               <span className="text-theme-800 dark:text-theme-200 text-sm">API</span>
               <span className="text-theme-800 dark:text-theme-200 text-xs">Error</span>
             </div>
           </div>
+        </div>
+      </div>
     );
   }
 
   if (!data) {
-    return <div className="flex flex-row items-center"></div>;
+    return <div className="flex flex-row items-center justify-end"></div>;
   }
 
   if (data.error) {
-    return <div className="flex flex-row items-center"></div>;
+    return <div className="flex flex-row items-center justify-end"></div>;
   }
 
   return (

src/pages/index.js

@@ -17,6 +17,8 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
   ssr: false,
 });
 
+const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather"];
+
 export default function Home() {
   const { data: services, error: servicesError } = useSWR("/api/services");
   const { data: bookmarks, error: bookmarksError } = useSWR("/api/bookmarks");
@@ -33,13 +35,13 @@ export default function Home() {
             {widgets && (
               <>
                 {widgets
-                  .filter((widget) => widget.type !== "weather")
+                  .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
                     <Widget key={i} widget={widget} />
                   ))}
                 <div className="grow"></div>
                 {widgets
-                  .filter((widget) => widget.type === "weather")
+                  .filter((widget) => rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
                     <Widget key={i} widget={widget} />
                   ))}