yolokube/dashboard
yolokube/dashboard
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity

Fix bug

Browse source
This commit is contained in:
Bastian Meissner 2020-07-10 00:17:18 +02:00
parent 7b202cdd64
commit 6932cdac8c
4 changed files with 71 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/app.tsx
View file

@ -46,17 +46,17 @@ const AppDescription = styled.p`
export interface IAppProps { export interface IAppProps {
name: string; name: string;
icon: string; icon: string;
url: string; URL: string;
displayURL: string; displayURL: string;
} }
export const App = ({ name, icon, url, displayURL }: IAppProps) => ( export const App = ({ name, icon, URL, displayURL }: IAppProps) => (
<AppContainer> <AppContainer>
<IconContainer> <IconContainer>
<Icon name={icon} /> <Icon name={icon} />
</IconContainer> </IconContainer>
<DetailsContainer> <DetailsContainer>
<AppLink href={url}>{name}</AppLink> <AppLink href={URL}>{name}</AppLink>
<AppDescription>{displayURL}</AppDescription> <AppDescription>{displayURL}</AppDescription>
</DetailsContainer> </DetailsContainer>
</AppContainer> </AppContainer>

2
src/components/appCategory.tsx
View file

@ -25,7 +25,7 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => (
<App <App
name={app.name} name={app.name}
icon={app.icon} icon={app.icon}
url={app.url} URL={app.URL}
displayURL={app.displayURL} displayURL={app.displayURL}
/> />
</Item> </Item>

11
src/components/appList.tsx
View file

@ -5,24 +5,24 @@ import {
handleResponse, handleResponse,
Headline, Headline,
ListContainer, ListContainer,
ErrorMessage ErrorMessage,
} from "./elements"; } from "./elements";
const useAppData = () => { const useAppData = () => {
const [appData, setAppData] = useState({ const [appData, setAppData] = useState({
categories: [], categories: [],
apps: [], apps: [],
error: false error: false,
}); });
const fetchAppData = useCallback(() => { const fetchAppData = useCallback(() => {
(process.env.NODE_ENV === "production" (process.env.NODE_ENV === "production"
? fetch("/data/apps.json").then(handleResponse) ? fetch("/data/apps.json").then(handleResponse)
: import("./data/apps.json") : import("./data/apps.json")
) )
.then(jsonResponse => { .then((jsonResponse) => {
setAppData({ ...jsonResponse, error: false }); setAppData({ ...jsonResponse, error: false });
}) })
.catch(error => { .catch((error) => {
setAppData({ categories: [], apps: [], error: error.message }); setAppData({ categories: [], apps: [], error: error.message });
}); });
}, []); }, []);
@ -35,8 +35,9 @@ const useAppData = () => {
const AppList = () => { const AppList = () => {
const { const {
appData: { categories, apps, error } appData: { categories, apps, error },
} = useAppData(); } = useAppData();
return ( return (
<ListContainer> <ListContainer>
<Headline>Applications</Headline> <Headline>Applications</Headline>

122
src/components/data/apps.json
View file

@ -1,71 +1,71 @@
{ {
"categories": [ "categories": [
{
"name": "Networking",
"items": [
{ {
"name": "Networking", "name": "pfSense",
"items": [ "displayURL": "example.com",
{ "URL": "https://example.com",
"name": "pfSense", "icon": "security"
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "security"
},
{
"name": "Pihole",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "vpn_lock"
}
]
}, },
{ {
"name": "Monitoring", "name": "Pihole",
"items": [ "displayURL": "example.com",
{ "URL": "https://example.com",
"name": "Tautulli", "icon": "vpn_lock"
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "bar_chart"
},
{
"name": "Grafana",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "show_chart"
}
]
} }
], ]
"apps": [ },
{
"name": "Monitoring",
"items": [
{ {
"name": "Plex", "name": "Tautulli",
"displayURL": "example.com", "displayURL": "example.com",
"URL": "https://example.com", "URL": "https://example.com",
"icon": "tv" "icon": "bar_chart"
}, },
{ {
"name": "NextCloud", "name": "Grafana",
"displayURL": "example.com", "displayURL": "example.com",
"URL": "https://example.com", "URL": "https://example.com",
"icon": "filter_drama" "icon": "show_chart"
}, }
{ ]
"name": "Ghost", }
"displayURL": "example.com", ],
"URL": "https://example.com", "apps": [
"icon": "rss_feed" {
}, "name": "Plex",
{ "displayURL": "example.com",
"name": "Minecraft", "URL": "https://example.com",
"displayURL": "example.com", "icon": "tv"
"URL": "https://example.com", },
"icon": "games" {
}, "name": "NextCloud",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "filter_drama"
},
{
"name": "Ghost",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "rss_feed"
},
{
"name": "Minecraft",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "games"
},
{ {
"name": "ESXi", "name": "ESXi",
"displayURL": "example.com", "displayURL": "example.com",
"URL": "https://example.com", "URL": "https://example.com",
"icon": "dns" "icon": "dns"
} }
] ]
} }