chat.svelte

<script>
  import { fade, fly } from 'svelte/transition'
  import { onMount } from 'svelte'
  import { writable } from 'svelte/store'
  import * as animateScroll from 'svelte-scrollto'
  import PageTransition from '../components/ui/PageTransition.svelte'
  import Spinner from '../components/ui/Spinner.svelte'
  import Profile from '../components/communication_channels/todos/Profile.svelte'
  import getTime from 'date-fns/getTime'
  import formatDistanceToNow from 'date-fns/formatDistanceToNow'



  let mountedToDom = false
  let chatName = 'add a chat message...'
  let chat
  let chatRef





  const addNewChat = () => {
    const timestampChatMessage = new Date().getTime()
    chatRef.get(chatName).put(false)
  }

  const handleKeyPress = event => {
    if (event.key === 'Enter' && !event.shiftKey) {
      // simulate actual submit event when user pressed Enter but not on 'soft return'
      event.target.form.dispatchEvent( new Event("submit", { cancelable: true }))
      event.preventDefault()
      event.target.value = ''
    }
  }

  onMount( () => {
    mountedToDom = true
    animateScroll.scrollToBottom({ element: "#chat-textarea", delay: 1000, duration: 3000 })
    // chatRef = gun.get('chat')
    chatRef = gun.get('edm').get('chat')
    chat = chatRef.map()
  })
</script>


<svelte:head>
  <title>Chats</title>
  <meta name="description" content="PoC for chat on EDM..."/>
</svelte:head>


<PageTransition>
  <div class="m-8 md:m-12 lg:m-20">
    {#if !mountedToDom }
      <Spinner></Spinner>
    {:else}

      <div class="mx-3 my-6">
          {#each $chat as [message, done] (message)}
            <div in:fly="{{ x: 900, duration: 500 }}" out:fade class='py-1 pl-4 pr-2 my-2 text-sm leading-tight transform rounded md:my-4 hover:scale-grow even:text-five odd:text-three even:bg-three odd:bg-two focus:outline-none focus:elevation-5 focus:text-two focus:font-bold'>
              <span class="absolute block -top-2 -left-6 md:-left-8 md:-top-4">
                <img class="w-8 h-8 rounded-full md:w-10 md:h-10" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
                <span class="absolute top-0 left-0 block w-2 h-2 text-white bg-green-400 rounded-full shadow-solid"></span>
              </span>


              <div class="break-words">{message}</div>
              <button on:click={() => chatRef.get(message).put(null)} class="absolute z-10 block -bottom-2 -right-2">{"🗑️"}</button>
              <!-- <button on:click={() => chatRef.get(message).put(!done)}>{done ? "👍 ✔️" : "❌"}</button> -->
            </div>
          {/each}
      </div>

      <div id="chat-textarea" class="flex">
        <form on:submit|preventDefault={ addNewChat } class="flex-grow">
          <!-- svelte-ignore a11y-autofocus -->
          <textarea in:fly="{{ x: 900, duration: 1500 }}" on:keypress={ handleKeyPress } bind:value={ chatName } onfocus="this.select()" autofocus rows="2" class="block w-full px-4 py-2 leading-tight rounded form-textarea bg-six text-one placeholder-one focus:outline-none focus:elevation-3 focus:border-four focus:text-two focus:font-bold focus:placeholder-two"></textarea>
        </form>
      </div>

    {/if}
</PageTransition>