mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add activity page
This commit is contained in:
swve
parent
032f8334ec
commit
85ac324927
6 changed files with 180 additions and 6 deletions
124
front/app/_orgs/[orgslug]/activity/page.tsx
Normal file
124
front/app/_orgs/[orgslug]/activity/page.tsx
Normal file
|
|
@ -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 (
|
||||
<ActivityLayout>
|
||||
<h1>Activity</h1>
|
||||
<br />
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<div>
|
||||
{activities.map((activity: any) => (
|
||||
<ActivityBox key={activity.activity_id}>
|
||||
|
||||
<ActivityMetadata>
|
||||
<ActivityThumbnail>
|
||||
<img src={`${getBackendUrl()}content/uploads/img/${activity.course.thumbnail}`}></img>
|
||||
</ActivityThumbnail>
|
||||
<ActivityInfo>
|
||||
<h2>Course</h2>
|
||||
<h3>{activity.course.name}</h3>
|
||||
</ActivityInfo>
|
||||
</ActivityMetadata>
|
||||
<ActivityProgress progress={activity.progression} />
|
||||
</ActivityBox>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ActivityLayout>
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
`;
|
||||
|
|
@ -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 (
|
||||
<GlobalHeader>
|
||||
<LogoArea>
|
||||
|
|
@ -30,12 +29,15 @@ export const Menu = ({orgslug } : any) => {
|
|||
<MenuArea>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href={ "/courses"}>Courses</Link>
|
||||
<Link href={"/courses"}>Courses</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={ "/collections"}>Collections</Link>
|
||||
<Link href={"/collections"}>Collections</Link>
|
||||
</li>
|
||||
<li>
|
||||
{" "}
|
||||
<Link href={"/activity"}>Activity</Link>
|
||||
</li>
|
||||
<li>Activity</li>
|
||||
<li>More</li>
|
||||
</ul>
|
||||
</MenuArea>
|
||||
|
|
|
|||
37
front/package-lock.json
generated
37
front/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,4 @@ export const RequestBody = (method: string, data: any) => {
|
|||
}
|
||||
return options;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue