local-it
/
dashboard
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

use api for apps

pull/1/head
Philipp Rothmann 2022-10-19 16:05:12 +02:00
parent ffd62d66f1
commit f2f5b48a44
5 changed files with 34 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.tsx
View File

@ -1,36 +1,26 @@
import React, { createContext } from 'react';
import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { Toaster } from 'react-hot-toast';
import { Navigate, Route, Routes } from 'react-router-dom';
import { fetchApps } from './services/apps/api';
import { Layout } from './components';
import { Dashboard } from './modules';
import { AppIframe } from './modules/dashboard/AppIframe';
import { useApps } from './services/apps';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function App() {
const host = window.location.hostname;
const splitedDomain = host.split('.');
splitedDomain.shift();
const rootDomain = splitedDomain.join('.');
// @ts-ignore
const DASHBOARD_APPS = [
{
id: '1',
name: 'Dateiablage',
assetSrc: '/assets/nextcloud.svg',
internalUrl: `files`,
externalUrl: `https://cloud`,
},
{
id: '2',
name: 'Projektboard',
assetSrc: '/assets/vikunja.png',
internalUrl: `projects`,
externalUrl: `https://vikunja`,
},
];
const { apps, loadApps } = useApps();
useEffect(() => {
if (apps.length === 0) {
loadApps();
}
}, [loadApps, apps.length]);
return (
<>
<Helmet>
@ -50,7 +40,7 @@ function App() {
<Route path="/dashboard" element={<Dashboard />} />
{
// @ts-ignore
DASHBOARD_APPS.map((app) => (
apps.map((app) => (
<Route key={app.name} path={app.internalUrl} element={<AppIframe app={app} />} />
))
}

56
src/components/Header/Header.tsx
View File

@ -3,31 +3,14 @@ import { Disclosure } from '@headlessui/react';
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import clsx from 'clsx';
import { Link, useLocation } from 'react-router-dom';
import { fetchApps } from '../../services/apps/api';
import { useApps } from 'src/services/apps';
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface HeaderProps {}
const Header: React.FC<HeaderProps> = () => {
const { pathname } = useLocation();
const rootDomain = 'foobar';
// @ts-ignore
const DASHBOARD_APPS = [
{
id: '1',
name: 'Dateiablage',
assetSrc: '/assets/nextcloud.svg',
internalUrl: `files`,
externalUrl: `https://cloud`,
},
{
id: '2',
name: 'Projektboard',
assetSrc: '/assets/vikunja.png',
internalUrl: `projects`,
externalUrl: `https://vikunja`,
},
];
const { apps, loadApps, appTableLoading } = useApps();
return (
<>
@ -54,24 +37,21 @@ const Header: React.FC<HeaderProps> = () => {
</Link>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
{/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
{
// @ts-ignore
DASHBOARD_APPS.map((app) => (
<Link
key={app.name}
to={app.internalUrl}
className={clsx(
'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
{
'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
pathname.includes(app.internalUrl),
},
)}
>
{app.name}
</Link>
))
}
{apps.map((app) => (
<Link
key={app.name}
to={app.internalUrl}
className={clsx(
'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
{
'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
pathname.includes(app.internalUrl),
},
)}
>
{app.name}
</Link>
))}
</div>
</div>
</div>
@ -81,7 +61,7 @@ const Header: React.FC<HeaderProps> = () => {
<div className="pt-2 pb-4 space-y-1">
{
// @ts-ignore
DASHBOARD_APPS.map((app) => (
apps.map((app) => (
<Link
key={app.name}
to={app.internalUrl}

13
src/modules/dashboard/Dashboard.tsx
View File

@ -1,14 +1,9 @@
import React, { useEffect } from 'react';
import React from 'react';
import { useApps } from 'src/services/apps';
import { DashboardCard } from './components';
export const Dashboard: React.FC = () => {
const { apps, loadApps, appTableLoading } = useApps();
const foo = 42;
useEffect(() => {
loadApps();
}, [foo]);
const { apps, appTableLoading } = useApps();
return (
<div className="relative">
@ -19,9 +14,7 @@ export const Dashboard: React.FC = () => {
</div>
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
{!appTableLoading &&
// @ts-ignore
apps.map((app) => <DashboardCard app={app} key={app.name} />)}
{!appTableLoading && apps.map((app) => <DashboardCard app={app} key={app.name} />)}
</div>
</div>
</div>

18
src/services/apps/api.ts
View File

@ -1,5 +1,5 @@
import { env } from '../../env';
import { createApiCall, performApiCall } from '../api';
import { performApiCall } from '../api';
import { transformApp } from './transformations';
import { App } from './types';
@ -8,20 +8,4 @@ export const fetchApps = async (): Promise<App> => {
const res = await performApiCall({ hostname: apiUrl, path: '/apps', method: 'GET' });
return transformApp(res);
// return new Promise(() => [
// {
// id: '1',
// name: 'Dateiablage',
// assetSrc: '/assets/nextcloud.svg',
// internalUrl: `files`,
// externalUrl: `https://cloud`,
// },
// {
// id: '2',
// name: 'Projektboard',
// assetSrc: '/assets/vikunja.png',
// internalUrl: `projects`,
// externalUrl: `https://vikunja`,
// },
// ]);
};

3
src/services/apps/transformations.ts
View File

@ -1,11 +1,10 @@
import _ from 'lodash';
import { App } from './types';
export const transformApp = (response: any): App => {
return {
id: response.id ?? '',
name: response.name ?? '',
assetSrc: response.icon ?? '',
assetSrc: response.assetSrc ?? '',
internalUrl: response.internalUrl ?? '',
externalUrl: response.externalUrl ?? '',
};