rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: dashboard left bar improvements

Browse source
This commit is contained in:
swve 2023-12-13 18:43:46 +01:00
parent 3413e6ca73
commit 6fea7ec1af
16 changed files with 124 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

62
apps/web/components/Dashboard/UI/LeftMenu.tsx
View file

@ -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 (
<div
style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.00) 100%), #2E2D2D" }}
className='flex flex-col w-20 justifiy-center bg-black h-screen justify-center text-white'>
<div className='flex flex-col space-y-5 items-center mx-auto'>
<ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right' >
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
</ToolTip>
<ToolTip content={"Home"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
</ToolTip>
<ToolTip content={"Courses"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
</ToolTip>
className='flex flex-col w-24 bg-black h-screen text-white shadow-xl'>
<div className='flex flex-col h-full'>
<div className='flex h-20 mt-6'>
<Link className='mx-auto' href={"/dash"}>
<Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
</Link>
</div>
<div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
<ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right' >
<Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
</ToolTip>
<ToolTip content={"Home"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
</ToolTip>
<ToolTip content={"Courses"} slateBlack sideOffset={8} side='right' >
<Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><Book size={18} /></Link>
</ToolTip>
</div>
<div className='flex flex-col mx-auto pb-7 space-y-2'>
<Link href={'/dash/user/settings'} className='py-3'>
<Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
</Link>
<div className="flex items-center">
<div className="mx-auto shadow-lg">
<Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
</div>
</div>
<div className="text-xs px-4 text-gray-200 ">{auth.user.username}</div>
</div>
</div>

2
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -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";

2
apps/web/components/Objects/Modals/Feedback/Feedback.tsx
View file

@ -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) => {

58
apps/web/components/Security/AuthContext.tsx Normal file
View file

@ -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<Auth>({ 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 (
<AuthContext.Provider value={auth}>
{children}
</AuthContext.Provider>
)
}
export function useAuth() {
return React.useContext(AuthContext);
}
export default AuthProvider

0
apps/web/components/Security/AuthProvider.tsx → apps/web/components/Security/AuthProviderDepreceated.tsx
View file

2
apps/web/components/Security/AuthenticatedClientElement.tsx
View file

@ -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";

2
apps/web/components/Security/HeaderProfileBox.tsx
View file

@ -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";