Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-29 07:39:36 +02:00
Code Issues Releases Wiki Activity

Components: refactored rest of the components to use new state. Minor changes to exports, imports and props

Browse source
This commit is contained in:
Paweł Malak 2021-11-09 14:33:51 +01:00
parent 89d935e27f
commit 969bdb7d24
29 changed files with 462 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

24
client/src/components/Apps/AppCard/AppCard.tsx
View file

@ -1,17 +1,19 @@
import classes from './AppCard.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
import { Icon } from '../../UI';
import { iconParser, urlParser } from '../../../utility';
import { App, Config, GlobalState } from '../../../interfaces';
import { connect } from 'react-redux';
import { App } from '../../../interfaces';
import { useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
interface ComponentProps {
interface Props {
app: App;
pinHandler?: Function;
config: Config;
}
const AppCard = (props: ComponentProps): JSX.Element => {
export const AppCard = (props: Props): JSX.Element => {
const { config } = useSelector((state: State) => state.config);
const [displayUrl, redirectUrl] = urlParser(props.app.url);
let iconEl: JSX.Element;
@ -42,7 +44,7 @@ const AppCard = (props: ComponentProps): JSX.Element => {
return (
<a
href={redirectUrl}
target={props.config.appsSameTab ? '' : '_blank'}
target={config.appsSameTab ? '' : '_blank'}
rel="noreferrer"
className={classes.AppCard}
>
@ -54,11 +56,3 @@ const AppCard = (props: ComponentProps): JSX.Element => {
</a>
);
};
const mapStateToProps = (state: GlobalState) => {
return {
config: state.config.config,
};
};
export default connect(mapStateToProps)(AppCard);

28
client/src/components/Apps/AppForm/AppForm.tsx
View file

@ -1,23 +1,23 @@
import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
import { connect } from 'react-redux';
import { addApp, updateApp } from '../../../store/actions';
import { useDispatch } from 'react-redux';
import { App, NewApp } from '../../../interfaces';
import classes from './AppForm.module.css';
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import Button from '../../UI/Buttons/Button/Button';
import { ModalForm, InputGroup, Button } from '../../UI';
import { inputHandler, newAppTemplate } from '../../../utility';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
interface ComponentProps {
interface Props {
modalHandler: () => void;
addApp: (formData: NewApp | FormData) => any;
updateApp: (id: number, formData: NewApp | FormData) => any;
app?: App;
}
const AppForm = (props: ComponentProps): JSX.Element => {
export const AppForm = (props: Props): JSX.Element => {
const dispatch = useDispatch();
const { addApp, updateApp } = bindActionCreators(actionCreators, dispatch);
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
const [customIcon, setCustomIcon] = useState<File | null>(null);
const [formData, setFormData] = useState<NewApp>(newAppTemplate);
@ -68,16 +68,16 @@ const AppForm = (props: ComponentProps): JSX.Element => {
if (!props.app) {
if (customIcon) {
const data = createFormData();
props.addApp(data);
addApp(data);
} else {
props.addApp(formData);
addApp(formData);
}
} else {
if (customIcon) {
const data = createFormData();
props.updateApp(props.app.id, data);
updateApp(props.app.id, data);
} else {
props.updateApp(props.app.id, formData);
updateApp(props.app.id, formData);
props.modalHandler();
}
}
@ -192,5 +192,3 @@ const AppForm = (props: ComponentProps): JSX.Element => {
</ModalForm>
);
};
export default connect(null, { addApp, updateApp })(AppForm);

8
client/src/components/Apps/AppGrid/AppGrid.tsx
View file

@ -2,15 +2,15 @@ import classes from './AppGrid.module.css';
import { Link } from 'react-router-dom';
import { App } from '../../../interfaces/App';
import AppCard from '../AppCard/AppCard';
import { AppCard } from '../AppCard/AppCard';
interface ComponentProps {
interface Props {
apps: App[];
totalApps?: number;
searching: boolean;
}
const AppGrid = (props: ComponentProps): JSX.Element => {
export const AppGrid = (props: Props): JSX.Element => {
let apps: JSX.Element;
if (props.apps.length > 0) {
@ -49,5 +49,3 @@ const AppGrid = (props: ComponentProps): JSX.Element => {
return apps;
};
export default AppGrid;

70
client/src/components/Apps/AppTable/AppTable.tsx
View file

@ -8,48 +8,45 @@ import {
import { Link } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
import {
pinApp,
deleteApp,
reorderApps,
updateConfig,
createNotification,
} from '../../../store/actions';
import { useDispatch, useSelector } from 'react-redux';
// Typescript
import { App, Config, GlobalState, NewNotification } from '../../../interfaces';
import { App } from '../../../interfaces';
// CSS
import classes from './AppTable.module.css';
// UI
import Icon from '../../UI/Icons/Icon/Icon';
import Table from '../../UI/Table/Table';
import { Icon, Table } from '../../UI';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
interface ComponentProps {
apps: App[];
config: Config;
pinApp: (app: App) => void;
deleteApp: (id: number) => void;
interface Props {
updateAppHandler: (app: App) => void;
reorderApps: (apps: App[]) => void;
updateConfig: (formData: any) => void;
createNotification: (notification: NewNotification) => void;
}
const AppTable = (props: ComponentProps): JSX.Element => {
export const AppTable = (props: Props): JSX.Element => {
const {
apps: { apps },
config: { config },
} = useSelector((state: State) => state);
const dispatch = useDispatch();
const { pinApp, deleteApp, reorderApps, updateConfig, createNotification } =
bindActionCreators(actionCreators, dispatch);
const [localApps, setLocalApps] = useState<App[]>([]);
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
// Copy apps array
useEffect(() => {
setLocalApps([...props.apps]);
}, [props.apps]);
setLocalApps([...apps]);
}, [apps]);
// Check ordering
useEffect(() => {
const order = props.config.useOrdering;
const order = config.useOrdering;
if (order === 'orderId') {
setIsCustomOrder(true);
@ -62,7 +59,7 @@ const AppTable = (props: ComponentProps): JSX.Element => {
);
if (proceed) {
props.deleteApp(app.id);
deleteApp(app.id);
}
};
@ -79,7 +76,7 @@ const AppTable = (props: ComponentProps): JSX.Element => {
const dragEndHanlder = (result: DropResult): void => {
if (!isCustomOrder) {
props.createNotification({
createNotification({
title: 'Error',
message: 'Custom order is disabled',
});
@ -95,7 +92,7 @@ const AppTable = (props: ComponentProps): JSX.Element => {
tmpApps.splice(result.destination.index, 0, movedApp);
setLocalApps(tmpApps);
props.reorderApps(tmpApps);
reorderApps(tmpApps);
};
return (
@ -178,9 +175,9 @@ const AppTable = (props: ComponentProps): JSX.Element => {
</div>
<div
className={classes.TableAction}
onClick={() => props.pinApp(app)}
onClick={() => pinApp(app)}
onKeyDown={(e) =>
keyboardActionHandler(e, app, props.pinApp)
keyboardActionHandler(e, app, pinApp)
}
tabIndex={0}
>
@ -208,20 +205,3 @@ const AppTable = (props: ComponentProps): JSX.Element => {
</Fragment>
);
};
const mapStateToProps = (state: GlobalState) => {
return {
apps: state.app.apps,
config: state.config.config,
};
};
const actions = {
pinApp,
deleteApp,
reorderApps,
updateConfig,
createNotification,
};
export default connect(mapStateToProps, actions)(AppTable);

41
client/src/components/Apps/Apps.tsx
View file

@ -2,39 +2,37 @@ import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
import { getApps } from '../../store/actions';
import { useDispatch, useSelector } from 'react-redux';
// Typescript
import { App, GlobalState } from '../../interfaces';
import { App } from '../../interfaces';
// CSS
import classes from './Apps.module.css';
// UI
import { Container } from '../UI/Layout/Layout';
import Headline from '../UI/Headlines/Headline/Headline';
import Spinner from '../UI/Spinner/Spinner';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
import Modal from '../UI/Modal/Modal';
import { Headline, Spinner, ActionButton, Modal, Container } from '../UI';
// Subcomponents
import AppGrid from './AppGrid/AppGrid';
import AppForm from './AppForm/AppForm';
import AppTable from './AppTable/AppTable';
import { AppGrid } from './AppGrid/AppGrid';
import { AppForm } from './AppForm/AppForm';
import { AppTable } from './AppTable/AppTable';
// Utils
import { appTemplate } from '../../utility';
import { State } from '../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../store';
interface ComponentProps {
getApps: Function;
apps: App[];
loading: boolean;
interface Props {
searching: boolean;
}
const Apps = (props: ComponentProps): JSX.Element => {
const { getApps, apps, loading, searching = false } = props;
export const Apps = (props: Props): JSX.Element => {
const { apps, loading } = useSelector((state: State) => state.apps);
const dispatch = useDispatch();
const { getApps } = bindActionCreators(actionCreators, dispatch);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [isInEdit, setIsInEdit] = useState(false);
@ -95,12 +93,3 @@ const Apps = (props: ComponentProps): JSX.Element => {
</Container>
);
};
const mapStateToProps = (state: GlobalState) => {
return {
apps: state.app.apps,
loading: state.app.loading,
};
};
export default connect(mapStateToProps, { getApps })(Apps);