ProductsWay · jellydn · Nov 22, 2022 · Dec 3, 2022
diff --git a/app.go b/app.go
@@ -2,9 +2,29 @@ package main
 
 import (
 	"context"
+	"encoding/json"
 	"fmt"
+	"io/ioutil"
+	"log"
+	"net/http"
+	"sort"
 )
 
+type RandomImage struct {
+	Message string
+	Status  string
+}
+
+type AllBreeds struct {
+	Message map[string]map[string][]string
+	Status  string
+}
+
+type ImagesByBreed struct {
+	Message []string
+	Status  string
+}
+
 // App struct
 type App struct {
 	ctx context.Context
@@ -21,7 +41,63 @@ func (a *App) startup(ctx context.Context) {
 	a.ctx = ctx
 }
 
-// Greet returns a greeting for the given name
-func (a *App) Greet(name string) string {
-	return fmt.Sprintf("Hello %s, It's show time!", name)
+func (a *App) GetRandomImageUrl() string {
+	response, err := http.Get("https://dog.ceo/api/breeds/image/random")
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	responseData, err := ioutil.ReadAll(response.Body)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	var data RandomImage
+	json.Unmarshal(responseData, &data)
+
+	return data.Message
+}
+
+func (a *App) GetBreedList() []string {
+	var breeds []string
+
+	response, err := http.Get("https://dog.ceo/api/breeds/list/all")
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	responseData, err := ioutil.ReadAll(response.Body)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	var data AllBreeds
+	json.Unmarshal(responseData, &data)
+
+	for k := range data.Message {
+		breeds = append(breeds, k)
+	}
+
+	sort.Strings(breeds)
+
+	return breeds
+}
+
+func (a *App) GetImageUrlsByBreed(breed string) []string {
+
+	url := fmt.Sprintf("%s%s%s%s", "https://dog.ceo/api/", "breed/", breed, "/images")
+	response, err := http.Get(url)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	responseData, err := ioutil.ReadAll(response.Body)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	var data ImagesByBreed
+	json.Unmarshal(responseData, &data)
+
+	return data.Message
 }
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>wails-react-demo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
 </head>
 <body>
 <div id="root"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "swr":"2.0.0-rc.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",
@@ -19,4 +20,4 @@
     "typescript": "^4.9.3",
     "vite": "^3.2.4"
   }
-}
+}
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-e8868246d0965fec42f8916e85224d6b
+3ea1113871f7d8ed6506615c919ed32f
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,59 +1,14 @@
-#app {
-    height: 100vh;
-    text-align: center;
+#App {
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+  justify-content: center;
+  margin: 0 auto;
 }
 
-#logo {
-    display: block;
-    width: 50%;
-    height: 50%;
-    margin: auto;
-    padding: 10% 0 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-origin: content-box;
+p {
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  display: flex;
 }
-
-.result {
-    height: 20px;
-    line-height: 20px;
-    margin: 1.5rem auto;
-}
-
-.input-box .btn {
-    width: 60px;
-    height: 30px;
-    line-height: 30px;
-    border-radius: 3px;
-    border: none;
-    margin: 0 0 0 20px;
-    padding: 0 8px;
-    cursor: pointer;
-}
-
-.input-box .btn:hover {
-    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-    color: #333333;
-}
-
-.input-box .input {
-    border: none;
-    border-radius: 3px;
-    outline: none;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 10px;
-    background-color: rgba(240, 240, 240, 1);
-    -webkit-font-smoothing: antialiased;
-}
-
-.input-box .input:hover {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-}
-
-.input-box .input:focus {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,28 +1,94 @@
-import {useState} from 'react';
-import logo from './assets/images/logo-universal.png';
-import './App.css';
-import {Greet} from "../wailsjs/go/main/App";
+import {
+  GetBreedList,
+  GetImageUrlsByBreed,
+  GetRandomImageUrl,
+} from "../wailsjs/go/main/App";
+import "./App.css";
+import { useState } from "react";
+import useSWR from "swr";
+
+function BreedList({ name }: { name: string }) {
+  const {
+    isLoading,
+    data: images = [],
+    error,
+  } = useSWR(name, GetImageUrlsByBreed);
+
+  if (isLoading) return <p>Loading</p>;
+
+  if (error) return <p>Failed to fetch</p>;
+
+  return (
+    <ol>
+      {images.map((img) => (
+        <li key={img}>
+          <img src={img} alt="dog" />
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+function RandomDog({ showedAt }: { showedAt: number }) {
+  const {
+    isLoading,
+    data: img,
+    error,
+  } = useSWR(`random-${showedAt}`, GetRandomImageUrl);
+
+  if (isLoading) return <p>Loading</p>;
+
+  if (error) return <p>Failed to fetch</p>;
+
+  return <img src={img} alt="dog" />;
+}
 
 function App() {
-    const [resultText, setResultText] = useState("Please enter your name below 👇");
-    const [name, setName] = useState('');
-    const updateName = (e: any) => setName(e.target.value);
-    const updateResultText = (result: string) => setResultText(result);
-
-    function greet() {
-        Greet(name).then(updateResultText);
-    }
-
-    return (
-        <div id="App">
-            <img src={logo} id="logo" alt="logo"/>
-            <div id="result" className="result">{resultText}</div>
-            <div id="input" className="input-box">
-                <input id="name" className="input" onChange={updateName} autoComplete="off" name="input" type="text"/>
-                <button className="btn" onClick={greet}>Greet</button>
-            </div>
-        </div>
-    )
+  const {
+    isLoading,
+    data: breeds = [],
+    error,
+  } = useSWR("getBreedList", GetBreedList);
+  const [selectedBreed, setSelectedBreed] = useState<{
+    type: "random" | "list";
+    value?: string;
+  }>();
+
+  if (isLoading) return <p>Loading</p>;
+
+  if (error) return <p>Failed to fetch</p>;
+
+  return (
+    <div id="App">
+      <h3>Dog API</h3>
+
+      <button
+        type="button"
+        onClick={() => setSelectedBreed({ type: "random" })}
+      >
+        Fetch random dog
+      </button>
+      <p>
+        Click on down arrow to select a breed
+        <select
+          onChange={(evt) =>
+            setSelectedBreed({ type: "list", value: evt.target.value })
+          }
+        >
+          <option value=""></option>
+          {breeds.map((breed) => (
+            <option key={breed} value={breed}>
+              {breed}
+            </option>
+          ))}
+        </select>
+      </p>
+
+      {selectedBreed?.value && <BreedList name={selectedBreed.value} />}
+
+      {selectedBreed?.type === "random" && <RandomDog showedAt={Date.now()} />}
+    </div>
+  );
 }
 
-export default App
+export default App;
diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -1,26 +1,19 @@
 html {
-    background-color: rgba(27, 38, 54, 1);
-    text-align: center;
-    color: white;
+  text-align: center;
 }
 
 body {
-    margin: 0;
-    color: white;
-    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+  margin: 0;
+  color: white;
+  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
     "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
 }
 
 @font-face {
-    font-family: "Nunito";
-    font-style: normal;
-    font-weight: 400;
-    src: local(""),
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
     url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
 }
-
-#app {
-    height: 100vh;
-    text-align: center;
-}
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
@@ -1,4 +1,8 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function Greet(arg1:string):Promise<string>;
+export function GetBreedList():Promise<Array<string>>;
+
+export function GetImageUrlsByBreed(arg1:string):Promise<Array<string>>;
+
+export function GetRandomImageUrl():Promise<string>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
@@ -2,6 +2,14 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function Greet(arg1) {
-  return window['go']['main']['App']['Greet'](arg1);
+export function GetBreedList() {
+  return window['go']['main']['App']['GetBreedList']();
+}
+
+export function GetImageUrlsByBreed(arg1) {
+  return window['go']['main']['App']['GetImageUrlsByBreed'](arg1);
+}
+
+export function GetRandomImageUrl() {
+  return window['go']['main']['App']['GetRandomImageUrl']();
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		e8868246d0965fec42f8916e85224d6b
		3ea1113871f7d8ed6506615c919ed32f