CLASSROOMIO-T-8: Add general calendar

package-lock.json

@@ -2312,6 +2312,12 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.7",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/dayjs/-/dayjs-1.10.7.tgz",
+      "integrity": "sha1-LPX5Gt0oEWdIRAhmoKHSbzps5Gg=",
+      "dev": true
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -3254,6 +3260,12 @@
         "verror": "1.10.0"
       }
     },
+    "just-throttle": {
+      "version": "2.3.1",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/just-throttle/-/just-throttle-2.3.1.tgz",
+      "integrity": "sha1-70oHEAc7tLD699rRvEzKuu7E0OY=",
+      "dev": true
+    },
     "lie": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
@@ -3834,15 +3846,6 @@
         "pinkie": "^2.0.0"
       }
     },
-    "polka": {
-      "version": "1.0.0-next.22",
-      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.22.tgz",
-      "integrity": "sha512-a7tsZy5gFbJr0aUltZS97xCkbPglXuD67AMvTyZX7BTDBH384FWf0ZQF6rPvdutSxnO1vUlXM2zSLf5tCKk5RA==",
-      "requires": {
-        "@polka/url": "^1.0.0-next.21",
-        "trouter": "^3.1.0"
-      }
-    },
     "postcss": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
@@ -4163,11 +4166,6 @@
         "@babel/runtime": "^7.8.4"
       }
     },
-    "regexparam": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz",
-      "integrity": "sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g=="
-    },
     "regexpu-core": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
@@ -4712,6 +4710,16 @@
         "svelte": "^3.15.0"
       }
     },
+    "svelte-calendar": {
+      "version": "3.1.6",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/svelte-calendar/-/svelte-calendar-3.1.6.tgz",
+      "integrity": "sha1-vb+Unxnq4ZnQSGDaeFertQAOhEQ=",
+      "dev": true,
+      "requires": {
+        "dayjs": "^1.10.6",
+        "just-throttle": "^2.3.1"
+      }
+    },
     "svelte-dnd-action": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/svelte-dnd-action/-/svelte-dnd-action-0.9.9.tgz",
@@ -4921,14 +4929,6 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
       "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
     },
-    "trouter": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/trouter/-/trouter-3.2.0.tgz",
-      "integrity": "sha512-rLLXbhTObLy2MBVjLC+jTnoIKw99n0GuJs9ov10J870vDw5qhTurPzsDrudNtBf5w/CZ9ctZy2p2IMmhGcel2w==",
-      "requires": {
-        "regexparam": "^1.3.0"
-      }
-    },
     "true-case-path": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",

package.json

@@ -57,6 +57,7 @@
     "sass": "^1.32.13",
     "svelte": "^3.17.3",
     "svelte-awesome": "^2.3.1",
+    "svelte-calendar": "^3.1.6",
     "svelte-dnd-action": "^0.9.9",
     "svelte-loading-spinners": "^0.1.7",
     "svelte-preprocess": "^4.7.3",

rollup.config.js

@@ -14,7 +14,8 @@ import pkg from './package.json';
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
-const sourcemap = dev ? false : 'inline';
+// const sourcemap = dev ? false : 'inline';
+const sourcemap = 'inline';
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
 const onwarn = (warning, onwarn) => {

src/client.js

@@ -6,20 +6,22 @@ import config from './config';
 
 console.log(`isProd`, config.isProd);
 
-Sentry.init({
+if (config.isProd) {
-  dsn: 'https://c966f7e8cb1d4306be20b26bb4f0cc96@o476906.ingest.sentry.io/5999999',
+  Sentry.init({
-  integrations: [
+    dsn: 'https://c966f7e8cb1d4306be20b26bb4f0cc96@o476906.ingest.sentry.io/5999999',
-    new Integrations.BrowserTracing(),
+    integrations: [
-    new CaptureConsole({
+      new Integrations.BrowserTracing(),
-      levels: ['error'],
+      new CaptureConsole({
-    }),
+        levels: ['error'],
-  ],
+      }),
-  environment: config.isProd ? 'production' : 'development',
+    ],
-  // Set tracesSampleRate to 1.0 to capture 100%
+    environment: config.isProd ? 'production' : 'development',
-  // of transactions for performance monitoring.
+    // Set tracesSampleRate to 1.0 to capture 100%
-  // We recommend adjusting this value in production
+    // of transactions for performance monitoring.
-  tracesSampleRate: 1.0,
+    // We recommend adjusting this value in production
-});
+    tracesSampleRate: 1.0,
+  });
+}
 
 sapper.start({
   target: document.querySelector('#sapper'),

src/components/Navigation/index.svelte

@@ -28,7 +28,7 @@
     </div>
 
     {#if $user.isLoggedIn}
-      <li class="hidden">
+      <li class="">
         <a
           class="block"
           aria-current={segment === undefined || segment === 'dashboard'

src/components/Tailwindcss.svelte

@@ -8,6 +8,10 @@
     --scrollbarBG: #fff;
     --thumbBG: #ccc;
   }
+
+  #calendar .grid {
+    --sc-theme-calendar-colors-background-highlight: var(--main-primary-color);
+  }
   * {
     scrollbar-width: thin;
     scrollbar-color: var(--thumbBG) var(--scrollbarBG);

src/routes/_layout.svelte

@@ -79,7 +79,7 @@
         if (path.includes('login') || path.includes('signup')) {
           goto('/profile/' + $profile.id);
         } else if (!path.length) {
-          goto('/courses');
+          goto('/dashboard');
         }
       }
     } else if (profileData) {
@@ -96,7 +96,7 @@
       if (path.includes('login') || path.includes('signup')) {
         goto('/profile/' + $profile.id);
       } else if (!path.length) {
-        goto('/courses');
+        goto('/dashboard');
       }
     }
   }

src/routes/admin.svelte

@@ -0,0 +1,151 @@
+<!-- <script context="module">
+  export async function preload(page, { user, config }) {
+    return { user, config };
+  }
+</script> -->
+<script>
+  import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
+  import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
+  import Book32 from 'carbon-icons-svelte/lib/Book32';
+
+  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
+  let animate = 'transition delay-75 duration-300 ease-in-out';
+  let boxes = [
+    {
+      label: 'Students',
+      value: 50,
+      icon: 'students',
+    },
+    {
+      label: 'Tutors',
+      value: 10,
+      icon: 'tutor',
+    },
+    {
+      label: 'Courses',
+      value: 20,
+      icon: 'courses',
+    },
+  ];
+
+  let topStudents = [
+    {
+      id: 1,
+      name: 'Brad Traversy',
+      score: 97.8,
+    },
+    {
+      id: 2,
+      name: 'Ebuka Jacobs',
+      score: 96,
+    },
+    {
+      id: 3,
+      name: 'Ngozi Okonjo Iwuala',
+      score: 95,
+    },
+    {
+      id: 4,
+      name: 'Nathaniel Bassey',
+      score: 80,
+    },
+    {
+      id: 5,
+      name: 'Barack Obama',
+      score: 79,
+    },
+  ];
+
+  let topCourses = [
+    {
+      title: 'CityBIM Basic Module',
+      rating: 5,
+    },
+    {
+      title: 'CityBIM Advanced Module',
+      rating: 4.5,
+    },
+    {
+      title: 'Introduction to ClasroomIO',
+      rating: 4.2,
+    },
+    {
+      title: 'Advanced Builders Module',
+      rating: 4.1,
+    },
+    {
+      title: 'Artificial Intelligence - Basics',
+      rating: 4,
+    },
+  ];
+</script>
+
+<svelte:head>
+  <title>Admin Dashboard - ClassroomIO</title>
+</svelte:head>
+
+<div class="root w-full py-10 bg-gray-100">
+  <div class="flex items-center justify-evenly max-w-6xl m-auto">
+    {#each boxes as box}
+      <div
+        class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
+      >
+        {#if box.icon === 'students'}
+          <UserSpeaker32 class="carbon-icon" />
+        {:else if box.icon === 'tutor'}
+          <GroupPresentation32 class="carbon-icon" />
+        {:else if box.icon === 'courses'}
+          <Book32 class="carbon-icon" />
+        {/if}
+        <p class="text-xl">{box.label}</p>
+        <h3 class="text-3xl m-0 my-2">{box.value}</h3>
+      </div>
+    {/each}
+  </div>
+
+  <div class="flex items-center justify-evenly mt-16">
+    <div class="table rounded-md bg-white shadow-md">
+      <div class="flex border-t-0 {borderBottomGrey} p-3">
+        <h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
+      </div>
+
+      {#each topStudents as topStudent, index}
+        <div
+          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+        >
+          <span class="mr-2">{index + 1}</span>
+          <p class="text-lg">{topStudent.name}</p>
+          <span class="flex-grow" />
+          <p class="text-lg">{topStudent.score}</p>
+        </div>
+      {/each}
+    </div>
+
+    <div class="table rounded-md bg-white shadow-md">
+      <div class="flex border-t-0 {borderBottomGrey} p-3">
+        <h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
+      </div>
+
+      {#each topCourses as topCourse, index}
+        <div
+          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+        >
+          <span class="mr-2">{index + 1}</span>
+          <p class="text-lg">{topCourse.title}</p>
+          <span class="flex-grow" />
+          <p class="text-lg">{topCourse.rating}</p>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .root {
+    min-height: 93vh;
+  }
+
+  .table {
+    width: 564px;
+  }
+</style>

src/routes/courses.svelte

@@ -130,7 +130,7 @@
 </script>
 
 <svelte:head>
-  <title>Courses</title>
+  <title>Courses - ClassroomIO</title>
 </svelte:head>
 
 <section class="root">

src/routes/dashboard.svelte

@@ -1,151 +1,259 @@
-<!-- <script context="module">
+<script lang="ts">
-  export async function preload(page, { user, config }) {
+  import { onMount } from 'svelte';
-    return { user, config };
+  import { InlineCalendar, Datepicker } from 'svelte-calendar';
+
+  import {
+    formatUserUpcomingData,
+    formatDate,
+  } from '../utils/functions/routes/dashboard';
+  import { user } from '../utils/store/user';
+  import { fetchUserUpcomingData } from '../utils/services/dashboard';
+  import { isMobile } from '../utils/store/useMobile';
+  import type {
+    UserLessonDataType,
+    LessonsByMonthIndexType,
+  } from '../utils/types';
+
+  const theme = {
+    calendar: {
+      width: '400px',
+      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
+    },
+  };
+
+  let store;
+  let calendar: HTMLElement | null = null;
+  let lessonsByMonth: LessonsByMonthIndexType = {};
+  let prevSelectedDate: string = new Date().toDateString();
+  let selectedDateLessonData: UserLessonDataType[] | [] = [];
+
+  const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) =>
+    setTimeout(() => {
+      if (!calendar) calendar = document.getElementById('calendar');
+      // console.log(
+      //   `currentMonthIndexInRenderedMonth`,
+      //   currentMonthIndexInRenderedMonth
+      // );
+
+      const renderedMonths =
+        calendar?.querySelectorAll('.contents .container .stage .grid .grid') ||
+        [];
+      // console.log(`renderedMonths`, renderedMonths);
+      const currentMonthIndex = new Date($store?.selected).getMonth();
+      const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth];
+      // console.log(`currentMonth`, currentMonth);
+      // All elements for each day in the month - with prev or next month
+      const currentMonthElements =
+        currentMonth?.querySelectorAll<HTMLElement>('a:not(.outsider)') || [];
+      // console.log(`currentMonthElements`, currentMonthElements, '\n\n');
+      const currentMonthData = lessonsByMonth[currentMonthIndex];
+      if (!currentMonthData) return;
+
+      for (let i in currentMonthElements) {
+        if (!currentMonthElements.hasOwnProperty(i)) {
+          continue;
+        }
+
+        const dayElement = currentMonthElements[i];
+        dayElement.style.position = 'relative';
+
+        // The date is inside the element like <a>2</a>
+        const dateIndex = Number(dayElement.innerHTML);
+        if (!!currentMonthData[dateIndex]) {
+          // console.log(`dateIndex`, dateIndex);
+          // console.log(`lesson data`, currentMonthData[dateIndex]);
+          dayElement.insertAdjacentHTML(
+            'beforeend',
+            '<span class="active-day">•</span>'
+          );
+        }
+      }
+    }, 500);
+
+  async function runFirstThings(currentSession: { id: string } | null) {
+    if (!currentSession || !currentSession.id) return;
+
+    const userUpcomingData = await fetchUserUpcomingData(currentSession.id);
+
+    lessonsByMonth = formatUserUpcomingData(userUpcomingData);
+
+    // Only for desktop. Only run on mobile when the user clicks on the date
+    if (!$isMobile) {
+      addDotsToCalendar(1);
+    }
   }
-</script> -->
-<script>
-  import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
-  import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
-  import Book32 from 'carbon-icons-svelte/lib/Book32';
 
-  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
+  function getDataOfSelectedDate(
-  let animate = 'transition delay-75 duration-300 ease-in-out';
+    selectedDate: string
-  let boxes = [
+  ): UserLessonDataType[] | [] {
-    {
+    if (!selectedDate) return [];
-      label: 'Students',
-      value: 50,
-      icon: 'students',
-    },
-    {
-      label: 'Tutors',
-      value: 10,
-      icon: 'tutor',
-    },
-    {
-      label: 'Courses',
-      value: 20,
-      icon: 'courses',
-    },
-  ];
 
-  let topStudents = [
+    const monthIndex = new Date(selectedDate).getMonth();
-    {
+    const dateIndex = new Date(selectedDate).getDate();
-      id: 1,
-      name: 'Brad Traversy',
-      score: 97.8,
-    },
-    {
-      id: 2,
-      name: 'Ebuka Jacobs',
-      score: 96,
-    },
-    {
-      id: 3,
-      name: 'Ngozi Okonjo Iwuala',
-      score: 95,
-    },
-    {
-      id: 4,
-      name: 'Nathaniel Bassey',
-      score: 80,
-    },
-    {
-      id: 5,
-      name: 'Barack Obama',
-      score: 79,
-    },
-  ];
 
-  let topCourses = [
+    // If we changed the month, update the calendar dots
-    {
+    const prevMonthIndex = new Date(prevSelectedDate).getMonth();
-      title: 'CityBIM Basic Module',
+    if (prevMonthIndex !== monthIndex) {
-      rating: 5,
+      const currentMonthIndexInRenderedMonth =
-    },
+        monthIndex < prevMonthIndex ? 1 : 2;
-    {
+
-      title: 'CityBIM Advanced Module',
+      addDotsToCalendar(currentMonthIndexInRenderedMonth);
-      rating: 4.5,
+    }
-    },
+
-    {
+    prevSelectedDate = selectedDate;
-      title: 'Introduction to ClasroomIO',
+
-      rating: 4.2,
+    const monthLessonData = lessonsByMonth[monthIndex];
-    },
+    if (!monthLessonData) {
-    {
+      return [];
-      title: 'Advanced Builders Module',
+    }
-      rating: 4.1,
+
-    },
+    const dateLessonData = monthLessonData[dateIndex];
-    {
+    if (!dateLessonData) {
-      title: 'Artificial Intelligence - Basics',
+      return [];
-      rating: 4,
+    }
-    },
+
-  ];
+    return dateLessonData;
+  }
+
+  onMount(() => {
+    // Remove default shouldEnlargeDay=true when using <DatePicker /> on mobile
+    if ($store && $store.shouldEnlargeDay) {
+      $store.shouldEnlargeDay = false;
+    }
+  });
+
+  // This is here not called onMount because we want to call it as soon as we have the user's `currentSession` value
+  $: runFirstThings($user.currentSession);
+
+  // Every time the date changes
+  $: selectedDateLessonData = getDataOfSelectedDate($store?.selected);
 </script>
 
 <svelte:head>
   <title>Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<div class="root w-full py-10 bg-gray-100">
+<section class="root w-full py-10 bg-gray-100">
-  <div class="flex items-center justify-evenly max-w-6xl m-auto">
+  <div class="calendar-root flex mx-2">
-    {#each boxes as box}
+    {#if !$isMobile}
-      <div
+      <div id="calendar">
-        class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
+        <InlineCalendar bind:store {theme} />
-      >
-        {#if box.icon === 'students'}
-          <UserSpeaker32 class="carbon-icon" />
-        {:else if box.icon === 'tutor'}
-          <GroupPresentation32 class="carbon-icon" />
-        {:else if box.icon === 'courses'}
-          <Book32 class="carbon-icon" />
-        {/if}
-        <p class="text-xl">{box.label}</p>
-        <h3 class="text-3xl m-0 my-2">{box.value}</h3>
       </div>
-    {/each}
+    {/if}
-  </div>
+    <div
-
+      id={$isMobile ? 'calendar' : ''}
-  <div class="flex items-center justify-evenly mt-16">
+      class="calendar-info flex-grow border border-gray-300 ml-2 rounded-md"
-    <div class="table rounded-md bg-white shadow-md">
+    >
-      <div class="flex border-t-0 {borderBottomGrey} p-3">
+      {#if $isMobile}
-        <h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
+        <div class="header w-full flex items-center">
-      </div>
+          <Datepicker bind:store let:key let:send let:receive>
-
+            <button
-      {#each topStudents as topStudent, index}
+              class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
-        <div
+              in:receive|local={{ key }}
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+              out:send|local={{ key }}
-        >
+              on:click={() => {
-          <span class="mr-2">{index + 1}</span>
+                addDotsToCalendar(1);
-          <p class="text-lg">{topStudent.name}</p>
+              }}
-          <span class="flex-grow" />
+            >
-          <p class="text-lg">{topStudent.score}</p>
+              {formatDate($store?.selected)}
+            </button>
+          </Datepicker>
         </div>
-      {/each}
+      {:else}
-    </div>
-
-    <div class="table rounded-md bg-white shadow-md">
-      <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
-      </div>
-
-      {#each topCourses as topCourse, index}
         <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+          class="header text-lg font-bold text-blue-700 flex px-5 items-center"
         >
-          <span class="mr-2">{index + 1}</span>
+          {formatDate($store?.selected)}
-          <p class="text-lg">{topCourse.title}</p>
-          <span class="flex-grow" />
-          <p class="text-lg">{topCourse.rating}</p>
         </div>
+      {/if}
+
+      {#each selectedDateLessonData as lessonData}
+        <div class="flex items-center justify-between p-5 lesson-data">
+          <div>
+            <a
+              class="text-black-700 text-lg font-bold"
+              href="/courses/{lessonData.course_id}/lessons/{lessonData.lesson_id}"
+            >
+              {lessonData.lesson_title}
+            </a>
+            <p class="text-grey text-sm flex items-center">
+              <a
+                class="underline text-blue-700 my-2"
+                href="/courses/{lessonData.course_id}"
+              >
+                {` ${lessonData.course_title}`}
+              </a>
+            </p>
+          </div>
+          <a
+            class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+              'opacity-50 pointer-events-none cursor-not-allowed'}"
+            href={!!lessonData.call_url ? lessonData.call_url : undefined}
+            target="_blank"
+            title={!!lessonData.call_url
+              ? 'Click to join the call'
+              : 'No call link was added for this lesson. Ask your trainer'}
+          >
+            Join call
+          </a>
+        </div>
+      {:else}
+        <p class="flex items-center justify-center w-full no-data">
+          No lesson on this day
+        </p>
       {/each}
     </div>
   </div>
-</div>
+</section>
 
 <style>
   .root {
     min-height: 93vh;
   }
 
-  .table {
+  .calendar-root {
-    width: 564px;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .calendar-info {
+    max-width: 600px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .header {
+    border-bottom: 1px solid var(--border-color);
+    min-height: 61px;
+  }
+
+  .lesson-data {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .no-data {
+    height: 100px;
+  }
+
+  .join-call {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-height: 48px;
+    width: 110px;
+    text-align: center;
+  }
+
+  :global(span.active-day) {
+    position: absolute;
+    bottom: -8px;
+    left: 40%;
+    color: var(--main-primary-color);
+  }
+
+  @media (max-width: 640px) {
+    :global(span.active-day) {
+      font-size: 40px;
+    }
   }
 </style>

src/utils/functions/routes/dashboard.ts

@@ -0,0 +1,56 @@
+import dayjs from 'dayjs';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import isToday from 'dayjs/plugin/isToday';
+import isTomorrow from 'dayjs/plugin/isTomorrow';
+
+import type { UserLessonDataType, LessonsByMonthIndexType } from '../../types';
+
+dayjs.extend(isYesterday);
+dayjs.extend(isToday);
+dayjs.extend(isTomorrow);
+
+export const formatUserUpcomingData = (
+  data: UserLessonDataType[]
+): LessonsByMonthIndexType => {
+  const result: LessonsByMonthIndexType = {};
+
+  for (const item of data) {
+    const { lesson_at } = item;
+    const lessonAtDate = new Date(lesson_at);
+    const monthIndex = lessonAtDate.getMonth();
+    const dateIndex = lessonAtDate.getDate();
+
+    if (result[monthIndex]) {
+      const prevDateData = result[monthIndex][dateIndex];
+
+      if (Array.isArray(prevDateData)) {
+        result[monthIndex] = {
+          ...result[monthIndex],
+          [dateIndex]: [...prevDateData, item],
+        };
+      } else {
+        result[monthIndex] = { ...result[monthIndex], [dateIndex]: [item] };
+      }
+    } else {
+      result[monthIndex] = { [dateIndex]: [item] };
+    }
+  }
+
+  return result;
+};
+
+export const formatDate = (_selectedDate: string | undefined): string => {
+  if (!_selectedDate) return '';
+
+  const selectedDate = dayjs(_selectedDate);
+
+  if (selectedDate.isToday()) {
+    return 'Today';
+  } else if (selectedDate.isYesterday()) {
+    return 'Yesterday';
+  } else if (selectedDate.isTomorrow()) {
+    return 'Tomorrow';
+  }
+
+  return selectedDate.format('ddd, MMM D');
+};

src/utils/functions/supabase.js

@@ -1,24 +0,0 @@
-import { createClient } from '@supabase/supabase-js';
-
-export let supabase;
-
-export const getSupabase = (config) => {
-  if (supabase) return supabase;
-
-  if (!config && process && process.env) {
-    config = {
-      isProd: process.env.NODE_ENV === 'development',
-      supabaseConfig: {
-        url: process.env.SVELTE_APP_SUPABASE_URL,
-        anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY,
-      },
-    };
-  }
-
-  supabase = createClient(
-    config.supabaseConfig.url,
-    config.supabaseConfig.anonKey
-  );
-
-  return supabase;
-};

src/utils/functions/supabase.ts

@@ -0,0 +1,25 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import type { ConfigType } from '../types';
+
+export let supabase: SupabaseClient;
+
+export const getSupabase = (config: ConfigType) => {
+  if (supabase) return supabase;
+
+  if (!config && process && process.env) {
+    config = {
+      isProd: process.env.NODE_ENV === 'development',
+      supabaseConfig: {
+        url: process.env.SVELTE_APP_SUPABASE_URL || '',
+        anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY || '',
+      },
+    };
+  }
+
+  supabase = createClient(
+    config.supabaseConfig.url,
+    config.supabaseConfig.anonKey
+  );
+
+  return supabase;
+};

src/utils/services/dashboard/index.ts

@@ -0,0 +1,25 @@
+import type { UserLessonDataType } from '../../types';
+import { supabase } from '../../functions/supabase';
+
+export async function fetchUserUpcomingData(
+  profileId: string | null
+): Promise<UserLessonDataType[] | []> {
+  if (!profileId) {
+    return [];
+  }
+
+  const { data: userUpcomingData } = await supabase.rpc(
+    'get_user_upcoming_lessons',
+    {
+      profile_id_arg: profileId,
+    }
+  );
+
+  console.log(`userUpcomingData`, userUpcomingData);
+
+  if (!Array.isArray(userUpcomingData)) {
+    return [];
+  }
+
+  return userUpcomingData;
+}

src/utils/types/config.ts

@@ -0,0 +1,4 @@
+export type ConfigType = {
+  isProd: boolean;
+  supabaseConfig: { url: string; anonKey: string };
+};

src/utils/types/dashboard.ts

@@ -0,0 +1,16 @@
+export type UserLessonDataType = {
+  call_url: string;
+  course_id: string;
+  course_title: string;
+  lesson_at: string;
+  lesson_id: string;
+  lesson_title: string;
+};
+
+type LessonByDayType = {
+  [dayIndex: number]: UserLessonDataType[];
+};
+
+export type LessonsByMonthIndexType = {
+  [monthIndex: number]: LessonByDayType;
+};

src/utils/types/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './dashboard';
+export * from './user';

src/utils/types/user.ts

@@ -0,0 +1,17 @@
+export interface CurrentSessionType {
+  access_token: string;
+  expires_at: number;
+  expires_in: number;
+  refresh_token: string;
+  token_type: string;
+}
+
+export interface UserType {
+  openAuthModal: boolean;
+  fetchingUser: boolean;
+  isLoggedIn: boolean;
+  currentSession: CurrentSessionType | null;
+  expiresAt: number;
+}
+
+export interface ProfileType {}