Merge pull request #11 from eriandev/main

refactor: separates auths call in services
Atticus64 · Oct 11, 2023 · 1fdce26 · 1fdce26 · vercel · Oct 11, 2023
2 parents 0b40444 + ea979cb
commit 1fdce26
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 242 deletions.
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -5,7 +5,7 @@
   /** @type {'button'|'submit'|'reset'}*/
   export let type = 'button'
 
-	export let disabled = false
+  export let disabled = false
   /** @type {'blue'|'teal'|'green'} */
   export let color = 'teal'
 
@@ -24,7 +24,7 @@
   this={href ? 'a' : 'button'}
   class="flex h-12 w-fit items-center justify-center rounded-lg p-3 {COLOR[color]} {className}"
   type={href ? undefined : type}
-	disabled={disabled}
+  {disabled}
   {href}
   on:click
   on:change
@@ -38,15 +38,15 @@
 </svelte:element>
 
 <style>
-	:disabled {
-		border: 1px solid #cccccc;
-		color: white;
-	  background-color: #02678c;
-	}
-	
-	:disabled:hover {
-		color: white;
-		border: 1px solid #cccccc;
-		background-color: #02678c;
-	}
-</style>
+  :disabled {
+    border: 1px solid #cccccc;
+    color: white;
+    background-color: #02678c;
+  }
+
+  :disabled:hover {
+    color: white;
+    border: 1px solid #cccccc;
+    background-color: #02678c;
+  }
+</style>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -1,4 +1,14 @@
 <script>
+  import { onMount } from 'svelte'
+  import { goto } from '$app/navigation'
+
+  import { user } from '@/state/user'
+  import { goToChapter } from '@/utils/chapter'
+  import { signOut, updateUserInfo } from '@/services/api/auth'
+
+  import Link from './Link.svelte'
+  import Logo from './Logo.svelte'
+  import Switch from './Switch.svelte'
   import {
     MenuIcon,
     LoginIcon,
@@ -7,64 +17,18 @@
     NoteIcon,
     QuestionMarkIcon
   } from './icons'
-  import Link from './Link.svelte'
-  import Logo from './Logo.svelte'
-  import { onMount } from 'svelte'
-  import { goto } from '$app/navigation'
-  import { user } from '@/state/user'
-  import Switch from './Switch.svelte'
-  import { goToChapter } from '@/utils/chapter'
 
-  let mobileMenu = false
   let showMenu = false
+  let mobileMenu = false
 
-  onMount(async () => {
-    checkUser()
-  })
-
-  async function Logout() {
-    await fetch('https://bible-api.deno.dev/auth/logout', {
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      credentials: 'include'
-    })
-
-    user.set({
-      email: '',
-      tag: '',
-      loggedIn: false
-    })
+  onMount(async () => updateUserInfo())
 
+  async function logOut() {
+    await signOut()
     showMenu = false
-
     goto('/login')
   }
 
-  async function checkUser() {
-    await fetch('https://bible-api.deno.dev/user', {
-      method: 'GET',
-      credentials: 'include'
-    })
-      .then(async (res) => {
-        if (res.ok) {
-          const info = await res.json()
-          user.set({
-            email: info.email,
-            tag: info.tag,
-            loggedIn: true
-          })
-        }
-      })
-      .catch((err) => {
-        return null
-      })
-
-    return {
-      user
-    }
-  }
-
   /**
    * @param {string} path
    */
@@ -77,7 +41,6 @@
 <header class="sticky top-0 z-30 h-20 bg-white dark:bg-[#293548] sm:h-28 xl:h-24">
   <div class="mx-auto flex h-full max-w-screen-xl items-center justify-between px-3">
     <ul class="flex items-center gap-4 sm:hidden">
-
       <button
         on:click={() => {
           mobileMenu = !mobileMenu
@@ -102,9 +65,9 @@
           </button>
           <button
             on:click={() => {
-							mobileMenu = false
-							goToChapter()
-						}}
+              mobileMenu = false
+              goToChapter()
+            }}
             class="block h-1/4 w-full px-4 py-1 text-xl hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
           >
             <span class="flex flex-row items-center gap-2 align-middle">
@@ -160,7 +123,7 @@
 
             <div class="">
               <button
-                on:click={Logout}
+                on:click={logOut}
                 class="block w-full px-4 py-2 text-start text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
                 >Cerrar Sesión</button
               >
@@ -173,22 +136,19 @@
         </Link>
       {/if}
     </ul>
-
-
-
-    <div class="flex justify-center align-middle gap-0">
-			<Switch className="xl:relative xl:left-10 lg:left-20 md:left-16 sm:left-14 max-sm:right-14" />
-			<Logo />
+
+    <div class="flex justify-center gap-0 align-middle">
+      <Switch className="xl:relative xl:left-10 lg:left-20 md:left-16 sm:left-14 max-sm:right-14" />
+      <Logo />
     </div>
     <nav class="hidden sm:flex sm:items-center">
-
       <ul class="flex items-center gap-4">
         <Link href="/search" text="Buscar">
           <SearchIcon />
         </Link>
         <button
           on:click={() => goToChapter()}
-          class="block h-1/4 w-full px-4 py-1 text-xlhover:text-[#175d93] text-lg font-semibold tracking-widest transition-colors hover:text-[#2b8ad3]"
+          class="text-xlhover:text-[#175d93] block h-1/4 w-full px-4 py-1 text-lg font-semibold tracking-widest transition-colors hover:text-[#2b8ad3]"
         >
           <span class="flex flex-row items-center gap-2 align-middle">
             Leer <BookOpenIcon />
@@ -229,7 +189,7 @@
 
               <div class="">
                 <button
-                  on:click={Logout}
+                  on:click={logOut}
                   class="block w-full px-4 py-2 text-start text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
                   >Cerrar Sesión</button
                 >

diff --git a/src/components/Passage.svelte b/src/components/Passage.svelte
@@ -17,9 +17,9 @@
 </script>
 
 <script>
-  import { formatName } from "@/utils/chapter"
+  import { formatName } from '@/utils/chapter'
 
-  import { scale } from "svelte/transition"
+  import { scale } from 'svelte/transition'
 
   /** @type {boolean} */
   export let studyMode = false
@@ -40,32 +40,32 @@
   }
 </script>
 
-<section transition:scale={{ duration: 300 }}
+<section
+  transition:scale={{ duration: 300 }}
   class={studyMode
     ? 'm-4 h-[40rem] lg:overflow-auto xl:overflow-auto 2xl:overflow-auto'
     : 'm-4 w-full max-w-full'}
 >
-<h3 class="mt-4 text-3xl">{formatName(info.name)}: {info.chapter}</h3>
-<ul class="flex gap-2 flex-col">
-  {#each info.vers as v}
-
-			{#if v.study}
-      <h3 class="p-2 text-3xl">{v.study}</h3>
-			{/if}
-			<p class="verse text-2xl">
-				<b>
-					{v.number}
-				</b>
-				{v.verse}
-			</p>
-			{/each}
-		</ul>
+  <h3 class="mt-4 text-3xl">{formatName(info.name)}: {info.chapter}</h3>
+  <ul class="flex flex-col gap-2">
+    {#each info.vers as v}
+      {#if v.study}
+        <h3 class="p-2 text-3xl">{v.study}</h3>
+      {/if}
+      <p class="verse text-2xl">
+        <b>
+          {v.number}
+        </b>
+        {v.verse}
+      </p>
+    {/each}
+  </ul>
 </section>
 
 <style>
   .verse {
     max-width: 75ch;
-		text-wrap: balance;
+    text-wrap: balance;
   }
 
   .verse {