From 59fe3d32ffbdc84956e1ecc9be2b11b787999bee Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Wed, 24 Jul 2024 09:17:39 -0400
Subject: [PATCH] added tailwind and cleaned up page

Cleaned up page to allow Tailwind to start handling the look and feel of
everything
---
 frontend/package.json       |   8 +-
 frontend/postcss.config.js  |   6 +
 frontend/src/App.svelte     | 213 +++++++++++++++++++-----------------
 frontend/src/style.css      |   4 +
 frontend/tailwind.config.js |  14 +++
 5 files changed, 142 insertions(+), 103 deletions(-)
 create mode 100644 frontend/postcss.config.js
 create mode 100644 frontend/tailwind.config.js

diff --git a/frontend/package.json b/frontend/package.json
index 2ee69ea..1c15fe4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,11 +12,17 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.4.6",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
+  },
+  "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index d688775..e11308f 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,125 +1,134 @@
 <script lang="ts">
-  import logo from './assets/images/logo-universal.png'
-  import {Greet} from '../wailsjs/go/main/App.js'
-  import {AniListLogin, AniListSearch, GetAniListItem} from "../wailsjs/go/main/App";
-  import type {AniListItem, AniSearchList} from "./AniListTypes";
+    import {
+        AniListSearch,
+        GetAniListItem,
+        GetAniListLoggedInUserId,
+        GetAniListUserWatchingList
+    } from "../wailsjs/go/main/App";
+    import {type AniListItem, type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
+    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
 
-  let resultText: string = "Please enter your name below 👇"
-  let name: string
-  let aniId = "157371"
-  let aniSearch = ""
-  let aniListItem: AniListItem
-  let aniListSearch: AniSearchList
-  let aniListLoggedIn = false
+    let aniId = "157371"
+    let aniSearch = ""
+    let aniListItem: AniListItem
+    let aniListSearch: AniSearchList
+    let aniListLoggedIn = false
+    let aniListWatchlist: AniListCurrentUserWatchList
+    let page = 1
+    let perPage = 20
 
-  function greet(): void {
-    Greet(name).then(result => resultText = result)
-  }
+    function getAniListitem(): void {
+        GetAniListItem(Number(aniId)).then(result => aniListItem = result)
+    }
 
-  function getAniListitem(): void {
-    GetAniListItem(Number(aniId)).then(result => aniListItem = result)
-  }
+    function runAniListSearch(): void {
+        AniListSearch(aniSearch).then(result => aniListSearch = result)
+    }
 
-  function runAniListSearch(): void {
-    AniListSearch(aniSearch).then(result => aniListSearch = result)
-  }
-
-  function loginToAniList(): void {
-    AniListLogin().then(() => aniListLoggedIn = true)
-  }
+    function anilistGetUserWatchlist(): void {
+        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+            aniListWatchlist = result
+            aniListLoggedIn = true
+        })
+    }
 </script>
 
 <main>
-  <img alt="Wails logo" id="logo" src="{aniListItem === undefined ? logo : aniListItem.data.Media.coverImage.extraLarge}">
-<!--  <div class="result" id="result">{resultText}</div>-->
-<!--  <div class="input-box" id="input">-->
-<!--    <input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>-->
-<!--    <button class="btn" on:click={greet}>Greet</button>-->
-<!--  </div>-->
+    <div class="input-box" id="aniSearch">
+        <input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/>
+        <button class="btn" on:click={runAniListSearch}>Search AniList</button>
+    </div>
 
-  <div class="result" id="AniTest">{aniListItem !== undefined ? aniListItem.data.Media.title.english : ""}</div>
-  <div class="input-box" id="aniButton">
-    <input autocomplete="off" bind:value={aniId} class="input" id="aniId" type="text"/>
-    <button class="btn" on:click={getAniListitem}>Get AniList Item</button>
-  </div>
+    <button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
+    {#if aniListLoggedIn}
+        <div>You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
+    {/if}
 
-  <button class="btn" on:click={loginToAniList}>Login to AniList</button>
-  {#if aniListLoggedIn}
-    <div>You are logged in!</div>
-  {/if}
+    {#if aniListLoggedIn}
+        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+            <h1>Your Watching List</h1>
 
-  <div class="input-box" id="aniSearch">
-    <input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/>
-    <button class="btn" on:click={runAniListSearch}>Search AniList</button>
-  </div>
-  {#if aniListSearch !== undefined}
-    <ul>
-        {#each aniListSearch.data.Page.media as media, index (media.id)}
-          <li>
-            <div>{media.title.english !== null ? media.title.english : media.title.romaji}</div>
-          </li>
-        {:else}
-          <div>No Results Yet...</div>
-        {/each}
-    </ul>
-  {/if}
+            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+                {#each aniListWatchlist.data.Page.mediaList as media}
+                    <a href="#" class="group">
+                        <!--                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
+                        <div class="justify-center rounded-lg bg-gray-200">
+                            <img src={media.media.coverImage.large} alt="anime cover"/>
+                        </div>
+                        <h3 class="mt-4 text-sm text-white-700">{
+                            media.media.title.english === "" ?
+                                media.media.title.romaji :
+                                media.media.title.english
+                        }</h3>
+                        <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
+                            / {media.media.nextAiringEpisode.episode !== 0 ?
+                                media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
+                        {#if media.media.episodes > 0}
+                            <p class="mt-1 text-lg font-medium text-white-900">Total
+                                Episodes: {media.media.episodes}</p>
+                        {/if}
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
 </main>
 
 <style>
 
-  #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;
-  }
+    #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;
+    }
 
-  .result {
-    height: 20px;
-    line-height: 20px;
-    margin: 1.5rem auto;
-  }
+    .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 {
+        /*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 .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 {
+        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:hover {
+        border: none;
+        background-color: rgba(255, 255, 255, 1);
+    }
 
-  .input-box .input:focus {
-    border: none;
-    background-color: rgba(255, 255, 255, 1);
-  }
+    .input-box .input:focus {
+        border: none;
+        background-color: rgba(255, 255, 255, 1);
+    }
 
 </style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 3940d6c..1fc5c86 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
     background-color: rgba(27, 38, 54, 1);
     text-align: center;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..6791225
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
+}
+