59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
|
import React, { useCallback, useEffect, useState } from "react";
|
||
|
|
import { AppCategory } from "./appCategory";
|
||
|
|
|
||
|
|
import {
|
||
|
|
handleResponse,
|
||
|
|
Headline,
|
||
|
|
ListContainer,
|
||
|
|
ErrorMessage
|
||
|
|
} from "./elements";
|
||
|
|
|
||
|
|
const useAppData = () => {
|
||
|
|
const [appData, setAppData] = useState({
|
||
|
|
categories: [],
|
||
|
|
apps: [],
|
||
|
|
error: false
|
||
|
|
});
|
||
|
|
const fetchAppData = useCallback(() => {
|
||
|
|
(process.env.NODE_ENV === "production"
|
||
|
|
? fetch("/data/apps.json").then(handleResponse)
|
||
|
|
: import("./data/apps.json")
|
||
|
|
)
|
||
|
|
.then(jsonResponse => {
|
||
|
|
setAppData({ ...jsonResponse, error: false });
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
setAppData({ categories: [], apps: [], error: error.message });
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchAppData();
|
||
|
|
}, [fetchAppData]);
|
||
|
|
return { appData, fetchAppData };
|
||
|
|
};
|
||
|
|
|
||
|
|
const AppList = () => {
|
||
|
|
const {
|
||
|
|
appData: { categories, apps, error }
|
||
|
|
} = useAppData();
|
||
|
|
return (
|
||
|
|
<ListContainer>
|
||
|
|
<Headline>Applications</Headline>
|
||
|
|
{error && <ErrorMessage>{error}</ErrorMessage>}
|
||
|
|
{categories &&
|
||
|
|
categories.map(({ name, items }, idx) => (
|
||
|
|
<AppCategory key={[name, idx].join("")} name={name} items={items} />
|
||
|
|
))}
|
||
|
|
{apps && (
|
||
|
|
<AppCategory
|
||
|
|
name={categories.length > 0 ? "Uncategorized apps" : ""}
|
||
|
|
items={apps}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</ListContainer>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AppList;
|