Merge pull request #90 from learnhouse/swve/eng-33-use-error-panels-to-show-errors

Add error pages

front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/error.tsx

@@ -0,0 +1,23 @@
+'use client'; // Error components must be Client Components
+
+import ErrorUI from '@components/UI/Error/Error';
+import { useEffect } from 'react';
+ 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+ 
+  return (
+    <div>
+      <ErrorUI></ErrorUI>
+    </div>
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/error.tsx

@@ -0,0 +1,23 @@
+'use client'; // Error components must be Client Components
+
+import ErrorUI from '@components/UI/Error/Error';
+import { useEffect } from 'react';
+ 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+ 
+  return (
+    <div>
+      <ErrorUI></ErrorUI>
+    </div>
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/courses/error.tsx

@@ -0,0 +1,23 @@
+'use client'; // Error components must be Client Components
+
+import ErrorUI from '@components/UI/Error/Error';
+import { useEffect } from 'react';
+ 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+ 
+  return (
+    <div>
+      <ErrorUI></ErrorUI>
+    </div>
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/courses/page.tsx

@@ -24,7 +24,7 @@ export async function generateMetadata(
 
 const CoursesPage = async (params: any) => {
   const orgslug = params.params.orgslug;
-  const courses = await getOrgCourses(orgslug, { revalidate: 360, tags: ['courses'] });
+  const courses = await getOrgCourses(orgslug, { revalidate: 0, tags: ['courses'] });
 
   return (
     <div>

front/app/orgs/[orgslug]/(withmenu)/error.tsx

@@ -0,0 +1,23 @@
+'use client'; // Error components must be Client Components
+
+import ErrorUI from '@components/UI/Error/Error';
+import { useEffect } from 'react';
+ 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+ 
+  return (
+    <div>
+      <ErrorUI></ErrorUI>
+    </div>
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/page.tsx

@@ -10,6 +10,7 @@ import { getOrgCollections, getOrgCollectionsWithAuthHeader } from "@services/co
 import { getOrganizationContextInfo } from '@services/organizations/orgs';
 
 import { cookies } from 'next/headers';
+import Error from '@components/UI/Error/Error';
 
 type MetadataProps = {
   params: { orgslug: string };
@@ -45,6 +46,7 @@ const OrgHomePage = async (params: any) => {
 
   return (
     <div>
+      <Error  ></Error>
       <div className="max-w-7xl mx-auto px-4 py-10">
         {/* Collections */}
         <Title title="Collections" type="col" />

front/components/UI/Error/Error.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+function ErrorUI() {
+    return (
+        <div className='flex items-center justify-center h-screen'>
+            <div className='mx-auto bg-red-100 w-[800px] p-3 rounded-xl m-5 '>
+            <div className='flex flex-row'>
+                <div className='p-3 pr-4' >
+                    <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V15C2 15.7956 2.31607 16.5587 2.87868 17.1213C3.44129 17.6839 4.20435 18 5 18H16.59L20.29 21.71C20.3834 21.8027 20.4943 21.876 20.6161 21.9258C20.7379 21.9755 20.8684 22.0008 21 22C21.1312 22.0034 21.2613 21.976 21.38 21.92C21.5626 21.845 21.7189 21.7176 21.8293 21.5539C21.9396 21.3901 21.999 21.1974 22 21V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 18.59L17.71 16.29C17.6166 16.1973 17.5057 16.124 17.3839 16.0742C17.2621 16.0245 17.1316 15.9992 17 16H5C4.73478 16 4.48043 15.8946 4.29289 15.7071C4.10536 15.5196 4 15.2652 4 15V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V18.59ZM12 12C11.8022 12 11.6089 12.0586 11.4444 12.1685C11.28 12.2784 11.1518 12.4346 11.0761 12.6173C11.0004 12.8 10.9806 13.0011 11.0192 13.1951C11.0578 13.3891 11.153 13.5673 11.2929 13.7071C11.4327 13.847 11.6109 13.9422 11.8049 13.9808C11.9989 14.0194 12.2 13.9996 12.3827 13.9239C12.5654 13.8482 12.7216 13.72 12.8315 13.5556C12.9414 13.3911 13 13.1978 13 13C13 12.7348 12.8946 12.4804 12.7071 12.2929C12.5196 12.1054 12.2652 12 12 12ZM12 6C11.7348 6 11.4804 6.10536 11.2929 6.29289C11.1054 6.48043 11 6.73478 11 7V10C11 10.2652 11.1054 10.5196 11.2929 10.7071C11.4804 10.8946 11.7348 11 12 11C12.2652 11 12.5196 10.8946 12.7071 10.7071C12.8946 10.5196 13 10.2652 13 10V7C13 6.73478 12.8946 6.48043 12.7071 6.29289C12.5196 6.10536 12.2652 6 12 6Z" fill="#CC0505" />
+                    </svg>
+                </div>
+                <div className='p-3 '>
+                    <h1 className='text-2xl font-bold text-red-600'>Error</h1>
+                    <p className='pt-0 text-md text-red-600'>Something went wrong</p>
+                </div>
+            </div>
+        </div>
+        </div>
+    )
+}
+
+export default ErrorUI