todo

Author: a7ul

examples/weather-widget/assets/icons/01d.png

@@ -0,0 +1,18 @@
+import React from "react";
+import { Image } from "../../../src/index";
+import path from "path";
+import { AspectRatioMode } from "@nodegui/nodegui";
+
+const assetUrl =
+  "/Users/atulr/Project/personal/react-desktop/examples/weather-widget/assets/icons";
+
+type WeatherIconProps = {
+  icon: string;
+};
+export const WeatherIcon = React.memo<WeatherIconProps>(props => {
+  const iconId = props.icon || "na";
+  const imageUrl = `${path.resolve(assetUrl, `${iconId}.png`)}`;
+  return (
+    <Image src={imageUrl} aspectRatioMode={AspectRatioMode.KeepAspectRatio} />
+  );
+});

examples/weather-widget/assets/icons/01n.png

@@ -0,0 +1,59 @@
+import { Renderer, Window } from "../../src/index";
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { QMainWindow, WidgetAttribute, WindowType } from "@nodegui/nodegui";
+import { getCurrentWeather } from "./services/weather";
+import { WeatherIcon } from "./components/WeatherIcon";
+
+const windowAttribures = [
+  WidgetAttribute.WA_TranslucentBackground
+  // WidgetAttribute.WA_NoSystemBackground
+  // WidgetAttribute.WA_TransparentForMouseEvents
+];
+const windowFlags: WindowType[] = [
+  // WindowType.FramelessWindowHint
+];
+
+const App = () => {
+  const winRef = useRef<QMainWindow>(null);
+  const [weather, setWeather] = useState({
+    icon: "na"
+  });
+  useEffect(() => {
+    if (winRef.current) {
+      winRef.current.resize(800, 450);
+    }
+    getWeather();
+  }, []);
+
+  const getWeather = useCallback(async () => {
+    try {
+      const data = await getCurrentWeather();
+      const weatherData = data.weather[0];
+      setWeather({ icon: "01d" });
+    } catch (err) {
+      console.log(err);
+    }
+  }, []);
+
+  return (
+    <Window
+      id="win"
+      attributes={windowAttribures}
+      windowFlags={windowFlags}
+      ref={winRef}
+    >
+      <WeatherIcon icon={weather.icon} />
+    </Window>
+  );
+};
+
+const styleSheet = `
+ 
+`;
+
+Renderer.render(<App />, {
+  onRender: () => {
+    console.log("Yo");
+  },
+  enableDevtools: true
+});

examples/weather-widget/assets/icons/02d.png

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const getCurrentWeather = async () => {
+  let apiKey = "15e768797b4bf44b49979df29e6da67a";
+  let city = "Stockholm";
+  let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
+  const response = await axios({ url, method: "get" });
+  return response.data;
+};