From 85ac3249279d86ba3266c64a98d8cf03d2afd93b Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 22 Jan 2023 19:12:12 +0100 Subject: [PATCH] feat: add activity page --- front/app/_orgs/[orgslug]/activity/page.tsx | 124 ++++++++++++++++++++ front/components/UI/Elements/Menu.tsx | 14 ++- front/package-lock.json | 37 ++++++ front/package.json | 1 + front/services/courses/activity.ts | 9 ++ front/services/utils/requests.ts | 1 + 6 files changed, 180 insertions(+), 6 deletions(-) create mode 100644 front/app/_orgs/[orgslug]/activity/page.tsx diff --git a/front/app/_orgs/[orgslug]/activity/page.tsx b/front/app/_orgs/[orgslug]/activity/page.tsx new file mode 100644 index 00000000..5228795c --- /dev/null +++ b/front/app/_orgs/[orgslug]/activity/page.tsx @@ -0,0 +1,124 @@ +"use client"; +import { getBackendUrl } from "@services/config"; +import { getActivities } from "@services/courses/activity"; +import { getOrganizationContextInfo } from "@services/orgs"; +import { RequestBody } from "@services/utils/requests"; +import React from "react"; +import { styled } from "styled-components"; +import useSWR from "swr"; + +function Activity(params: any) { + let orgslug = params.params.orgslug; + const [isLoading, setIsLoading] = React.useState(true); + const [activities, setActivities] = React.useState([]); + + async function fetchActivities() { + setIsLoading(true); + const org = await getOrganizationContextInfo(orgslug); + const activities = await getActivities(org.org_id); + console.log(activities); + + setActivities(activities); + setIsLoading(false); + } + React.useEffect(() => { + fetchActivities(); + }, []); + + return ( + +

Activity

+
+ {isLoading ? ( +
Loading...
+ ) : ( +
+ {activities.map((activity: any) => ( + + + + + + + +

Course

+

{activity.course.name}

+ + + + + ))} +
+ )} + + ); +} + +export default Activity; + +const ActivityLayout = styled.div` + display: flex; + margin: 0 auto; + width: 1300px; + height: 100%; + flex-direction: column; +`; + +const ActivityMetadata = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; +`; +const ActivityBox = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + margin-top: 20px; + margin-bottom: 20px; + padding: 15px; + border-radius: 7px; + box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.206); + background: #ffffff; +`; + +const ActivityThumbnail = styled.div` + padding-right: 30px; + height: 100%; + border-radius: 7px 0px 0px 7px; + + img { + width: 60px; + border-radius: 7px; + } +`; + +const ActivityInfo = styled.div` + width: 100%; + height: 100%; + background: #ffffff; + border-radius: 0px 7px 7px 0px; + + h2 { + font-size: 12px; + color: #2b2b2b; + padding: 0; + margin: 0; + } + + h3 { + font-size: 23px; + color: #2b2b2b; + padding: 0; + margin: 0; + } +`; + +const ActivityProgress = styled.div` + margin-top: 10px; + border-radius: 20px; + height: 10px; + width: ${(props: any) => props.progress + "%"}; + background: #06a487; +`; diff --git a/front/components/UI/Elements/Menu.tsx b/front/components/UI/Elements/Menu.tsx index 44b15afe..facbe583 100644 --- a/front/components/UI/Elements/Menu.tsx +++ b/front/components/UI/Elements/Menu.tsx @@ -7,10 +7,9 @@ import learnhouseLogo from "public/learnhouse_logo.png"; import Link from "next/link"; import Image from "next/image"; import { useRouter, useSearchParams } from "next/navigation"; -import { headers } from 'next/headers'; - -export const Menu = ({orgslug } : any) => { +import { headers } from "next/headers"; +export const Menu = ({ orgslug }: any) => { return ( @@ -30,12 +29,15 @@ export const Menu = ({orgslug } : any) => {
  • - Courses + Courses
  • - Collections + Collections +
    • +
  • + {" "} + Activity
    • -
  • Activity
  • More
 diff --git a/front/package-lock.json b/front/package-lock.json index 8a2578e7..57229587 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -24,6 +24,7 @@ "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "styled-components": "^6.0.0-beta.9", + "swr": "^2.0.1", "y-indexeddb": "^9.0.9", "y-webrtc": "^10.2.3", "yjs": "^13.5.42" @@ -6731,6 +6732,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swr": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.1.tgz", + "integrity": "sha512-6z4FpS9dKAay7axedlStsPahEw25nuMlVh4GHkuPpGptbmEEP8v/+kr0GkAE/7ErUs25U2VFOnZQz3AWfkmXdw==", + "dependencies": { + "use-sync-external-store": "^1.2.0" + }, + "engines": { + "pnpm": "7" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/synckit": { "version": "0.8.4", "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz", @@ -7014,6 +7029,14 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -11817,6 +11840,14 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "swr": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.1.tgz", + "integrity": "sha512-6z4FpS9dKAay7axedlStsPahEw25nuMlVh4GHkuPpGptbmEEP8v/+kr0GkAE/7ErUs25U2VFOnZQz3AWfkmXdw==", + "requires": { + "use-sync-external-store": "^1.2.0" + } + }, "synckit": { "version": "0.8.4", "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz", @@ -12008,6 +12039,12 @@ "tslib": "^2.0.0" } }, + "use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "requires": {} + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/front/package.json b/front/package.json index f9ef7153..a310c591 100644 --- a/front/package.json +++ b/front/package.json @@ -25,6 +25,7 @@ "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "styled-components": "^6.0.0-beta.9", + "swr": "^2.0.1", "y-indexeddb": "^9.0.9", "y-webrtc": "^10.2.3", "yjs": "^13.5.42" diff --git a/front/services/courses/activity.ts b/front/services/courses/activity.ts index 0185e5d1..e6fa9ebf 100644 --- a/front/services/courses/activity.ts +++ b/front/services/courses/activity.ts @@ -29,3 +29,12 @@ export async function maskLectureAsComplete(org_id: string, course_id: string, l .catch((error) => console.log("error", error)); return result; } + +// get all activities +export async function getActivities(org_id: string) { + const result: any = await fetch(`${getAPIUrl()}activity/${org_id}/activities`, RequestBody("GET", null)) + .then((result) => result.json()) + .catch((error) => console.log("error", error)); + return result; +} + diff --git a/front/services/utils/requests.ts b/front/services/utils/requests.ts index a13fc876..df32b5e3 100644 --- a/front/services/utils/requests.ts +++ b/front/services/utils/requests.ts @@ -11,3 +11,4 @@ export const RequestBody = (method: string, data: any) => { } return options; }; +