1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-22 21:09:36 +02:00
flame/client/src/components/Apps/Apps.tsx
2021-10-11 11:10:22 -04:00

158 lines
4.6 KiB
TypeScript

import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { App, Category, GlobalState } from '../../interfaces';
import { getAppCategories, getApps } from '../../store/actions';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
import Headline from '../UI/Headlines/Headline/Headline';
import { Container } from '../UI/Layout/Layout';
import Modal from '../UI/Modal/Modal';
import Spinner from '../UI/Spinner/Spinner';
import AppForm from './AppForm/AppForm';
import AppGrid from './AppGrid/AppGrid';
import classes from './Apps.module.css';
import AppTable from './AppTable/AppTable';
interface ComponentProps {
loading: boolean;
categories: Category[];
getAppCategories: () => void;
apps: App[];
getApps: () => void;
searching: boolean;
}
export enum ContentType {
category,
app,
}
const Apps = (props: ComponentProps): JSX.Element => {
const { apps, getApps, getAppCategories, categories, loading, searching = false } = props;
const [modalIsOpen, setModalIsOpen] = useState(false);
const [formContentType, setFormContentType] = useState(ContentType.category);
const [isInEdit, setIsInEdit] = useState(false);
const [tableContentType, setTableContentType] = useState(
ContentType.category
);
const [isInUpdate, setIsInUpdate] = useState(false);
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
name: "",
id: -1,
isPinned: false,
orderId: 0,
type: "apps",
apps: [],
bookmarks: [],
createdAt: new Date(),
updatedAt: new Date(),
});
const [appInUpdate, setAppInUpdate] = useState<App>({
name: "string",
url: "string",
categoryId: -1,
icon: "string",
isPinned: false,
orderId: 0,
id: 0,
createdAt: new Date(),
updatedAt: new Date(),
});
useEffect(() => {
if (apps.length === 0) {
getApps();
}
}, [getApps]);
useEffect(() => {
if (categories.length === 0) {
getAppCategories();
}
}, [getAppCategories]);
const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen);
};
const addActionHandler = (contentType: ContentType) => {
setFormContentType(contentType);
setIsInUpdate(false);
toggleModal();
};
const editActionHandler = (contentType: ContentType) => {
// We"re in the edit mode and the same button was clicked - go back to list
if (isInEdit && contentType === tableContentType) {
setIsInEdit(false);
} else {
setIsInEdit(true);
setTableContentType(contentType);
}
};
const instanceOfCategory = (object: any): object is Category => {
return "apps" in object;
};
const goToUpdateMode = (data: Category | App): void => {
setIsInUpdate(true);
if (instanceOfCategory(data)) {
setFormContentType(ContentType.category);
setCategoryInUpdate(data);
} else {
setFormContentType(ContentType.app);
setAppInUpdate(data);
}
toggleModal();
};
return (
<Container>
<Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
{!isInUpdate ? (
<AppForm modalHandler={toggleModal} contentType={formContentType} />
) : (
formContentType === ContentType.category ? (
<AppForm modalHandler={toggleModal} contentType={formContentType} category={categoryInUpdate} />
) : (
<AppForm modalHandler={toggleModal} contentType={formContentType} app={appInUpdate} />
)
)}
</Modal>
<Headline
title="All Applications"
subtitle={(<Link to="/">Go back</Link>)}
/>
<div className={classes.ActionsContainer}>
<ActionButton name="Add Category" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.category)} />
<ActionButton name="Add App" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.app)} />
<ActionButton name="Edit Categories" icon="mdiPencil" handler={() => editActionHandler(ContentType.category)} />
<ActionButton name="Edit Apps" icon="mdiPencil" handler={() => editActionHandler(ContentType.app)} />
</div>
{loading ? (
<Spinner />
) : (!isInEdit ? (
<AppGrid categories={categories} apps={apps} searching />
) : (
<AppTable contentType={tableContentType} categories={categories} apps={apps} updateHandler={goToUpdateMode} />
)
)}
</Container>
);
};
const mapStateToProps = (state: GlobalState) => {
return {
loading: state.app.loading,
categories: state.app.categories,
apps: state.app.apps,
};
};
export default connect(mapStateToProps, { getApps, getAppCategories })(Apps);