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

View file

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

View file

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

View file

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

View file

@ -1,71 +1,71 @@
{
"categories": [
"categories": [
{
"name": "Networking",
"items": [
{
"name": "Networking",
"items": [
{
"name": "pfSense",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "security"
},
{
"name": "Pihole",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "vpn_lock"
}
]
"name": "pfSense",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "security"
},
{
"name": "Monitoring",
"items": [
{
"name": "Tautulli",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "bar_chart"
},
{
"name": "Grafana",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "show_chart"
}
]
"name": "Pihole",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "vpn_lock"
}
],
"apps": [
]
},
{
"name": "Monitoring",
"items": [
{
"name": "Plex",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "tv"
"name": "Tautulli",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "bar_chart"
},
{
"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": "Grafana",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "show_chart"
}
]
}
],
"apps": [
{
"name": "Plex",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "tv"
},
{
"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",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "dns"
}
]
{
"name": "ESXi",
"displayURL": "example.com",
"URL": "https://example.com",
"icon": "dns"
}
]
}