Merge pull request #10 from dodiameer/dev

dodiameer · Feb 6, 2021 · 769286d · 769286d
2 parents 69737bc + a2d0405
commit 769286d
Show file tree

Hide file tree

Showing 14 changed files with 627 additions and 132 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,35 @@
     <title>Mikro GraphQL Client</title>
   </head>
   <body>
+    <script>
+      /**
+       * Safari 10.1 / IOS Safari 10.3 ESM support
+       */
+      (function () {
+        var d = document;
+        var c = d.createElement("script");
+        if (!("noModule" in c) && "onbeforeload" in c) {
+          var s = false;
+          d.addEventListener(
+            "beforeload",
+            function (e) {
+              if (e.target === c) {
+                s = true;
+              } else if (!e.target.hasAttribute("nomodule") || !s) {
+                return;
+              }
+              e.preventDefault();
+            },
+            true
+          );
+
+          c.type = "module";
+          c.src = ".";
+          d.head.appendChild(c);
+          c.remove();
+        }
+      })();
+    </script>
     <script type="module" src="/src/index.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mikro-graphql-client",
-  "version": "0.1.4",
+  "version": "1.0.0",
   "scripts": {
     "validate": "svelte-check && tsc --noEmit",
     "dev": "svite -ts",

diff --git a/src/components/AuthorDetails/AuthorAge.svelte b/src/components/AuthorDetails/AuthorAge.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { cubicOut } from "svelte/easing";
+
+  import { fly } from "svelte/transition";
+
+  import type { AuthorDetailsQuery } from "../../generated/graphql";
+
+  export let data: AuthorDetailsQuery["author"];
+  export let animationDuration: number;
+</script>
+
+<h2
+  in:fly="{{
+    delay: 2 * 100,
+    duration: animationDuration,
+    y: 100,
+    easing: cubicOut,
+  }}">
+  Age: {data.age ?? "unknown"}
+</h2>
+
+<style>
+  h2 {
+    font-size: 1.2rem;
+    color: #5c5c5c;
+  }
+</style>
diff --git a/...nents/BookDetails/AuthorOtherBooks.svelte → ...mponents/AuthorDetails/AuthorBooks.svelte b/...nents/BookDetails/AuthorOtherBooks.svelte → ...mponents/AuthorDetails/AuthorBooks.svelte
@@ -4,35 +4,32 @@
   import { fly } from "svelte/transition";
   import { link } from "svelte-spa-router";
 
-  import type { BookDetailsQuery } from "../../generated/graphql";
+  import type { AuthorDetailsQuery } from "../../generated/graphql";
 
-  export let data: BookDetailsQuery["book"];
+  export let data: AuthorDetailsQuery["author"];
   export let animationDuration: number;
-  export let params: any;
 </script>
 
-<li>Other books:</li>
+<li>Books:</li>
 <ul
   in:fly="{{
-    delay: 5 * 100,
+    delay: 4 * 100,
     duration: animationDuration,
     y: 100,
     easing: cubicOut,
   }}">
-  {#each data.author.books.filter((b) => b.id !== params.id) as otherBook}
+  {#each data.books as book}
     <li>
-      <a href="/book/{otherBook.id}" use:link>
-        {otherBook.title}
+      <a href="/book/{book.id}" use:link>
+        {book.title}
       </a>
     </li>
-  {:else}
-    No other books
   {/each}
 </ul>
 
 <style>
   ul {
-    padding-left: 1rem;
+    padding-left: var(--padding);
   }
   a {
     color: inherit;

diff --git a/src/components/AuthorDetails/AuthorDetailsList.svelte b/src/components/AuthorDetails/AuthorDetailsList.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { cubicOut } from "svelte/easing";
+
+  import { fly } from "svelte/transition";
+
+  import type { AuthorDetailsQuery } from "../../generated/graphql";
+  import AuthorBooks from "./AuthorBooks.svelte";
+
+  export let data: AuthorDetailsQuery["author"];
+  export let animationDuration: number;
+</script>
+
+<ul
+  in:fly="{{
+    delay: 3 * 100,
+    duration: animationDuration,
+    y: 100,
+    easing: cubicOut,
+  }}">
+  <li>
+    Added to library: {new Date(data.createdAt).toLocaleString()}
+  </li>
+  <li>
+    Last update: {new Date(data.updatedAt).toLocaleString()}
+  </li>
+  <AuthorBooks data="{data}" animationDuration="{animationDuration}" />
+</ul>
+
+<style>
+  ul {
+    --padding: 1rem;
+    padding-left: var(--padding);
+    margin-top: 1.25rem;
+  }
+</style>
diff --git a/src/components/AuthorDetails/AuthorName.svelte b/src/components/AuthorDetails/AuthorName.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { cubicOut } from "svelte/easing";
+
+  import { fly } from "svelte/transition";
+
+  import type { AuthorDetailsQuery } from "../../generated/graphql";
+
+  export let data: AuthorDetailsQuery["author"];
+  export let animationDuration: number;
+</script>
+
+<h1
+  in:fly="{{
+    delay: 1 * 100,
+    duration: animationDuration,
+    y: 100,
+    easing: cubicOut,
+  }}">
+  {data.name}
+</h1>
+
+<style>
+  h1 {
+    font-size: 2rem;
+  }
+</style>
diff --git a/src/components/BookDetails/AuthorDetails.svelte b/src/components/BookDetails/AuthorDetails.svelte
@@ -1,13 +1,13 @@
 <script>
+  import { link } from "svelte-spa-router";
+
   import { cubicOut } from "svelte/easing";
   import { fly } from "svelte/transition";
 
   import type { BookDetailsQuery } from "../../generated/graphql";
-  import AuthorOtherBooks from "./AuthorOtherBooks.svelte";
 
   export let data: BookDetailsQuery["book"];
   export let animationDuration: number;
-  export let params: any;
 </script>
 
 <li>Author details:</li>
@@ -22,14 +22,28 @@
     Added to library: {new Date(data.author.createdAt).toLocaleString()}
   </li>
   <li>Last update: {new Date(data.author.updatedAt).toLocaleString()}</li>
-  <AuthorOtherBooks
-    data="{data}"
-    params="{params}"
-    animationDuration="{animationDuration}" />
+  <li>
+    <a href="/author/{data.author.id}" use:link> More details </a>
+  </li>
 </ul>
 
 <style>
   ul {
     padding-left: 1rem;
   }
+  a {
+    color: inherit;
+
+    &::after {
+      content: url("/icons/external-link.svg");
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      margin-left: 0.25rem;
+      fill: orangered;
+      color: orangered;
+      width: 20px;
+      height: 20px;
+    }
+  }
 </style>
diff --git a/src/components/BookDetails/BookAuthor.svelte b/src/components/BookDetails/BookAuthor.svelte
@@ -2,6 +2,7 @@
   import { cubicOut } from "svelte/easing";
 
   import { fly } from "svelte/transition";
+  import { link } from "svelte-spa-router";
 
   import type { BookDetailsQuery } from "../../generated/graphql";
 
@@ -16,12 +17,28 @@
     y: 100,
     easing: cubicOut,
   }}">
-  By {data.author.name}, {data.author.age ?? "unknown age"}
+  <a href="/author/{data.author.id}" use:link>
+    By {data.author.name}, {data.author.age ?? "unknown age"}
+  </a>
 </h2>
 
 <style>
   h2 {
     font-size: 1.2rem;
     color: #5c5c5c;
+    & a {
+      color: inherit;
+      &::after {
+        content: url("/icons/external-link.svg");
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-left: 0.25rem;
+        fill: orangered;
+        color: orangered;
+        width: 20px;
+        height: 20px;
+      }
+    }
   }
 </style>
diff --git a/src/components/BookDetails/BookDetailsList.svelte b/src/components/BookDetails/BookDetailsList.svelte
@@ -20,10 +20,7 @@
   }}">
   <li>Added to library: {new Date(data.createdAt).toLocaleString()}</li>
   <li>Last update: {new Date(data.updatedAt).toLocaleString()}</li>
-  <AuthorDetails
-    data="{data}"
-    params="{params}"
-    animationDuration="{animationDuration}" />
+  <AuthorDetails data="{data}" animationDuration="{animationDuration}" />
 </ul>
 
 <style>

diff --git a/src/constants.ts b/src/constants.ts
@@ -8,4 +8,7 @@ export const routes = {
   "/authors": wrap({
     asyncComponent: () => import("./pages/AllAuthors.svelte"),
   }),
+  "/author/:id": wrap({
+    asyncComponent: () => import("./pages/AuthorDetails.svelte"),
+  }),
 };
diff --git a/src/documents/authorDetails.graphql b/src/documents/authorDetails.graphql
@@ -0,0 +1,13 @@
+query authorDetails($id: ID!) {
+  author(id: $id) {
+    id
+    name
+    age
+    createdAt
+    updatedAt
+    books {
+      id
+      title
+    }
+  }
+}