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: major login and signup changes

Browse source
This commit is contained in:
swve 2024-06-04 23:12:01 +01:00
parent 5ca1ba75e1
commit 2ae8dbeba5
20 changed files with 217 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/components/Contexts/LHSessionContext.tsx
View file

@ -9,7 +9,6 @@ function LHSessionProvider({ children }: { children: React.ReactNode }) {
const session = useSession();
useEffect(() => {
console.log('useLHSession', session);
}, [])
@ -20,7 +19,6 @@ function LHSessionProvider({ children }: { children: React.ReactNode }) {
else if (session) {
return (
<SessionContext.Provider value={session}>
{console.log('rendered')}
{children}
</SessionContext.Provider>
)

73
apps/web/components/Contexts/OrgContext.tsx
View file

@ -1,51 +1,48 @@
'use client'
import { getAPIUrl } from '@services/config/config'
import { getAPIUrl, getUriWithoutOrg } from '@services/config/config'
import { swrFetcher } from '@services/utils/ts/requests'
import React, { useContext, useEffect, useState } from 'react'
import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'
import useSWR from 'swr'
import { createContext } from 'react'
import { useRouter } from 'next/navigation'
import { useLHSession } from '@components/Contexts/LHSessionContext'
import ErrorUI from '@components/StyledElements/Error/Error'
import InfoUI from '@components/StyledElements/Info/Info'
import { usePathname } from 'next/navigation'
export const OrgContext = createContext({}) as any
export const OrgContext = createContext(null)
export function OrgProvider({
children,
orgslug,
}: {
children: React.ReactNode
orgslug: string
}) {
const session = useLHSession() as any;
const access_token = session?.data?.tokens?.access_token;
const { data: org } = useSWR(`${getAPIUrl()}orgs/slug/${orgslug}`, (url) => swrFetcher(url, access_token))
const [isLoading, setIsLoading] = useState(true);
const [isOrgActive, setIsOrgActive] = useState(true);
export function OrgProvider({ children, orgslug }: { children: React.ReactNode, orgslug: string }) {
const session = useLHSession() as any
const pathname = usePathname()
const accessToken = session?.data?.tokens?.access_token
const isAllowedPathname = ['/login', '/signup'].includes(pathname);
// Check if Org is Active
const verifyIfOrgIsActive = () => {
if (org && org?.config.config.GeneralConfig.active === false) {
setIsOrgActive(false)
}
else {
setIsOrgActive(true)
}
const { data: org, error: orgError } = useSWR(
`${getAPIUrl()}orgs/slug/${orgslug}`,
(url) => swrFetcher(url, accessToken)
)
const { data: orgs, error: orgsError } = useSWR(
`${getAPIUrl()}orgs/user/page/1/limit/10`,
(url) => swrFetcher(url, accessToken)
)
const isOrgActive = useMemo(() => org?.config?.config?.GeneralConfig?.active !== false, [org])
const isUserPartOfTheOrg = useMemo(() => orgs?.some((userOrg: any) => userOrg.id === org?.id), [orgs, org?.id])
if (orgError || orgsError) return <ErrorUI message='An error occurred while fetching data' />
if (!org || !orgs || !session) return <div>Loading...</div>
if (!isOrgActive) return <ErrorUI message='This organization is no longer active' />
if (!isUserPartOfTheOrg && session.status == 'authenticated' && !isAllowedPathname) {
return (
<InfoUI
href={getUriWithoutOrg(`/signup?orgslug=${orgslug}`)}
message='You are not part of this Organization'
cta={`Join ${org?.name}`}
/>
)
}
useEffect(() => {
if (org && session) {
verifyIfOrgIsActive()
setIsLoading(false)
}
}, [org, session])
if (!isLoading) {
return <OrgContext.Provider value={org}>{children}</OrgContext.Provider>
}
if (!isOrgActive) {
return <ErrorUI message='This organization is no longer active' />
}
return <OrgContext.Provider value={org}>{children}</OrgContext.Provider>
}
export function useOrg() {

20
apps/web/components/StyledElements/Error/Error.tsx
View file

@ -1,9 +1,11 @@
'use client'
import { AlertTriangle, RefreshCcw } from 'lucide-react'
import { getUriWithoutOrg } from '@services/config/config'
import { AlertTriangle, HomeIcon, RefreshCcw } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import React from 'react'
function ErrorUI(params: { message?: string }) {
function ErrorUI(params: { message?: string, submessage?: string }) {
const router = useRouter()
function reloadPage() {
@ -15,9 +17,12 @@ function ErrorUI(params: { message?: string }) {
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
<div className="flex flex-row items-center space-x-5 rounded-xl ">
<AlertTriangle className="text-rose-700" size={45} />
<p className="text-3xl font-bold text-rose-700">{params.message ? params.message : 'Something went wrong'}</p>
<div className='flex flex-col'>
<p className="text-3xl font-bold text-rose-700">{params.message ? params.message : 'Something went wrong'}</p>
<p className="text-lg font-bold text-rose-700">{params.submessage ? params.submessage : ''}</p>
</div>
</div>
<div>
<div className='flex space-x-4'>
<button
onClick={() => reloadPage()}
className="flex space-x-2 items-center rounded-full px-4 py-1 text-rose-200 bg-rose-700 hover:bg-rose-800 transition-all ease-linear shadow-lg "
@ -25,6 +30,13 @@ function ErrorUI(params: { message?: string }) {
<RefreshCcw className="text-rose-200" size={17} />
<span className="text-md font-bold">Retry</span>
</button>
<Link
href={getUriWithoutOrg('/home')}
className="flex space-x-2 items-center rounded-full px-4 py-1 text-gray-200 bg-gray-700 hover:bg-gray-800 transition-all ease-linear shadow-lg "
>
<HomeIcon className="text-gray-200" size={17} />
<span className="text-md font-bold">Home</span>
</Link>
</div>
</div>
)

37
apps/web/components/StyledElements/Info/Info.tsx Normal file
View file

@ -0,0 +1,37 @@
'use client'
import { getUriWithoutOrg } from '@services/config/config'
import { AlertTriangle, Diamond, Home, PersonStanding, RefreshCcw } from 'lucide-react'
import Link from 'next/link'
import React from 'react'
function InfoUI(params: { message?: string, submessage?: string, cta?: string, href: string }) {
return (
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-yellow-100 to-yellow-100/5 ">
<div className="flex flex-row items-center space-x-5 rounded-xl ">
<Diamond className="text-yellow-700" size={45} />
<div className='flex flex-col'>
<p className="text-3xl font-bold text-yellow-700">{params.message ? params.message : 'Something went wrong'}</p>
<p className="text-lg font-bold text-yellow-700">{params.submessage ? params.submessage : ''}</p>
</div>
</div>
{params.cta && <div className='flex space-x-4'>
<Link
href={params.href}
className="flex space-x-2 items-center rounded-full px-4 py-1 text-yellow-200 bg-yellow-700 hover:bg-yellow-800 transition-all ease-linear shadow-lg "
>
<PersonStanding className="text-yellow-200" size={17} />
<span className="text-md font-bold">{params.cta}</span>
</Link>
<Link
href={getUriWithoutOrg('/home')}
className="flex space-x-2 items-center rounded-full px-4 py-1 text-gray-200 bg-gray-700 hover:bg-gray-800 transition-all ease-linear shadow-lg "
>
<Home className="text-gray-200" size={17} />
<span className="text-md font-bold">Home</span>
</Link>
</div>}
</div>
)
}
export default InfoUI