Add Poll app

src/components/Apps/components/LiveChat/index.svelte

@@ -69,7 +69,7 @@
   </div>
 </PageNav>
 
-<div bind:this={bodyRef} class="body">
+<div bind:this={bodyRef} class="overflow-auto body">
   {#each chats as chat}
     <div class="pl-2 pb-4">
       <div class="flex items-center no-underline hover:underline text-black">
@@ -102,8 +102,7 @@
 
 <style>
   .body {
-    overflow: auto;
-    height: 80%;
+    height: 90%;
   }
   .footer {
     position: absolute;

src/components/Apps/components/Poll/components/Avatar.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+  export let src;
+  export let className;
+</script>
+
+<img
+  alt={name}
+  {src}
+  class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
+/>

src/components/Apps/components/Poll/components/CreatePollForm.svelte

@@ -0,0 +1,77 @@
+<script>
+  import FormSection from "./FormSection.svelte";
+  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../../../PrimaryButton/constants";
+
+  export let title = "Poll";
+  export let onSubmit;
+  export let onCancel;
+
+  let values = {
+    question: "",
+    author: "",
+    isPublic: false,
+    expiration: "",
+    options: [
+      {
+        label: "",
+        selectedBy: [],
+      },
+    ],
+  };
+
+  function handleAddOptions() {
+    values = {
+      ...values,
+      options: [
+        ...values.options,
+        {
+          label: "",
+          selectedBy: [],
+        },
+      ],
+    };
+  }
+
+  function handleRemoveOptions(index) {
+    return () => {
+      values.options = values.options.filter((o, i) => i !== index);
+    };
+  }
+
+  function finishPoll() {
+    onSubmit(values);
+  }
+</script>
+
+<div class="border rounded-md">
+  <div class="border-b-2 p-4 text-center">
+    {title}
+  </div>
+  <div class="p-3">
+    <FormSection label="Question" bind:value={values.question} />
+    <FormSection
+      label="Expiration"
+      bind:value={values.expiration}
+      type="date"
+    />
+
+    {#each values.options as option, index}
+      <FormSection
+        label={index === 0 && "Options"}
+        bind:value={option.label}
+        handleLabelButton={handleAddOptions}
+        handleInputButton={handleRemoveOptions(index)}
+      />
+    {/each}
+  </div>
+
+  <div class="w-full flex justify-center mb-3">
+    <PrimaryButton label="Create poll" onClick={finishPoll} />
+    <PrimaryButton
+      label="Cancel"
+      variant={VARIANTS.OUTLINED}
+      onClick={onCancel}
+    />
+  </div>
+</div>

src/components/Apps/components/Poll/components/FormSection.svelte

@@ -0,0 +1,38 @@
+<script>
+  export let value;
+  export let label;
+  export let type = "text";
+  export let name = "text";
+  export let handleLabelButton;
+  export let handleInputButton;
+</script>
+
+<div class="mb-3">
+  {#if label}
+    <p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
+      {label}
+
+      {#if typeof handleLabelButton === "function"}
+        <button class="text-xl px-3 ml-5" on:click={handleLabelButton}>
+          +
+        </button>
+      {/if}
+    </p>
+  {/if}
+
+  <div class="w-full">
+    {#if type === "text"}
+      <input type="text" {name} class="p-2 rounded-md w-4/5" bind:value />
+    {/if}
+
+    {#if type === "date"}
+      <input type="date" {name} class="p-2 rounded-md w-4/5" bind:value />
+    {/if}
+
+    {#if typeof handleInputButton === "function"}
+      <button class="text-xl px-3 ml-5" on:click={handleInputButton}>
+        -
+      </button>
+    {/if}
+  </div>
+</div>

src/components/Apps/components/Poll/components/Label.svelte

@@ -0,0 +1,3 @@
+<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
+  <slot />
+</p>

src/components/Apps/components/Poll/components/Poll.svelte

@@ -0,0 +1,210 @@
+<script>
+  import Label from "./Label.svelte";
+  import Avatar from "./Avatar.svelte";
+
+  export let poll = {};
+  export let onSelect = () => {};
+  export let handlePollDelete = () => {};
+  export let currentUserId;
+  let viewResult = false;
+  let selectedOptionToView;
+  let isAuthor = false;
+  let totalVotes = 0;
+  let hasUserVoted = false;
+
+  function handleSelect(optionIndex) {
+    return () => {
+      onSelect(optionIndex);
+    };
+  }
+
+  function getSelectedUsers(users) {
+    return users.map((o) => o.label).join(", ");
+  }
+
+  function getTotalVotes(options) {
+    return options.reduce((acc, cur) => acc + cur.selectedBy.length, 0);
+  }
+
+  function calculatePercent(options, currentOption) {
+    const totalVoteOfAllOptions = getTotalVotes(options);
+    const totalVotesOfCurrentOption = currentOption.selectedBy.length;
+
+    return (
+      Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0
+    );
+  }
+
+  function didUserSelect(option) {
+    return option.selectedBy.find((user) => user.value === currentUserId);
+  }
+
+  $: isAuthor = currentUserId === poll.author.value;
+  $: totalVotes = getTotalVotes(poll.options);
+  $: {
+    hasUserVoted = poll.options.some((option) =>
+      option.selectedBy.find((u) => u.value === currentUserId)
+    );
+    console.log("hasUserVoted", hasUserVoted, currentUserId);
+  }
+</script>
+
+<div class="p-4 bg-white-100 border-2 rounded-md mb-3">
+  {#if selectedOptionToView}
+    <div>
+      <div class="flex items-center mb-5">
+        <button
+          class="text-xl w-10 px-3"
+          on:click={() => (selectedOptionToView = null)}
+        >
+          {`<`}
+        </button>
+        <div class="flex-grow text-center">
+          <h3 class="font-bold">Voted</h3>
+        </div>
+      </div>
+      {#each selectedOptionToView.selectedBy as user}
+        <div class="flex items-center mb-2">
+          <Avatar src={user.avatar} name={user.label} className="mr-2" />
+          <p>
+            {user.label}
+          </p>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <div class="flex mb-3 justify-between">
+      <div>
+        <h3 class="font-bold">
+          {poll.question}
+        </h3>
+        <p class="text-sm italic">
+          Created by <a
+            class="text-blue-500"
+            href="https://twitter.com/rotimi_best"
+            target="_blank">@{poll.author.label}</a
+          >
+        </p>
+      </div>
+
+      {#if isAuthor}
+        <div class="flex mb-3 justify-end items-center">
+          <label class="mr-2 font-bold" for="user-select">Status:</label>
+
+          <select name="users" id="user-select" bind:value={poll.status}>
+            <option value="draft">Draft</option>
+            <option value="Public">Public</option>
+          </select>
+        </div>
+      {/if}
+    </div>
+
+    {#if viewResult}
+      <div class="flex items-center justify-between">
+        <div class="mr-5">
+          <Label>Expiration</Label>
+          <p class="text-sm text-gray-600 mb-4">
+            {poll.expiration || "Today"}
+          </p>
+        </div>
+        <div class="flex flex-col items-center">
+          <Label>Total Votes</Label>
+          <p class="text-sm text-gray-600 mb-4">
+            {totalVotes}
+          </p>
+        </div>
+      </div>
+
+      <Label>Responses</Label>
+      {#each poll.options as option, index}
+        <div class="border-b p-5">
+          <p>
+            {option.label}
+          </p>
+
+          <div class="flex items-center">
+            <div class="w-4/5 h-2 bg-gray-200 relative">
+              <span
+                class="absolute top-0 left-0 bg-blue-700 h-full"
+                style="width: {calculatePercent(poll.options, option)}%;"
+              />
+            </div>
+            {#if option.selectedBy.length}
+              <button
+                class="text-xl px-3 ml-5"
+                on:click={() => (selectedOptionToView = option)}
+              >
+                >
+              </button>
+            {/if}
+          </div>
+
+          <div class="flex items-center">
+            {#each option.selectedBy.slice(0, 3) as user}
+              <Avatar src={user.avatar} name={user.label} className="mr-2" />
+            {/each}
+          </div>
+        </div>
+      {/each}
+    {:else}
+      {#each poll.options as option, index}
+        <button
+          class="bg-white rounded-md border-2 border-gray-500 {didUserSelect(
+            option
+          ) &&
+            'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
+          on:click={handleSelect(index)}
+        >
+          {#if hasUserVoted}
+            <span
+              class="progress absolute top-0 left-0 {didUserSelect(option)
+                ? 'bg-blue-700'
+                : 'bg-gray-300'} h-full bg-opacity-25 "
+              style="width: {calculatePercent(poll.options, option)}%;"
+            />
+            <strong class="mr-3"
+              >{calculatePercent(poll.options, option)}%</strong
+            >
+          {/if}
+          {option.label}
+        </button>
+      {/each}
+      <div class="flex items-center">
+        <p class="text-sm text-gray-600">
+          Expires: {poll.expiration || "Today"}
+        </p>
+        <span class="mx-2">|</span>
+        <p class="text-sm text-gray-600">
+          Voted: {totalVotes}
+        </p>
+      </div>
+    {/if}
+
+    {#if isAuthor}
+      <div class="w-full text-center mt-3">
+        <button
+          class="px-5 py-2 bg-blue-700 text-white"
+          on:click={() => (viewResult = !viewResult)}
+        >
+          {#if viewResult}
+            Back to poll
+          {:else}
+            View results
+          {/if}
+        </button>
+        <button
+          class="px-5 py-2 bg-red-500 text-white"
+          on:click={handlePollDelete}
+        >
+          Delete
+        </button>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .progress {
+    transition: width 0.5s linear;
+  }
+</style>

src/components/Apps/components/Poll/components/Tabs.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let tabs = [];
+
+  export let selectedTab;
+</script>
+
+<div class="mb-3">
+  {#each tabs as tab}
+    <button
+      class="mr-3 pb-2 border-t-0 border-l-0 border-r-0 {selectedTab ===
+      tab.value
+        ? 'border-b-4 border-indigo-600 focus:border-indigo-600'
+        : 'border-b-0'}"
+      on:click={() => (selectedTab = tab.value)}
+    >
+      {tab.label}
+    </button>
+  {/each}
+</div>

src/components/Apps/components/Poll/index.svelte

@@ -1,8 +1,148 @@
 <script>
   import PageNav from "../../../PageNav/index.svelte";
   import CloseButton from "../../../Buttons/Close/index.svelte";
+  import PrimaryButton from "../../../PrimaryButton/index.svelte";
+  import { VARIANTS } from "../../../PrimaryButton/constants";
+  import CreatePollForm from "./components/CreatePollForm.svelte";
+  import Poll from "./components/Poll.svelte";
+  import Tabs from "./components/Tabs.svelte";
 
   export let handleClose;
+
+  const users = [
+    {
+      label: "Rich Harris",
+      value: "rich-harris",
+      avatar: "https://i.pravatar.cc/150?img=1",
+    },
+    {
+      label: "Linus Torvalds",
+      value: "linus-torvalds",
+      avatar: "https://i.pravatar.cc/150?img=2",
+    },
+    {
+      label: "Elon Musk",
+      value: "elon-musk",
+      avatar: "https://i.pravatar.cc/150?img=3",
+    },
+    {
+      label: "Satoshi Nakamoto",
+      value: "satoshi-nakamoto",
+      avatar: "https://i.pravatar.cc/150?img=4",
+    },
+  ];
+  const tabs = [
+    {
+      label: "My polls",
+      value: 0,
+    },
+    {
+      label: "Other polls",
+      value: 1,
+    },
+  ];
+
+  let selectedTab = 0;
+  let userId = users[0].value;
+  let shouldCreatePoll = false;
+  let polls = [
+    {
+      question: "Who is the creator of Svelte?",
+      author: users[0],
+      status: "draft", // public
+      expiration: new Date().toDateString(),
+      options: [
+        {
+          label: "Dan Abrahmov",
+          selectedBy: [],
+        },
+        {
+          label: "Evan You",
+          selectedBy: [
+            {
+              label: "Rich Harris",
+              value: "rich-harris",
+              avatar: "https://i.pravatar.cc/150?img=1",
+            },
+            {
+              label: "Linus Torvalds",
+              value: "linus-torvalds",
+              avatar: "https://i.pravatar.cc/150?img=2",
+            },
+          ],
+        },
+        {
+          label: "Rich Harris",
+          selectedBy: [],
+        },
+        {
+          label: "Yehuda Katz",
+          selectedBy: [],
+        },
+      ],
+    },
+  ];
+
+  function handleCreatePoll() {
+    shouldCreatePoll = !shouldCreatePoll;
+  }
+
+  function handlePollCreate(poll) {
+    if (poll) {
+      polls = [
+        {
+          ...poll,
+          author: users.find((u) => u.value === userId),
+        },
+        ...polls,
+      ];
+    }
+
+    handleCreatePoll();
+  }
+
+  function handlePollDelete(pollId) {
+    return () => {
+      polls = [...polls.filter((p, i) => i !== pollId)];
+    };
+  }
+
+  function handleVote(pollId) {
+    return (optionId) => {
+      polls = [
+        ...polls.map((poll, index) => {
+          if (index === pollId) {
+            poll.options = poll.options.map((option, optionIndex) => {
+              if (optionIndex === optionId) {
+                if (option.selectedBy.find((user) => user.value === userId)) {
+                  // Unselect if already selected
+                  // <<update: let me keep this commented so after a user selects an answer it can't be unselected>>
+                  // option.selectedBy = option.selectedBy.filter(user => user.value !== userId)
+                } else {
+                  // Select if already selected
+                  option.selectedBy = [
+                    ...option.selectedBy,
+                    users.find((user) => user.value === userId),
+                  ];
+                }
+              } else if (
+                option.selectedBy.find((user) => user.value === userId)
+              ) {
+                // This makes the user to select only one option
+                option.selectedBy = option.selectedBy.filter(
+                  (user) => user.value !== userId
+                );
+              }
+
+              return option;
+            });
+          }
+
+          return poll;
+        }),
+      ];
+    };
+  }
 </script>
 
 <PageNav title="Poll" overidableStyle="padding: 0 10px">
@@ -10,3 +150,47 @@
     <CloseButton onClick={handleClose} />
   </div>
 </PageNav>
+
+<div class="m-2 overlow-auto">
+  {#if shouldCreatePoll}
+    <CreatePollForm onSubmit={handlePollCreate} onCancel={handleCreatePoll} />
+  {:else}
+    <div>
+      <Tabs {tabs} bind:selectedTab />
+
+      {#if selectedTab === tabs[0].value}
+        <div class="w-full flex justify-center mb-3">
+          <PrimaryButton
+            label="Create poll"
+            variant={VARIANTS.CONTAINED}
+            onClick={handleCreatePoll}
+          />
+        </div>
+      {/if}
+
+      {#each polls as poll, index}
+        {#if selectedTab === tabs[0].value && poll.author.value === userId}
+          <Poll
+            bind:poll
+            onSelect={handleVote(index)}
+            handlePollDelete={handlePollDelete(index)}
+            currentUserId={userId}
+          />
+        {:else if selectedTab === tabs[1].value && poll.author.value !== userId}
+          <Poll
+            bind:poll
+            onSelect={handleVote(index)}
+            handlePollDelete={handlePollDelete(index)}
+            currentUserId={userId}
+          />
+        {/if}
+      {:else}
+        <div
+          class="bg-gray-100 border rounded-md h-60 flex items-center justify-center "
+        >
+          <h2 class="text-xl font-bold">No polls to display</h2>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

src/components/Apps/index.svelte

@@ -123,9 +123,10 @@
     }
 
     & .app {
-      width: 300px;
+      width: 400px;
       transition: all 1s ease-out;
       position: relative;
+      overflow: auto;
     }
   }
 </style>