From 6fea7ec1afe9143d610f4afcc38a3a5301710084 Mon Sep 17 00:00:00 2001 From: swve Date: Wed, 13 Dec 2023 18:43:46 +0100 Subject: [PATCH] feat: dashboard left bar improvements --- .../activity/[activityid]/edit/page.tsx | 2 +- apps/web/app/organizations/page.tsx | 2 +- .../app/orgs/[orgslug]/(withmenu)/layout.tsx | 2 +- apps/web/app/orgs/[orgslug]/dash/layout.tsx | 2 +- apps/web/app/orgs/[orgslug]/layout.tsx | 11 ++-- .../settings/account/passwords/passwords.tsx | 2 +- .../settings/account/profile/profile.tsx | 2 +- .../app/orgs/[orgslug]/settings/layout.tsx | 2 +- apps/web/components/Dashboard/UI/LeftMenu.tsx | 62 ++++++++++++++---- apps/web/components/Objects/Editor/Editor.tsx | 2 +- .../Objects/Modals/Feedback/Feedback.tsx | 2 +- apps/web/components/Security/AuthContext.tsx | 58 ++++++++++++++++ ...ovider.tsx => AuthProviderDepreceated.tsx} | 0 .../Security/AuthenticatedClientElement.tsx | 2 +- .../components/Security/HeaderProfileBox.tsx | 2 +- apps/web/public/dashLogo.png | Bin 0 -> 2532 bytes 16 files changed, 124 insertions(+), 29 deletions(-) create mode 100644 apps/web/components/Security/AuthContext.tsx rename apps/web/components/Security/{AuthProvider.tsx => AuthProviderDepreceated.tsx} (100%) create mode 100644 apps/web/public/dashLogo.png diff --git a/apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx b/apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx index 8a799264..3f40f150 100644 --- a/apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx +++ b/apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx @@ -1,5 +1,5 @@ import { default as React, } from "react"; -import AuthProvider from "@components/Security/AuthProvider"; +import AuthProvider from "@components/Security/AuthProviderDepreceated"; import EditorWrapper from "@components/Objects/Editor/EditorWrapper"; import { getCourseMetadataWithAuthHeader } from "@services/courses/courses"; import { cookies } from "next/headers"; diff --git a/apps/web/app/organizations/page.tsx b/apps/web/app/organizations/page.tsx index e2654448..009c0b19 100644 --- a/apps/web/app/organizations/page.tsx +++ b/apps/web/app/organizations/page.tsx @@ -5,7 +5,7 @@ import { deleteOrganizationFromBackend } from "@services/organizations/orgs"; import useSWR, { mutate } from "swr"; import { swrFetcher } from "@services/utils/ts/requests"; import { getAPIUrl, getUriWithOrg } from "@services/config/config"; -import AuthProvider from "@components/Security/AuthProvider"; +import AuthProvider from "@components/Security/AuthProviderDepreceated"; const Organizations = () => { const { data: organizations, error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher) diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx index 5fa03f6a..41853379 100644 --- a/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx +++ b/apps/web/app/orgs/[orgslug]/(withmenu)/layout.tsx @@ -1,6 +1,6 @@ import "@styles/globals.css"; import { Menu } from "@components/Objects/Menu/Menu"; -import AuthProvider from "@components/Security/AuthProvider"; +import AuthProvider from "@components/Security/AuthProviderDepreceated"; export default function RootLayout({ children, params }: { children: React.ReactNode , params :any}) { return ( diff --git a/apps/web/app/orgs/[orgslug]/dash/layout.tsx b/apps/web/app/orgs/[orgslug]/dash/layout.tsx index b651d773..eb181267 100644 --- a/apps/web/app/orgs/[orgslug]/dash/layout.tsx +++ b/apps/web/app/orgs/[orgslug]/dash/layout.tsx @@ -1,5 +1,5 @@ import LeftMenu from '@components/Dashboard/UI/LeftMenu' -import AuthProvider from '@components/Security/AuthProvider' +import AuthProvider from '@components/Security/AuthProviderDepreceated' import React from 'react' function DashboardLayout({ children, params }: { children: React.ReactNode, params: any }) { diff --git a/apps/web/app/orgs/[orgslug]/layout.tsx b/apps/web/app/orgs/[orgslug]/layout.tsx index d43311a0..ce0f624f 100644 --- a/apps/web/app/orgs/[orgslug]/layout.tsx +++ b/apps/web/app/orgs/[orgslug]/layout.tsx @@ -1,5 +1,6 @@ 'use client'; import { OrgProvider } from "@components/Contexts/OrgContext"; +import AuthProvider from "@components/Security/AuthContext"; import { getAPIUrl } from "@services/config/config"; import { swrFetcher } from "@services/utils/ts/requests"; import "@styles/globals.css"; @@ -8,10 +9,12 @@ import useSWR from "swr"; export default function RootLayout({ children, params }: { children: React.ReactNode, params: any }) { return ( -
+
+ - {children} - -
+ {children} + + +
); } diff --git a/apps/web/app/orgs/[orgslug]/settings/account/passwords/passwords.tsx b/apps/web/app/orgs/[orgslug]/settings/account/passwords/passwords.tsx index 1b231b70..7f1d2028 100644 --- a/apps/web/app/orgs/[orgslug]/settings/account/passwords/passwords.tsx +++ b/apps/web/app/orgs/[orgslug]/settings/account/passwords/passwords.tsx @@ -1,5 +1,5 @@ "use client"; -import { AuthContext } from '@components/Security/AuthProvider'; +import { AuthContext } from '@components/Security/AuthProviderDepreceated'; import React, { useEffect } from 'react' import { Formik, Form, Field, ErrorMessage } from 'formik'; import { updatePassword } from '@services/settings/password'; diff --git a/apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx b/apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx index 8423de4f..d7a63ba5 100644 --- a/apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx +++ b/apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx @@ -1,5 +1,5 @@ "use client"; -import { AuthContext } from '@components/Security/AuthProvider'; +import { AuthContext } from '@components/Security/AuthProviderDepreceated'; import React, { useEffect } from 'react' import { Formik, Form, Field, ErrorMessage } from 'formik'; import { updateProfile } from '@services/settings/profile'; diff --git a/apps/web/app/orgs/[orgslug]/settings/layout.tsx b/apps/web/app/orgs/[orgslug]/settings/layout.tsx index b5e4a401..b52b99d5 100644 --- a/apps/web/app/orgs/[orgslug]/settings/layout.tsx +++ b/apps/web/app/orgs/[orgslug]/settings/layout.tsx @@ -3,7 +3,7 @@ import React, { createContext, useState } from 'react' import { styled } from '@stitches/react'; import Link from 'next/link'; import LearnHouseWhiteLogo from '@public/learnhouse_text_white.png'; -import AuthProvider, { AuthContext } from '@components/Security/AuthProvider'; +import AuthProvider, { AuthContext } from '@components/Security/AuthProviderDepreceated'; import Avvvatars from 'avvvatars-react'; import Image from 'next/image'; import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'; diff --git a/apps/web/components/Dashboard/UI/LeftMenu.tsx b/apps/web/components/Dashboard/UI/LeftMenu.tsx index fc563d71..a4bac0f1 100644 --- a/apps/web/components/Dashboard/UI/LeftMenu.tsx +++ b/apps/web/components/Dashboard/UI/LeftMenu.tsx @@ -1,33 +1,67 @@ 'use client'; import { useOrg } from '@components/Contexts/OrgContext'; +import { useAuth } from '@components/Security/AuthContext'; import ToolTip from '@components/StyledElements/Tooltip/Tooltip' -import { ArrowLeft, Book, Home } from 'lucide-react' +import LearnHouseDashboardLogo from '@public/dashLogo.png'; +import Avvvatars from 'avvvatars-react'; +import { ArrowLeft, Book, Home, Settings } from 'lucide-react' +import Image from 'next/image'; import Link from 'next/link' import React, { use, useEffect } from 'react' function LeftMenu() { const org = useOrg() as any; + const auth = useAuth() as any; + const [loading, setLoading] = React.useState(true); + + function waitForEverythingToLoad() { + if (org && auth) { + return true; + } + return false; + } useEffect(() => { - + if (waitForEverythingToLoad()) { + setLoading(false); + } } - , [org]) + , [loading]) return (
-
- - - - - - - - - + className='flex flex-col w-24 bg-black h-screen text-white shadow-xl'> +
+
+ + Learnhouse logo + +
+
+ + + + + + + + + +
+
+ + + +
+
+ +
+
+
{auth.user.username}
+ +
diff --git a/apps/web/components/Objects/Editor/Editor.tsx b/apps/web/components/Objects/Editor/Editor.tsx index a7d6b319..8b5dfb80 100644 --- a/apps/web/components/Objects/Editor/Editor.tsx +++ b/apps/web/components/Objects/Editor/Editor.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; -import { AuthContext } from "../../Security/AuthProvider"; +import { AuthContext } from "../../Security/AuthProviderDepreceated"; import learnhouseIcon from "public/learnhouse_icon.png"; import { ToolbarButtons } from "./Toolbar/ToolbarButtons"; import { motion } from "framer-motion"; diff --git a/apps/web/components/Objects/Modals/Feedback/Feedback.tsx b/apps/web/components/Objects/Modals/Feedback/Feedback.tsx index a4621d33..7276adea 100644 --- a/apps/web/components/Objects/Modals/Feedback/Feedback.tsx +++ b/apps/web/components/Objects/Modals/Feedback/Feedback.tsx @@ -4,7 +4,7 @@ import * as Form from '@radix-ui/react-form' import React, { useState } from "react"; import * as Sentry from '@sentry/browser'; import { CheckCircleIcon } from "lucide-react"; -import { AuthContext } from "@components/Security/AuthProvider"; +import { AuthContext } from "@components/Security/AuthProviderDepreceated"; import { randomUUID } from "crypto"; export const FeedbackModal = (user: any) => { diff --git a/apps/web/components/Security/AuthContext.tsx b/apps/web/components/Security/AuthContext.tsx new file mode 100644 index 00000000..a1742832 --- /dev/null +++ b/apps/web/components/Security/AuthContext.tsx @@ -0,0 +1,58 @@ +import { getNewAccessTokenUsingRefreshToken, getUserInfo } from '@services/auth/auth'; +import { getAPIUrl } from '@services/config/config'; +import { swrFetcher } from '@services/utils/ts/requests'; +import React, { useEffect } from 'react' +import useSWR from 'swr'; + +const AuthContext = React.createContext({}) + +type Auth = { + access_token: string; + isAuthenticated: boolean; + user: any; +} + +function AuthProvider({ children, orgslug }: { children: React.ReactNode, orgslug: string }) { + const [auth, setAuth] = React.useState({ access_token: "", isAuthenticated: false, user: {} }); + + async function checkRefreshToken() { + //deleteCookie("access_token_cookie"); + let data = await getNewAccessTokenUsingRefreshToken(); + if (data) { + return data.access_token; + } + } + + async function checkAuth() { + try { + let access_token = await checkRefreshToken(); + let userInfo = {}; + + if (access_token) { + userInfo = await getUserInfo(access_token); + setAuth({ access_token: access_token, isAuthenticated: true, user: userInfo }); + + } else { + setAuth({ access_token: access_token, isAuthenticated: false, user: userInfo }); + } + } catch (error) { + console.log(error); + } + } + + useEffect(() => { + checkAuth(); + }, []) + + return ( + + {children} + + ) +} + +export function useAuth() { + return React.useContext(AuthContext); +} + +export default AuthProvider \ No newline at end of file diff --git a/apps/web/components/Security/AuthProvider.tsx b/apps/web/components/Security/AuthProviderDepreceated.tsx similarity index 100% rename from apps/web/components/Security/AuthProvider.tsx rename to apps/web/components/Security/AuthProviderDepreceated.tsx diff --git a/apps/web/components/Security/AuthenticatedClientElement.tsx b/apps/web/components/Security/AuthenticatedClientElement.tsx index 602a3b2c..693aafec 100644 --- a/apps/web/components/Security/AuthenticatedClientElement.tsx +++ b/apps/web/components/Security/AuthenticatedClientElement.tsx @@ -1,6 +1,6 @@ 'use client'; import React from "react"; -import { AuthContext } from "./AuthProvider"; +import { AuthContext } from "./AuthProviderDepreceated"; import useSWR, { mutate } from "swr"; import { getAPIUrl } from "@services/config/config"; import { swrFetcher } from "@services/utils/ts/requests"; diff --git a/apps/web/components/Security/HeaderProfileBox.tsx b/apps/web/components/Security/HeaderProfileBox.tsx index 40752735..6f712198 100644 --- a/apps/web/components/Security/HeaderProfileBox.tsx +++ b/apps/web/components/Security/HeaderProfileBox.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import Link from "next/link"; -import { AuthContext } from "./AuthProvider"; +import { AuthContext } from "./AuthProviderDepreceated"; import Avvvatars from "avvvatars-react"; import { GearIcon } from "@radix-ui/react-icons"; diff --git a/apps/web/public/dashLogo.png b/apps/web/public/dashLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..c05773c2bffb48ee719d0959f544024e90fc9eb1 GIT binary patch literal 2532 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 literal 0 HcmV?d00001