use api for apps
This commit is contained in:
Philipp Rothmann
parent
ffd62d66f1
commit
f2f5b48a44
5 changed files with 34 additions and 88 deletions
32
src/App.tsx
32
src/App.tsx
|
|
@ -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} />} />
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
// },
|
||||
// ]);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 ?? '',
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue