From 302b2eb37b96cd17595aa4255460238e85090e16 Mon Sep 17 00:00:00 2001
From: rotimi-best <best@classroomio.com>
Date: Wed, 28 Jul 2021 22:57:40 +0300
Subject: [PATCH] Add people page

---
 src/components/Navigation/index.svelte        |   4 +-
 src/routes/discussions.svelte                 | 128 +++++++++---------
 .../{discussion => discussions}/[id].json.js  |   0
 .../{discussion => discussions}/[id].svelte   |   0
 .../_discussions.js                           |   0
 src/routes/people.svelte                      |  92 +++++++++++++
 6 files changed, 158 insertions(+), 66 deletions(-)
 rename src/routes/{discussion => discussions}/[id].json.js (100%)
 rename src/routes/{discussion => discussions}/[id].svelte (100%)
 rename src/routes/{discussion => discussions}/_discussions.js (100%)
 create mode 100644 src/routes/people.svelte

diff --git a/src/components/Navigation/index.svelte b/src/components/Navigation/index.svelte
index d77bbc56..c577482a 100644
--- a/src/components/Navigation/index.svelte
+++ b/src/components/Navigation/index.svelte
@@ -58,8 +58,8 @@
     <li>
       <a
         class="block"
-        aria-current={segment === 'profile' ? 'page' : undefined}
-        href="profile"
+        aria-current={segment === 'people' ? 'page' : undefined}
+        href="people"
         >People
       </a>
     </li>
diff --git a/src/routes/discussions.svelte b/src/routes/discussions.svelte
index 45aa82ed..c4e69312 100644
--- a/src/routes/discussions.svelte
+++ b/src/routes/discussions.svelte
@@ -1,18 +1,18 @@
 <script>
-  import { stores } from "@sapper/app";
-  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
-  import Vote from "../components/Vote/index.svelte";
-  import Space from "../components/Space/index.svelte";
-  import HashTags from "../components/HashTags/index.svelte";
-  import PageNav from "../components/PageNav/index.svelte";
+  import { stores } from '@sapper/app';
+  import AddComment20 from 'carbon-icons-svelte/lib/AddComment20';
+  import Vote from '../components/Vote/index.svelte';
+  import Space from '../components/Space/index.svelte';
+  import HashTags from '../components/HashTags/index.svelte';
+  import PageNav from '../components/PageNav/index.svelte';
 
   function getDiscussion(filterBy, allDiscussions) {
     switch (filterBy) {
-      case "popular":
-        return allDiscussions.filter((a, i) => i >= 0 && i < 2);
-      case "recent":
+      // case 'popular':
+      //   return allDiscussions.filter((a, i) => i >= 0 && i < 2);
+      case 'recent':
         return allDiscussions.filter((a, i) => i >= 2 && i < 5);
-      case "upvoted":
+      case 'upvoted':
         return allDiscussions.filter((a, i) => i > 4 && i < 8);
       default:
         return allDiscussions;
@@ -20,19 +20,19 @@
   }
 
   const { page } = stores();
-  let filterBy = "";
+  let filterBy = '';
   let discussions = [];
 
-  $: filterBy = $page.query.filter || "popular";
+  $: filterBy = $page.query.filter || 'popular';
 
   const _allDiscussions = [
     {
       id: 1,
-      title: "How do I pass Anicimov?",
+      title: 'How do I pass Anicimov?',
       author: {
-        name: "rotimibest",
+        name: 'rotimibest',
       },
-      tags: ["ибэит", "икс"],
+      tags: ['ибэит', 'икс'],
       answered: false,
       comments: 10,
       votes: 10,
@@ -40,43 +40,43 @@
     {
       id: 2,
       title:
-        "Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?",
+        'Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?',
       author: {
-        name: "attronaldo",
+        name: 'attronaldo',
       },
-      tags: ["иибрт", "иее"],
+      tags: ['иибрт', 'иее'],
       answered: false,
       comments: 2,
       votes: 2,
     },
     {
       id: 3,
-      title: "Who is Nikolenko?",
+      title: 'Who is Nikolenko?',
       author: {
-        name: "donald",
+        name: 'donald',
       },
-      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
+      tags: ['ибэит', 'иее', 'иибрт', 'ИПИГ'],
       answered: false,
       comments: 10,
       votes: 10,
     },
     {
       id: 4,
-      title: "Archive discussion button",
+      title: 'Archive discussion button',
       author: {
-        name: "acharlesvv",
+        name: 'acharlesvv',
       },
       tags: [
-        "ИЭКСУ",
-        "ИМБТ",
-        "ИМИ",
-        "ИПТДМ",
-        "ИИИР",
-        "ГФ",
-        "ХТФ",
-        "ИДЗО",
-        "УИИ",
-        "УНИ",
+        'ИЭКСУ',
+        'ИМБТ',
+        'ИМИ',
+        'ИПТДМ',
+        'ИИИР',
+        'ГФ',
+        'ХТФ',
+        'ИДЗО',
+        'УИИ',
+        'УНИ',
       ],
       answered: false,
       comments: 15,
@@ -84,54 +84,54 @@
     },
     {
       id: 1,
-      title: "How do I pass Anicimov?",
+      title: 'How do I pass Anicimov?',
       author: {
-        name: "rotimibest",
+        name: 'rotimibest',
       },
-      tags: ["ибэит", "икс"],
+      tags: ['ибэит', 'икс'],
       answered: false,
       comments: 7,
       votes: 7,
     },
     {
       id: 2,
-      title: "Where do I find the nearest restaurant?",
+      title: 'Where do I find the nearest restaurant?',
       author: {
-        name: "attronaldo",
+        name: 'attronaldo',
       },
-      tags: ["иибрт", "иее"],
+      tags: ['иибрт', 'иее'],
       answered: false,
       comments: 4,
       votes: 4,
     },
     {
       id: 3,
-      title: "Who is Nikolenko?",
+      title: 'Who is Nikolenko?',
       author: {
-        name: "donald",
+        name: 'donald',
       },
-      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
+      tags: ['ибэит', 'иее', 'иибрт', 'ИПИГ'],
       answered: false,
       comments: 100,
       votes: 100,
     },
     {
       id: 4,
-      title: "Archive discussion button",
+      title: 'Archive discussion button',
       author: {
-        name: "acharlesvv",
+        name: 'acharlesvv',
       },
       tags: [
-        "ИЭКСУ",
-        "ИМБТ",
-        "ИМИ",
-        "ИПТДМ",
-        "ИИИР",
-        "ГФ",
-        "ХТФ",
-        "ИДЗО",
-        "УИИ",
-        "УНИ",
+        'ИЭКСУ',
+        'ИМБТ',
+        'ИМИ',
+        'ИПТДМ',
+        'ИИИР',
+        'ГФ',
+        'ХТФ',
+        'ИДЗО',
+        'УИИ',
+        'УНИ',
       ],
       answered: false,
       comments: 5,
@@ -157,19 +157,19 @@
     addButtonLabel="Ask"
     navItems={[
       {
-        label: "Popular",
-        isActive: filterBy === "popular",
-        href: "?filter=popular",
+        label: 'Popular',
+        isActive: filterBy === 'popular',
+        href: '/discussions?filter=popular',
       },
       {
-        label: "Recent",
-        isActive: filterBy === "recent",
-        href: "?filter=recent",
+        label: 'Recent',
+        isActive: filterBy === 'recent',
+        href: '/discussions?filter=recent',
       },
       {
-        label: "Upvoted",
-        isActive: filterBy === "upvoted",
-        href: "?filter=upvoted",
+        label: 'Upvoted',
+        isActive: filterBy === 'upvoted',
+        href: '/discussions?filter=upvoted',
       },
     ]}
   />
@@ -178,7 +178,7 @@
       <Vote value={discussion.votes} />
       <div class="discussion-topic-author">
         <h4>
-          <a rel="prefetch" href="discussion/{discussion.id}"
+          <a rel="prefetch" href="discussions/{discussion.id}"
             >{discussion.title}</a
           >
         </h4>
diff --git a/src/routes/discussion/[id].json.js b/src/routes/discussions/[id].json.js
similarity index 100%
rename from src/routes/discussion/[id].json.js
rename to src/routes/discussions/[id].json.js
diff --git a/src/routes/discussion/[id].svelte b/src/routes/discussions/[id].svelte
similarity index 100%
rename from src/routes/discussion/[id].svelte
rename to src/routes/discussions/[id].svelte
diff --git a/src/routes/discussion/_discussions.js b/src/routes/discussions/_discussions.js
similarity index 100%
rename from src/routes/discussion/_discussions.js
rename to src/routes/discussions/_discussions.js
diff --git a/src/routes/people.svelte b/src/routes/people.svelte
new file mode 100644
index 00000000..c594aa87
--- /dev/null
+++ b/src/routes/people.svelte
@@ -0,0 +1,92 @@
+<script>
+  import AddAlt32 from 'carbon-icons-svelte/lib/AddAlt32';
+  import IconButton from '../components/IconButton/index.svelte';
+  import Avatar from '../components/Avatar/index.svelte';
+  let teachers = [
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/43971542?s=96&v=4',
+      name: 'Imed Jaberi',
+    },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/3624098?s=96&v=4',
+      name: 'Andrew Clark',
+    },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/857709?s=96&v=4',
+      name: 'Daniel Lytkin',
+    },
+  ];
+
+  let students = [
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/20658625?s=96&v=4',
+      name: 'Aissaoui Ahmed',
+    },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/26669835?s=96&v=4',
+      name: 'Mahfoudh Arous',
+    },
+  ];
+
+  let borderBottom = 'border-r-0 border-b border-l-0';
+  function addTeacher() {}
+  function addStudent() {}
+</script>
+
+<div class="root w-full py-5">
+  <div class="max-w-2xl mx-auto my-5">
+    <div
+      class="flex items-center justify-between {borderBottom} border-blue-700"
+    >
+      <h3 class="text-3xl text-blue-700">Teachers</h3>
+      <IconButton
+        toolTipProps={{ title: 'Add', direction: 'right' }}
+        onClick={addTeacher}
+        selected={true}
+      >
+        <AddAlt32 class="carbon-icon" />
+      </IconButton>
+    </div>
+
+    {#each teachers as teacher, index}
+      <div
+        class="flex items-center px-2 py-3 {teachers[index + 1] &&
+          borderBottom} border-gray-300"
+      >
+        <Avatar src={teacher.avatar} name={teacher.name} />
+        <p class="ml-2">{teacher.name}</p>
+      </div>
+    {/each}
+  </div>
+
+  <div class="max-w-2xl mx-auto my-5">
+    <div
+      class="flex items-center justify-between {borderBottom} border-blue-700"
+    >
+      <h3 class="text-3xl text-blue-700">Students</h3>
+      <IconButton
+        toolTipProps={{ title: 'Add', direction: 'right' }}
+        onClick={addStudent}
+        selected={true}
+      >
+        <AddAlt32 class="carbon-icon" />
+      </IconButton>
+    </div>
+
+    {#each students as student, index}
+      <div
+        class="flex items-center px-2 py-3 {students[index + 1] &&
+          borderBottom} border-gray-300"
+      >
+        <Avatar src={student.avatar} name={student.name} />
+        <p class="ml-2">{student.name}</p>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .root {
+    min-height: 90vh;
+  }
+</style>