Merge pull request #75 from learnhouse/swve/eng-29-fix-chapters-black-dots-css-issue

fix chapters black dots css issue

config/config.py

@@ -103,6 +103,9 @@ def get_learnhouse_config() -> LearnHouseConfig:
         'database_config', {}).get('mongodb_connection_string')
 
     # Sentry config
+    # check if the sentry config is provided in the YAML file
+    sentry_config_verif = yaml_config.get('hosting_config', {}).get('sentry_config') or env_sentry_dsn or env_sentry_environment or env_sentry_release or None
+
     sentry_dsn = env_sentry_dsn or yaml_config.get(
         'hosting_config', {}).get('sentry_config', {}).get('dsn')
     sentry_environment = env_sentry_environment or yaml_config.get(
@@ -110,11 +113,16 @@ def get_learnhouse_config() -> LearnHouseConfig:
     sentry_release = env_sentry_release or yaml_config.get(
         'hosting_config', {}).get('sentry_config', {}).get('release')
 
-    sentry_config = SentryConfig(
+    if sentry_config_verif:
-        dsn=sentry_dsn,
+        sentry_config = SentryConfig(
-        environment=sentry_environment,
+            dsn=sentry_dsn,
-        release=sentry_release
+            environment=sentry_environment,
-    )
+            release=sentry_release
+        )
+    else:
+        sentry_config = None
+  
+  
 
     # Create HostingConfig and DatabaseConfig objects
     hosting_config = HostingConfig(

config/config.yaml

@@ -8,10 +8,6 @@ hosting_config:
   ssl: true
   use_default_org: false
   default_org: learnhouse
-  sentry_config:
-    dsn: "https://1a6aa22656224851af492aae5d4155a1@o4505007882436608.ingest.sentry.io/4505007884599296"
-    environment: dev
-    release: "0.1.0"
   allowed_origins:
     - http://localhost:3000
     - http://localhost:3001

front/app/_orgs/[orgslug]/(withmenu)/collections/new/page.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Title } from "@components/UI/Elements/Styles/Title";
 import { createCollection } from "@services/courses/collections";
 import useSWR from "swr";
-import { getAPIUrl } from "@services/config/config";
+import { getAPIUrl, getUriWithOrg } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 
@@ -44,7 +44,7 @@ function NewCollection(params : any) {
       org_id: org.org_id,
     };
     await createCollection(collection);
-    router.push("/org/" + orgslug + "/collections");
+    router.push(getUriWithOrg(orgslug, "/collections"));
   };
 
 

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx

@@ -5,13 +5,14 @@ import React, { useMemo } from "react";
 import { getActivity } from "@services/courses/activities";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
 import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
-import styled from "styled-components"; 
+import styled from "styled-components";
 import { getCourse } from "@services/courses/courses";
 import VideoActivity from "@components/Pages/Activities/Video/Video";
 import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { markActivityAsComplete } from "@services/courses/activity";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 function ActivityPage(params: any) {
   const activityid = params.params.activityid;
@@ -37,7 +38,7 @@ function ActivityPage(params: any) {
         <ActivityLayout>
           <ActivityTopWrapper>
             <ActivityThumbnail>
-              <Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}`}>
+              <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
                 <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
               </Link>
             </ActivityThumbnail>
@@ -53,11 +54,14 @@ function ActivityPage(params: any) {
                   <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
                     {chapter.activities.map((activity: any) => {
                       return (
-                        <>
+                        <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
-                          <Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
+                          <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                            <ChapterIndicator key={activity.id} />
+                            <ChapterIndicator
-                          </Link>{" "}
+                              done={course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
-                        </>
+                              active={"activity_" + activityid === activity.id ? true : false} key={activity.id}
+                            />
+                          </Link>
+                        </ToolTip>
                       );
                     })}
                   </div>
@@ -74,10 +78,10 @@ function ActivityPage(params: any) {
               {activity.type == "video" && <VideoActivity course={course} activity={activity} />}
 
               <ActivityMarkerWrapper>
-                
+
                 {course.trail.activities_marked_complete &&
-                course.trail.activities_marked_complete.includes("activity_" + activityid) &&
+                  course.trail.activities_marked_complete.includes("activity_" + activityid) &&
-                course.trail.status == "ongoing" ? (
+                  course.trail.status == "ongoing" ? (
                   <button style={{ backgroundColor: "green" }}>
                     <i>
                       <Check size={20}></Check>
@@ -131,28 +135,26 @@ const ChaptersWrapper = styled.div`
   display: flex;
   // row
   flex-direction: row;
-  justify-content: space-around;
   width: 100%;
   width: 1300px;
   margin: 0 auto;
 `;
 
-const ChapterIndicator = styled.div`
+const ChapterIndicator = styled.div < { active?: boolean, done?: boolean } > `
   border-radius: 20px;
   height: 5px;
   background: #151515;
   border-radius: 3px;
 
   width: 35px;
-  background-color: black;
+  background-color: ${props => props.done ? "green" : (props.active ? "#9d9d9d" : "black")};
   margin: 10px;
   margin-bottom: 0px;
   margin-left: 0px;
-  transition: all 0.2s ease;
 
   &:hover {
-    width: 50px;
     cursor: pointer;
+    background-color: #9d9d9d;
   }
 `;
 

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx

@@ -8,12 +8,13 @@ import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { useRouter } from "next/navigation";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 const CourseIdPage = (params: any) => {
   const courseid = params.params.courseid;
   const orgslug = params.params.orgslug;
   const router = useRouter();
-  
+
   const { data: course, error: error } = useSWR(`${getAPIUrl()}courses/meta/course_${courseid}`,
     (url: string, body: any) => swrFetcher(url, body, router)
   );
@@ -54,18 +55,22 @@ const CourseIdPage = (params: any) => {
           <ChaptersWrapper>
             {course.chapters.map((chapter: any) => {
               return (
-                <>
+                <ChapterSeparator key={chapter}>
                   {chapter.activities.map((activity: any) => {
                     return (
                       <>
-                        <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
+                        <ToolTip sideOffset={-18} slateBlack content={activity.name}>
-                          <ChapterIndicator />
+                          <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                        </Link>{" "}
+                          <CourseIndicator
+                              done={course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
+                             />
+                          </Link>
+                        </ToolTip>
+                        
                       </>
                     );
                   })}
-                  &nbsp;&nbsp;&nbsp;&nbsp;
+                </ChapterSeparator>
-                </>
               );
             })}
           </ChaptersWrapper>
@@ -93,12 +98,12 @@ const CourseIdPage = (params: any) => {
                 {course.chapters.map((chapter: any) => {
                   return (
                     <>
-                      <h3>Chapter : {chapter.name}</h3>
+                      <h3>{chapter.name}</h3>
                       {chapter.activities.map((activity: any) => {
                         return (
                           <>
                             <p>
-                              Activity {activity.name}
+                              {activity.name}
                               <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
                                 <EyeOpenIcon />
                               </Link>{" "}
@@ -161,28 +166,33 @@ const CoursePageLayout = styled.div`
 
 const ChaptersWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
   width: 100%;
 `;
-const ChapterIndicator = styled.div`
+const CourseIndicator = styled.div< { active?: boolean, done?: boolean } >`
   border-radius: 20px;
   height: 5px;
   background: #151515;
   border-radius: 3px;
 
-  width: 35px;
+  background-color: ${props => props.done ? "green" : "black"};
-  background-color: black;
+
+  width: 40px;
   margin: 10px;
   margin-bottom: 20px;
   margin-left: 0px;
-  transition: all 0.2s ease;
 
   &:hover {
-    width: 50px;
     cursor: pointer;
+    background-color: #9d9d9d;
   }
 `;
 
+const ChapterSeparator = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding-right: 7px;
+`;
+
 const BoxWrapper = styled.div`
   background: #ffffff;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);

front/components/Editor/Editor.tsx

@@ -20,7 +20,6 @@ import Youtube from "@tiptap/extension-youtube";
 import VideoBlock from "./Extensions/Video/VideoBlock";
 import { Save } from "lucide-react";
 import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
-import PDFBlockComponent from "./Extensions/PDF/PDFBlockComponent";
 import PDFBlock from "./Extensions/PDF/PDFBlock";
 import QuizBlock from "./Extensions/Quiz/QuizBlock";
 

front/components/Editor/Toolbar/ToolbarButtons.tsx

@@ -56,7 +56,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         <option value="6">Heading 6</option>
       </ToolSelect>
       {/* TODO: fix this : toggling only works one-way */}
-      <DividerVerticalIcon style={{margin:"auto", color : "grey"}}/>
+      <DividerVerticalIcon style={{marginTop:"auto", marginBottom:"auto", color : "grey"}}/>
       <ToolTip content={"Info Callout"}>
         <ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutInfo").run()}>
           <AlertCircle size={15} />

front/components/UI/Tooltip/Tooltip.tsx

@@ -5,22 +5,24 @@ import { violet, blackA } from '@radix-ui/colors';
 import { PlusIcon } from '@radix-ui/react-icons';
 
 
-type TooltipParams = {
+type TooltipProps = {
     sideOffset?: number;
     content: React.ReactNode;
     children: React.ReactNode;
+    slateBlack?: boolean;
 };
 
-const ToolTip = (params: TooltipParams) => {
+const ToolTip = (props: TooltipProps) => {
+  
   return (
     <Tooltip.Provider delayDuration={200}>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          {params.children}
+          {props.children}
         </Tooltip.Trigger>
         <Tooltip.Portal>
-          <TooltipContent side="bottom" sideOffset={params.sideOffset}>
+          <TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
-            {params.content}
+            {props.content}
             <TooltipArrow />
           </TooltipContent>
         </Tooltip.Portal>
@@ -55,6 +57,16 @@ const closeAndFade = keyframes({
 });
 
 const TooltipContent = styled(Tooltip.Content, {
+
+  variants : {
+    slateBlack: {
+      true: {
+        backgroundColor:" #5a5a5a",
+        color: 'white',
+      },
+    },
+  },
+
   borderRadius: 4,
   padding: '5px 10px',
   fontSize: 12,

src/services/courses/collections.py

@@ -156,7 +156,7 @@ async def verify_collection_rights(request: Request,collection_id: str,  current
         raise HTTPException(
             status_code=status.HTTP_409_CONFLICT, detail="Collection does not exist")
 
-    hasRoleRights = await verify_user_rights_with_roles(request, action, current_user.user_id, collection_id)
+    hasRoleRights = await verify_user_rights_with_roles(request, action, current_user.user_id, collection_id, collection["org_id"])
 
     if not hasRoleRights:
         raise HTTPException(

src/services/orgs.py

@@ -149,6 +149,12 @@ async def get_orgs_by_user(request: Request, user_id: str, page: int = 1, limit:
     orgs = request.app.db["organizations"]
     user = request.app.db["users"]
 
+    if user_id is "anonymous":
+
+        # raise error 
+        raise HTTPException(
+            status_code=status.HTTP_409_CONFLICT, detail="User not logged in")
+    
     # get user orgs
     user_orgs = await user.find_one({"user_id": user_id})