Skip to content

Commit

Permalink
Merge pull request #41 from jazicorn/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@jazicorn
jazicorn authored Sep 21, 2023
2 parents 588caa5 + 9e59f77 commit 3e651d0
Show file tree
Hide file tree
Showing 13 changed files with 378 additions and 142 deletions.
15 changes: 3 additions & 12 deletions apps/web/src/components/dashboard/dashboard-code/D_Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@ import { useQuery } from "@tanstack/react-query";
import { ThemeContext } from '../../../context/ThemeContext';
import { Transition2 } from '../../../hooks/useTransition';
import useWindowSize from '../../../hooks/useWindowSize';
import { Center } from '@mantine/core';
/** Custom State Components*/
import ErrorDashboard from '../../dashboard/error';
import {LoadingDashboardMD} from '../../dashboard/loading';
//import ErrorDashboard from '../../dashboard/error';
//import {LoadingDashboardMD} from '../../dashboard/loading';
/** Notifications */
import { notifications } from '@mantine/notifications';
import { IconX, IconCheck } from '@tabler/icons-react';
Expand Down Expand Up @@ -64,7 +63,7 @@ const D_Editor = () => {
}, [getMenuRoute]);

/** Generate Question */
const { isLoading, isFetching, isError, isSuccess, error, data } = useQuery({
const { isSuccess, data } = useQuery({
queryKey: ['questionData'],
queryFn: getQuestion,
refetchOnWindowFocus: false,
Expand Down Expand Up @@ -231,14 +230,6 @@ const D_Editor = () => {
dispatch(menuConsoleMessage(consoleMessage));
},[consoleMessage, dispatch]);

/** Render if Loading */
if (isLoading || isFetching || getMenuQuestion === undefined) return (
<Center><LoadingDashboardMD /></Center>
)

/** Render if Error */
if (isError) return <ErrorDashboard error={error.message}/>

/** Render if Successful */
if (isSuccess) return (
<div className={`${darkMode ? '' : ''} tw-text-campfire-blue tw-flex tw-flex-col tw-h-full tw-p-2`}>
Expand Down
16 changes: 2 additions & 14 deletions apps/web/src/components/dashboard/dashboard-code/D_Problem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,13 @@ import { useContext, useCallback, useEffect } from 'react';
/** Custom Hooks */
import { ThemeContext } from '../../../context/ThemeContext';
import { Transition2 } from '../../../hooks/useTransition';
/** Custom State Components*/
import ErrorDashboard from '../error';
import {LoadingDashboardLG, LoadingDashboardMD} from '../loading';
/** React Redux Hooks */
import { useAppSelector, useAppDispatch } from '../../../redux/reduxHooks.ts';
import {
menuQuestion,
} from '../../../redux/slices/dashboardSlice.ts';
/** React Query */
import { useQuery } from "@tanstack/react-query";
import { Center } from '@mantine/core';
/** API url | Custom env mandatory to begin with VITE
* https://vitejs.dev/guide/env-and-mode.html#env-files */
const baseURL = import.meta.env.VITE_API_BASE_URL;
Expand Down Expand Up @@ -52,7 +48,7 @@ const D_Problem = () => {
}, [getMenuRoute]);

/** Generate Question */
const { isLoading, isFetching, isError, isSuccess, error, data, refetch } = useQuery({
const { isSuccess, data, refetch } = useQuery({
queryKey: ['questionData'],
queryFn: getQuestion,
refetchOnWindowFocus: false,
Expand All @@ -76,14 +72,6 @@ const D_Problem = () => {
refetch();
}

/** Render if Loading */
if (isLoading || isFetching || getMenuQuestion === undefined) return (
<Center><LoadingDashboardLG/></Center>
)

/** Render if Error */
if (isError) return <ErrorDashboard error={error.message}/>

/** Render if Successful */
if(isSuccess) return (
<div className={`${darkMode ? '' : ''} overflow-y-scroll tw-text-campfire-blue tw-w-full tw-h-full tw-flex tw-flex-col tw-p-2`}>
Expand All @@ -109,7 +97,7 @@ const D_Problem = () => {
</header>
{/**Question: Task */}
{getMenuQuestion._QUESTION_TASK === undefined ?
<LoadingDashboardMD/>
<div/>
:
<div className={`${darkMode ? 'tw-text-campfire-neutral-100' : 'tw-text-campfire-neutral-700'} tw-px-2 tw-pb-2`}>
{/**Question: Task */}
Expand Down
67 changes: 32 additions & 35 deletions apps/web/src/components/dashboard/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ export const LoadingDashboardXS = () => {
<>
{darkMode ?
<Center>
<div className={`tw-bg-neutral-700/90 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-sm`}>
<div className={`tw-bg-neutral-700/90 tw-flex tw-flex-col tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-sm`}>
<Center><Loader color="gray" size="xs"/></Center>
</div>
</Center>
:
<Center>
<div className={`tw-bg-neutral-400/80 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-sm`}>
<div className={`tw-bg-neutral-400/80 tw-flex tw-flex-col tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-sm`}>
<Center><Loader color="dark" size="xs"/></Center>
</div>
</Center>
Expand All @@ -33,17 +33,17 @@ export const LoadingDashboardSM = () => {
return (
<>
{darkMode ?
<Center>
<div className={`tw-bg-neutral-700/90 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-base`}>
<Center><Loader color="gray" size="sm"/></Center>

<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="gray" size="sm"/>
</div>
</Center>

:
<Center>
<div className={`tw-bg-neutral-400/80 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-base`}>
<Center><Loader color="dark" size="sm"/></Center>

<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="dark" size="sm"/>
</div>
</Center>

}
</>
)
Expand All @@ -55,17 +55,13 @@ export const LoadingDashboardMD = () => {
return (
<>
{darkMode ?
<Center>
<div className={`tw-bg-neutral-700/90 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-xl`}>
<Center><Loader color="gray" size="md"/></Center>
<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="gray" size="md"/>
</div>
</Center>
:
<Center>
<div className={`tw-bg-neutral-400/80 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-xl`}>
<Center><Loader color="dark" size="md"/></Center>
<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="dark" size="md"/>
</div>
</Center>
}
</>
)
Expand All @@ -77,17 +73,17 @@ export const LoadingDashboardLG = () => {
return (
<>
{darkMode ?
<Center>
<div className={`tw-bg-neutral-700/90 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-2xl`}>

<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="gray" size="lg" className="tw-place-self-center"/>
</div>
</Center>

:
<Center>
<div className={`tw-bg-neutral-400/80 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-2xl`}>
<Center><Loader color="dark" size="lg"/></Center>

<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="dark" size="lg"/>
</div>
</Center>

}
</>
)
Expand All @@ -99,17 +95,18 @@ export const LoadingDashboardXL = () => {
return (
<>
{darkMode ?
<Center>
<div className={`tw-bg-neutral-700/90 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-4xl`}>
<Loader color="gray" size="xl"/>
</div>
</Center>

<div className={`${darkMode ? 'tw-backdrop-brightness-25 ' : 'tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="white" size="xl"/>
</div>

:
<Center>
<div className={`tw-bg-neutral-400/80 tw-w-full tw-h-full tw-place-content-center tw-place-items-center tw-font-space_mono tw-text-4xl`}>
<Loader color="dark" size="xl"/>
</div>
</Center>

<div className={`${darkMode ? 'tw-backdrop-brightness-80 ' : 'tw-backdrop-brightness-85'}
tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center tw-p-2 tw-border tw-border-transparent tw-rounded`}>
<Loader color="gray" size="xl"/>
</div>

}
</>
)
Expand Down
26 changes: 23 additions & 3 deletions apps/web/src/layout/Layout.D_Calendar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,35 @@
import { useContext } from 'react';
/**React */
import { useContext, useState } from 'react';
/** Custom State Components*/
import {LoadingDashboardXL} from '../components/dashboard/loading';
/**Custom Hooks */
import { ThemeContext } from '../context/ThemeContext';
// hooks
import useWindowSize from '../hooks/useWindowSize';
// components
/**Custom Components */
import D_Calendar from '../components/dashboard/dashboard-calendar/D_Calendar';

const Layout_D_Calender = () => {
/**Custom Hooks */
const { isDesktopMDXL, isDesktopXL } = useWindowSize();
const { state } = useContext(ThemeContext);
const darkMode = state.darkMode;

/**Loading Screen */
const [loading, setLoading] = useState(true);

setTimeout(() => {
setLoading(false)
}, "1000");

if(loading) {
return (
<div className={`${darkMode ? '[&>*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} ${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'}
tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
<LoadingDashboardXL />
</div>
)
}

return (
<div className="tw-h-full">
{/**Page Content | Position: Relative */}
Expand Down
92 changes: 57 additions & 35 deletions apps/web/src/layout/Layout.D_Categories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Categories
import { useContext, useEffect } from 'react'
// Page: Dashboard Categories
/**React */
import { useContext, useEffect, useState } from 'react'
import { ThemeContext } from '../context/ThemeContext'
// hooks
/*Custom Hooks*/
//import Transition from '../hooks/useTransition';
import useWindowSize from '../hooks/useWindowSize';
// components
/**Custom Components */
import ErrorDashboard from '../components/dashboard/error';
import { LoadingDashboardXL } from '../components/dashboard/loading';
// components
import D_Category from '../components/dashboard/dashboard-categories/D_Category';
import D_Category_Menu from '../components/dashboard/dashboard-categories/D_Category_Menu';
// import D_Languages from '../components/dashboard/dashboard-categories/D_Languages';
Expand All @@ -18,7 +18,6 @@ import { useAppSelector, useAppDispatch } from '../redux/reduxHooks.ts';
import {
menuLanguage, menuCategoryInfo
} from '../redux/slices/dashboardSlice.ts';
import { Center } from '@mantine/core';

const baseURL = import.meta.env.VITE_API_BASE_URL;

Expand Down Expand Up @@ -58,7 +57,7 @@ const Layout_D_Categories = () => {
};

/** Generate Categories */
const { isLoading, isError, error, data} = useQuery({
const { isFetching, isLoading, isError, error, isSuccess, data} = useQuery({
queryKey: ['categoriesData'],
queryFn: getCategories,
refetchOnWindowFocus: false,
Expand All @@ -76,38 +75,61 @@ const Layout_D_Categories = () => {
dispatch(menuCategoryInfo(results))
},[data, dispatch, getMenuCategory, getMenuCategoryInfo]);

if (isLoading) return ( <Center><LoadingDashboardXL/></Center>)
/**Delay Loading Screen */
const [loading, setLoading] = useState(true);

if (isError) return <ErrorDashboard error={error.message}/>
setTimeout(() => {
setLoading(false)
}, "600");

return (
<div className="tw-h-full">
{/**Page Content | Position: Relative */}
{isDesktopMDXL || isDesktopXL ?
<main className={`${darkMode ? '[&>*]:tw-bg-neutral-700/90' : '[&>*]:tw-bg-neutral-300/90'}
[&>*]:tw-backdrop-blur-sm [&>*]:tw-rounded tw-border tw-border-transparent tw-w-full tw-h-full
tw-grid tw-grid-rows-layout-dashboard-categories-container tw-gap-1 `}>
<div className={`${darkMode ? 'tw-divide-campfire-neutral-500 tw-bg-campfire-neutral-600' : 'tw-divide-campfire-neutral-200 '} tw-w-full tw-h-full tw-grid tw-grid-rows-layout-dashboard-categories tw-grid-cols-layout-dashboard-categories tw-divide-x-2 tw-p-2`}>
<section className={`${darkMode ? "" : ""} tw-col-start-1 tw-col-end-1 tw-row-start-1 tw-row-end-1 tw-p-2`}>
<D_Category_Menu data={data}/>
</section>
<section className='tw-col-start-2 tw-col-end-3 tw-row-start-1 tw-row-end-1'>
<div className=''><D_Category /></div>
</section>
</div>
</main>
:
<main className={`${darkMode ? '[&>*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-65'}
tw-bg-transparent tw-pb-1 tw-w-full tw-h-full tw-grow [&>*]:tw-backdrop-blur-sm
tw-grid tw-grid-rows-layout-dashboard-categories-mobile tw-gap-1 [&>*]:tw-rounded tw-border tw-border-transparent`}>
<section className={`${darkMode ? "tw-bg-campfire-neutral-600" : "[&>*]:tw-bg-campfire-neutral-300"} tw-col-start-1 tw-col-end-1 tw-row-start-1 tw-row-end-1 tw-p-2`}>
<D_Category_Menu data={data}/>
</section>
<section className=''><D_Category/></section>
</main>
}
/** Render if Loading */
if (isFetching || isLoading) return (
<div className={`${darkMode ? '[&>*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
<LoadingDashboardXL />
</div>
)

if (isError) return <ErrorDashboard error={error.message}/>

if(isSuccess && loading) {
return (
<div className={`${darkMode ? '[&>*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-85'}
${darkMode ? '[&>*]:tw-bg-neutral-700/50' : '[&>*]:tw-bg-neutral-300/50'} tw-text-transparent tw-flex tw-flex-col tw-w-full tw-h-full tw-place-self-center tw-place-content-center tw-place-items-center`}>
<LoadingDashboardXL />
</div>
)
}

if(isSuccess && !loading) {
return (
<div className="tw-h-full">
{/**Page Content | Position: Relative */}
{isDesktopMDXL || isDesktopXL ?
<main className={`${darkMode ? '[&>*]:tw-bg-neutral-700/90' : '[&>*]:tw-bg-neutral-300/90'}
[&>*]:tw-backdrop-blur-sm [&>*]:tw-rounded tw-border tw-border-transparent tw-w-full tw-h-full
tw-grid tw-grid-rows-layout-dashboard-categories-container tw-gap-1 `}>
<div className={`${darkMode ? 'tw-divide-campfire-neutral-500 tw-bg-campfire-neutral-600' : 'tw-divide-campfire-neutral-200 '} tw-w-full tw-h-full tw-grid tw-grid-rows-layout-dashboard-categories tw-grid-cols-layout-dashboard-categories tw-divide-x-2 tw-p-2`}>
<section className={`${darkMode ? "" : ""} tw-col-start-1 tw-col-end-1 tw-row-start-1 tw-row-end-1 tw-p-2`}>
<D_Category_Menu data={data}/>
</section>
<section className='tw-col-start-2 tw-col-end-3 tw-row-start-1 tw-row-end-1'>
<div className=''><D_Category /></div>
</section>
</div>
</main>
:
<main className={`${darkMode ? '[&>*]:tw-backdrop-brightness-25 ' : '[&>*]:tw-backdrop-brightness-65'}
tw-bg-transparent tw-pb-1 tw-w-full tw-h-full tw-grow [&>*]:tw-backdrop-blur-sm
tw-grid tw-grid-rows-layout-dashboard-categories-mobile tw-gap-1 [&>*]:tw-rounded tw-border tw-border-transparent`}>
<section className={`${darkMode ? "tw-bg-campfire-neutral-600" : "[&>*]:tw-bg-campfire-neutral-300"} tw-col-start-1 tw-col-end-1 tw-row-start-1 tw-row-end-1 tw-p-2`}>
<D_Category_Menu data={data}/>
</section>
<section className=''><D_Category/></section>
</main>
}
</div>
)
}
}

export default Layout_D_Categories
Expand Down
Loading

1 comment on commit 3e651d0

@vercel
Copy link

@vercel vercel bot commented on 3e651d0 Sep 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

recodecamp-api – ./apps/api

recodecamp-api.vercel.app
recodecamp-api-git-main-jazicorn.vercel.app
recodecamp-api-jazicorn.vercel.app

Please sign in to comment.