ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add people + Move fetching to client side

Browse Source
This commit is contained in:
rotimi-best
2021-08-24 10:45:43 +03:00
parent b3e68119a7
commit 6ef33cbfd0
27 changed files with 7073 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/_layout.svelte
+5
View File
@@ -16,6 +16,7 @@
import { handleAuthChange } from '../utils/functions/api';
import { user, profile } from '../utils/store/user';
import { getSupabase } from '../utils/functions/supabase';
import { setProfileIdOfGroupMember } from '../utils/services/courses';
export let segment;
export let config;
@@ -52,6 +53,7 @@
id: authUser.id,
username: regexUsernameMatch[1],
fullname: regexUsernameMatch[1],
email: authUser.email,
});
// Profile created, go to profile page
@@ -61,6 +63,7 @@
$user.currentSession = authUser;
profile.set(data[0]);
await setProfileIdOfGroupMember(authUser.email, data[0].id);
// If user coming to login page, then
if (path.includes('login') || path.includes('signup')) {
@@ -75,6 +78,8 @@
console.log(`profileData`, profileData);
profile.set(profileData);
setProfileIdOfGroupMember(authUser.email, profileData.id);
// If user coming to login page, then
if (path.includes('login') || path.includes('signup')) {
goto('/dashboard');
src/routes/courses.svelte
+4 -8
View File
@@ -1,5 +1,5 @@
<script context="module">
import { profile, user } from '../utils/store/user';
import { profile } from '../utils/store/user';
import { fetchCourses } from '../components/Courses/api';
export async function preload(page, params) {
@@ -29,6 +29,7 @@
import { courses, createCourseModal } from '../components/Courses/store';
import { validateForm } from '../components/Courses/functions';
import { ROLE } from '../utils/constants/roles';
import { addGroupMember } from '../utils/services/courses';
// const { page } = stores();
@@ -69,8 +70,9 @@
// Get profile of author and add as member
const admin = await addGroupMember({
profile_id: $profile.id,
email: student,
group_id,
role_id: ROLE.ADMIN,
role_id: ROLE.TUTOR,
});
let membersStack = [];
@@ -97,12 +99,6 @@
});
}
function addGroupMember(member) {
return supabase.from('groupmember').insert(member, {
returning: 'minimal',
});
}
async function getCourses(userId) {
console.log(`getCourses process.browser`, process.browser);
if (process.browser) {
src/routes/courses/[id]/index.svelte
+9 -11
View File
@@ -1,13 +1,6 @@
<script context="module">
import { fetchCourse } from '../../../utils/services/courses';
export async function preload({ params }, session) {
const {
data,
// error
} = await fetchCourse(params.id, session);
return { courseData: data };
return { courseId: params.id };
}
</script>
@@ -15,12 +8,17 @@
import { onMount } from 'svelte';
import Overview from '../../../components/Course/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import { setCourseData } from '../../../components/Course/store';
import { setCourseData, course } from '../../../components/Course/store';
import { fetchCourse } from '../../../utils/services/courses';
export let courseData;
export let courseId;
onMount(async () => {
setCourseData(courseData);
console.log(`overview courseId`, courseId);
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourseData(data);
});
</script>
src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte
+43 -41
View File
@@ -3,35 +3,10 @@
fetchCourse,
fetchLesson,
} from '../../../../../utils/services/courses';
let prevLessonId;
export async function preload({ params }, session) {
const { id: courseId, lessonParams = [] } = params;
const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
let courseData;
let lessonData;
if (!process.browser) {
const [course, lesson] = await Promise.all([
fetchCourse(courseId, session),
fetchLesson(lessonId),
]);
courseData = course.data;
lessonData = lesson.data;
} else if (prevLessonId && prevLessonId !== lessonId) {
const lesson = await fetchLesson(lessonId);
lessonData = lesson.data;
}
prevLessonId = lessonId;
return {
courseData,
lessonData,
isMaterialsTabActive: !exerciseRouteName,
lessonId,
exerciseId,
params,
};
}
</script>
@@ -47,21 +22,54 @@
import Materials from '../../../../../components/Course/components/Lesson/Materials/index.svelte';
import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
import MODES from '../../../../../utils/constants/mode.js';
import { setCourseData } from '../../../../../components/Course/store';
import {
setCourseData,
course,
} from '../../../../../components/Course/store';
import { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
export let courseData;
export let lessonData;
export let params;
export let lessonId;
export let exerciseId;
export let isMaterialsTabActive;
let path;
let mode = MODES.view;
let prevLessonId;
const { page } = stores();
function setLesson() {
async function fetchReqData() {
const { id: courseId, lessonParams = [] } = params;
const [_lessonId, exerciseRouteName, _exerciseId] = lessonParams;
let courseData;
let lessonData;
if (!$course.id) {
const [_course, lesson] = await Promise.all([
fetchCourse(courseId),
fetchLesson(_lessonId),
]);
courseData = _course.data;
lessonData = lesson.data;
} else if (prevLessonId && prevLessonId !== _lessonId) {
const lesson = await fetchLesson(_lessonId);
lessonData = lesson.data;
}
prevLessonId = _lessonId;
lessonId = _lessonId;
exerciseId = _exerciseId;
isMaterialsTabActive = !exerciseRouteName;
setCourseData(courseData);
setLesson(lessonData);
}
function setLesson(lessonData) {
if (!lessonData) return;
lesson.update((l) => ({
@@ -71,19 +79,13 @@
}));
}
onMount(() => {
setCourseData(courseData);
setLesson();
});
afterUpdate(setLesson);
$: path = $page.path.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
$: {
if (lessonId) {
console.log(`params`, params);
if (params) {
mode = MODES.view;
fetchReqData();
}
}
</script>
@@ -119,8 +121,8 @@
{#if !isMaterialsTabActive}
<Exercises {lessonId} {exerciseId} path={`${path}/exercises`} />
{:else}
<PageBody width="w-11/12 m-auto">
{:else if !!lessonId}
<PageBody>
<Materials {lessonId} {mode} />
</PageBody>
{/if}
src/routes/courses/[id]/lessons/index.svelte
+11 -19
View File
@@ -1,17 +1,6 @@
<script context="module">
import { fetchCourse } from '../../../../utils/services/courses';
export async function preload({ params }, session) {
if (process.browser) {
return {};
}
const {
data,
// error
} = await fetchCourse(params.id, session);
return { courseData: data };
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
@@ -30,6 +19,7 @@
import TextField from '../../../../components/Form/TextField.svelte';
import IconButton from '../../../../components/IconButton/index.svelte';
import Select from '../../../../components/Form/Select.svelte';
import { fetchCourse } from '../../../../utils/services/courses';
import CourseContainer from '../../../../components/CourseContainer/index.svelte';
import {
lessons,
@@ -43,7 +33,7 @@
group,
} from '../../../../components/Course/store';
export let courseData;
export let courseId;
let lessonEditing;
let ref;
@@ -88,8 +78,10 @@
}, 100);
}
onMount(() => {
setCourseData(courseData);
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourseData(data);
});
$: console.log(`$lessons`, $lessons);
@@ -106,12 +98,12 @@
</div>
</PageNav>
<PageBody width="w-11/12 m-auto">
<div class="w-4/5 mt-4 m-auto">
<PageBody>
<div class="w-11/12 mt-4 m-auto">
{#each $lessons as lesson, index}
<div
bind:this={ref}
class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mr-4 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
>
<!-- Complete or Not complete icon -->
<div class="absolute -left-6 -top-6 success">
src/routes/courses/[id]/people.svelte
+67 -51
View File
@@ -1,71 +1,87 @@
<script context="module">
import { fetchCourse } from '../../../utils/services/courses';
export async function preload({ params }, session) {
if (process.browser) {
return {};
}
const {
data,
// error
} = await fetchCourse(params.id, session);
return { courseData: data };
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
<script>
<script lang="ts">
import { onMount } from 'svelte';
import { stores } from '@sapper/app';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import UserCard from '../../../components/UserCard/index.svelte';
import { setCourseData } from '../../../components/Course/store';
import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData, course } from '../../../components/Course/store';
import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
import { invitationModal } from '../../../components/Course/components/People/store';
import type { Person } from '../../../components/Course/components/People/types';
import { ROLE_LABEL } from '../../../utils/constants/roles';
export let courseData = {};
export let courseId: string = '';
const { page } = stores();
let people: Array<Person> = [];
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
const teachers = [];
const students = [...teachers, ...teachers, ...teachers];
function setPeople(group) {
if (!group) return;
const { students, tutors } = group;
people = [...students, ...tutors].sort((a, b) => a.role_id - b.role_id);
console.log(`group changed`, group);
}
onMount(() => {
setCourseData(courseData);
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourseData(data);
});
$: setPeople($course.group);
</script>
<CourseContainer>
<PageNav title="People" disableSticky={true} />
<div class="m-3">
<h3>
<a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
</h3>
<div class="flex flex-wrap">
{#each teachers as teacher}
<UserCard
name={teacher.name}
avatarUrl={teacher.avatar}
title={teacher.title}
telegramLink={teacher.telegramLink}
mailLink={teacher.mailLink}
/>
{/each}
</div>
</div>
<InviationModal />
<div class="m-3">
<h3>
<a id="students" name="students" href="{$page.path}#students">Students</a>
</h3>
<div class="flex flex-wrap">
{#each students as student}
<UserCard
name={student.name}
avatarUrl={student.avatar}
title={student.title}
/>
<CourseContainer>
<PageNav title="People" disableSticky={true}>
<slot:fragment slot="widget">
<PrimaryButton
className="mr-2"
label="Add"
onClick={() => ($invitationModal.open = true)}
/>
</slot:fragment>
</PageNav>
<PageBody className="">
<div class="table rounded-md border border-gray-300 w-11/12 m-auto">
<div
class="flex items-center justify-evenly font-bold border-t-0 {borderBottomGrey} p-3"
>
<span class="mr-2">No</span>
<!-- <span class="flex-grow" /> -->
<p class="text-lg w-1/4">Name</p>
<p class="text-lg w-1/4">Email</p>
<p class="text-lg w-1/4 ">Role</p>
</div>
{#each people as person, index}
<div
class="flex items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
>
<span class="mr-2">{index + 1}</span>
<!-- <span class="flex-grow" /> -->
{#if person.profile}
<p class="text-lg w-1/4 break-all">{person.profile.fullname}</p>
{:else}
<p
class="bg-yellow-500 w-1/4 text-sm text-center rounded-xl text-white"
>
Pending confirmation
</p>
{/if}
<p class="text-lg w-1/4 break-all">{person.email}</p>
<p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
</div>
{/each}
</div>
</div>
</PageBody>
</CourseContainer>
src/routes/courses/[id]/scoreboard.svelte
+2
View File
@@ -19,6 +19,7 @@
import { onMount } from 'svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData } from '../../../components/Course/store';
export let courseData = {};
@@ -30,4 +31,5 @@
<CourseContainer>
<PageNav title="Scoreboard" />
<PageBody />
</CourseContainer>
src/routes/courses/[id]/timetable.svelte
+2
View File
@@ -19,6 +19,7 @@
import { onMount } from 'svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData } from '../../../components/Course/store';
export let courseData = {};
@@ -30,4 +31,5 @@
<CourseContainer>
<PageNav title="Timetable" />
<PageBody />
</CourseContainer>