From d22bb7d0e3db2a0153ade54910925aa426bb6a36 Mon Sep 17 00:00:00 2001
From: Ibitoye Rotimi Best <best.rotimi@ikizmet.com>
Date: Sun, 30 May 2021 14:17:08 +0300
Subject: [PATCH] Improve style of QandA

---
 package-lock.json                             |  15 +-
 package.json                                  |   2 +-
 .../Apps/components/LiveChat/index.svelte     |  49 +++----
 .../Apps/components/QandA/index.svelte        | 132 ++++++++++++++++++
 src/components/Apps/index.svelte              | 104 +++++++-------
 .../Course/components/CourseNav.svelte        |   2 +-
 src/components/Form/TextField.svelte          |   5 +-
 7 files changed, 227 insertions(+), 82 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c8ec8e1e..61f27986 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3283,12 +3283,19 @@
       }
     },
     "polka": {
-      "version": "1.0.0-next.14",
-      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.14.tgz",
-      "integrity": "sha512-nRxh6lifEred8F973wMJ3YA7z8EBAf+lWFLbhIh4MnYJXmZododD8FDGj+R81xnuNNG8b4PDqNXvrB5ShKcStA==",
+      "version": "1.0.0-next.15",
+      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.15.tgz",
+      "integrity": "sha512-zBCZO40+USkSj0GDHMqufthqk4TIRc9xVGd50LbMvYNEwGHK8dZczLBQtw9pPHBM+i/Xg7ed7+c+r6J68XkWLg==",
       "requires": {
-        "@polka/url": "^1.0.0-next.12",
+        "@polka/url": "^1.0.0-next.15",
         "trouter": "^3.1.0"
+      },
+      "dependencies": {
+        "@polka/url": {
+          "version": "1.0.0-next.15",
+          "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
+          "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
+        }
       }
     },
     "postcss": {
diff --git a/package.json b/package.json
index d48fd6ca..b1b67a5e 100644
--- a/package.json
+++ b/package.json
@@ -44,4 +44,4 @@
     "tailwindcss": "^2.1.2",
     "typescript": "^4.1.3"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Apps/components/LiveChat/index.svelte b/src/components/Apps/components/LiveChat/index.svelte
index b5f7a81e..624b34bf 100644
--- a/src/components/Apps/components/LiveChat/index.svelte
+++ b/src/components/Apps/components/LiveChat/index.svelte
@@ -3,7 +3,7 @@
   import PageNav from "../../../PageNav/index.svelte";
   import CloseButton from "../../../Buttons/Close/index.svelte";
   import TextField from "../../../Form/TextField.svelte";
-  import SendButton from "../../../Buttons/Send/index.svelte";
+  // import SendButton from "../../../Buttons/Send/index.svelte";
 
   export let handleClose;
 
@@ -63,17 +63,6 @@
   }
 </script>
 
-<style>
-  .body {
-    overflow: auto;
-    height: 88%;
-  }
-  .footer {
-    position: absolute;
-    bottom: 0px;
-  }
-</style>
-
 <PageNav title="LiveChat" overidableStyle="padding: 0 10px">
   <div slot="widget">
     <CloseButton onClick={handleClose} />
@@ -83,17 +72,16 @@
 <div bind:this={bodyRef} class="body">
   {#each chats as chat}
     <div class="pl-2 pb-4">
-      <a
-        class="flex items-center no-underline hover:underline text-black"
-        href="#">
+      <div class="flex items-center no-underline hover:underline text-black">
         <img
           alt="Placeholder"
           class="block rounded-full"
           width="24"
           height="20"
-          src={chat.avatar} />
+          src={chat.avatar}
+        />
         <p class="ml-2 text-sm font-bold">{chat.name}</p>
-      </a>
+      </div>
       <article class="prose prose-sm sm:prose pt-2 pl-8">
         {@html marked(chat.message)}
       </article>
@@ -102,11 +90,24 @@
 </div>
 
 <div class="footer">
-  <div class="flex items-center justify-between leading-none pl-2">
-    <TextField
-      placeholder="Say something"
-      bind:value={message}
-      onKeyDown={handleKeyDown} />
-    <SendButton onClick={handleSend} />
-  </div>
+  <!-- <div class="flex items-center justify-between leading-none pl-2"> -->
+  <TextField
+    placeholder="Say something"
+    bind:value={message}
+    onKeyDown={handleKeyDown}
+  />
+  <!-- <SendButton onClick={handleSend} /> -->
+  <!-- </div> -->
 </div>
+
+<style>
+  .body {
+    overflow: auto;
+    height: 80%;
+  }
+  .footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Apps/components/QandA/index.svelte b/src/components/Apps/components/QandA/index.svelte
index ffb00271..7d617ec6 100644
--- a/src/components/Apps/components/QandA/index.svelte
+++ b/src/components/Apps/components/QandA/index.svelte
@@ -1,8 +1,92 @@
 <script>
+  import marked from "marked";
+  import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
   import PageNav from "../../../PageNav/index.svelte";
   import CloseButton from "../../../Buttons/Close/index.svelte";
+  import Vote from "../../../Vote/index.svelte";
+  import TextField from "../../../Form/TextField.svelte";
 
   export let handleClose;
+  let bodyRef;
+  let question;
+
+  let questions = [
+    {
+      id: 1,
+      name: "Evgeniy",
+      question: "I'am looking at this and it looks great",
+      vote: 1,
+      answered: false,
+    },
+    {
+      id: 2,
+      name: "Sergey Semko",
+      question:
+        "Thanks for the feedback, what do you think about my website. https://rotimibest.com",
+      vote: 4,
+      answered: false,
+    },
+    {
+      id: 3,
+      name: "Vitalii Marushko",
+      question: "Всем привет",
+      vote: 20,
+      answered: false,
+    },
+    {
+      id: 4,
+      name: "Natasha",
+      question: "Привет Виталий",
+      vote: 0,
+      answered: false,
+    },
+  ];
+
+  function handleSend() {
+    if (!question) {
+      return;
+    }
+
+    questions = [
+      ...questions,
+      {
+        id: questions.length,
+        name: "You",
+        question,
+        vote: 0,
+        answered: false,
+      },
+    ];
+
+    question = null;
+
+    setTimeout(() => {
+      bodyRef.scrollTo({
+        top: bodyRef.scrollHeight,
+      });
+    }, 100);
+  }
+
+  function handleMarkAnswered(id) {
+    return () => {
+      console.log(`id`, id);
+      questions = questions
+        .map((question) => {
+          if (question.id === id) {
+            question.answered = !question.answered;
+          }
+
+          return question;
+        })
+        .sort((a, b) => Number(a.answered) - Number(b.answered));
+    };
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      handleSend();
+    }
+  }
 </script>
 
 <PageNav title="Q/A" overidableStyle="padding: 0 10px">
@@ -10,3 +94,51 @@
     <CloseButton onClick={handleClose} />
   </div>
 </PageNav>
+
+<div bind:this={bodyRef} class="body">
+  {#each questions as question}
+    <div class="flex items-start ml-2 mb-2 mt-2">
+      <Vote bind:value={question.vote} />
+      <div class="ml-2 flex-grow">
+        <p class="text-sm font-bold">{question.name}</p>
+        <article class="prose prose-sm sm:prose">
+          {@html marked(question.question)}
+        </article>
+      </div>
+      <button
+        class={`${question.answered && "active"}`}
+        on:click={handleMarkAnswered(question.id)}
+      >
+        <CheckmarkOutline20 class="carbon-icon" />
+      </button>
+    </div>
+  {/each}
+</div>
+
+<div class="footer">
+  <TextField
+    placeholder="Say something"
+    bind:value={question}
+    onKeyDown={handleKeyDown}
+  />
+</div>
+
+<style lang="scss">
+  .body {
+    overflow: auto;
+    height: 80%;
+
+    & button {
+      display: none;
+    }
+    & div:hover button,
+    & button.active {
+      display: block;
+    }
+  }
+  .footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+  }
+</style>
diff --git a/src/components/Apps/index.svelte b/src/components/Apps/index.svelte
index 63ac32c7..b500b8f9 100644
--- a/src/components/Apps/index.svelte
+++ b/src/components/Apps/index.svelte
@@ -26,6 +26,60 @@
   }
 </script>
 
+<div class="root">
+  <div class="apps">
+    <IconButton
+      title="Live Chat"
+      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
+    >
+      <SendAlt24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      title="QandA"
+      value={APPS_CONSTANTS.APPS.QANDA}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
+    >
+      <Forum24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      title="Notes"
+      value={APPS_CONSTANTS.APPS.NOTES}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
+    >
+      <AlignBoxTopLeft24 class="carbon-icon" />
+    </IconButton>
+
+    <IconButton
+      title="Poll"
+      value={APPS_CONSTANTS.APPS.POLL}
+      onClick={handleAppClick}
+      selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
+    >
+      <ChartPie24 class="carbon-icon" />
+    </IconButton>
+  </div>
+
+  {#if !!selectedApp}
+    <div class="app">
+      {#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
+        <QandA {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
+        <LiveChat {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
+        <Poll {handleClose} />
+      {:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
+        <Notes {handleClose} />
+      {/if}
+    </div>
+  {/if}
+</div>
+
 <style lang="scss">
   .root {
     height: 95vh;
@@ -52,53 +106,3 @@
     }
   }
 </style>
-
-<div class="root">
-  <div class="apps">
-    <IconButton
-      title="Live Chat"
-      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}>
-      <SendAlt24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="QandA"
-      value={APPS_CONSTANTS.APPS.QANDA}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}>
-      <Forum24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="Notes"
-      value={APPS_CONSTANTS.APPS.NOTES}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}>
-      <AlignBoxTopLeft24 class="carbon-icon" />
-    </IconButton>
-
-    <IconButton
-      title="Poll"
-      value={APPS_CONSTANTS.APPS.POLL}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.POLL === selectedApp}>
-      <ChartPie24 class="carbon-icon" />
-    </IconButton>
-  </div>
-
-  {#if !!selectedApp}
-    <div class="app">
-      {#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
-        <QandA {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
-        <LiveChat {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
-        <Poll {handleClose} />
-      {:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
-        <Notes {handleClose} />
-      {/if}
-    </div>
-  {/if}
-</div>
diff --git a/src/components/Course/components/CourseNav.svelte b/src/components/Course/components/CourseNav.svelte
index f25ac452..01eed497 100644
--- a/src/components/Course/components/CourseNav.svelte
+++ b/src/components/Course/components/CourseNav.svelte
@@ -60,7 +60,7 @@
             'active'} pl-7 py-2"
           href={lecture.link}
         >
-          <span class="course-counter"> {getLectureNo(index)} </span>
+          <span class="course-counter"> {getLectureNo(index + 1)} </span>
           <span>{lecture.title}</span>
         </a>
       {/each}
diff --git a/src/components/Form/TextField.svelte b/src/components/Form/TextField.svelte
index 32a901c2..ea63d01d 100644
--- a/src/components/Form/TextField.svelte
+++ b/src/components/Form/TextField.svelte
@@ -8,9 +8,10 @@
 <label class="block">
   {#if label}<span class="text-gray-700">{label}</span>{/if}
   <input
-    class="form-input mt-1 block w-full rounded-lg"
+    class="form-input p-4 mt-1 block w-full rounded-t-lg bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
     type="text"
     on:keydown={onKeyDown}
     {placeholder}
-    bind:value />
+    bind:value
+  />
 </label>