From d1738a0a3e73478f0c3c83bb8036ef67924c4327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Mon, 8 Nov 2021 23:40:30 +0100 Subject: [PATCH] Set app visibility --- .../src/components/Apps/AppForm/AppForm.tsx | 66 +++++----- .../src/components/Apps/AppTable/AppTable.tsx | 5 +- client/src/components/Apps/Apps.tsx | 14 +-- client/src/interfaces/App.ts | 16 ++- client/src/store/reducers/app.ts | 113 ++++++++++-------- .../utility/templateObjects/appTemplate.ts | 17 +++ client/src/utility/templateObjects/index.ts | 1 + 7 files changed, 127 insertions(+), 105 deletions(-) create mode 100644 client/src/utility/templateObjects/appTemplate.ts diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx index d44418e..c3ffdad 100644 --- a/client/src/components/Apps/AppForm/AppForm.tsx +++ b/client/src/components/Apps/AppForm/AppForm.tsx @@ -8,6 +8,7 @@ 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 { inputHandler, newAppTemplate } from '../../../utility'; interface ComponentProps { modalHandler: () => void; @@ -19,32 +20,27 @@ interface ComponentProps { const AppForm = (props: ComponentProps): JSX.Element => { const [useCustomIcon, toggleUseCustomIcon] = useState(false); const [customIcon, setCustomIcon] = useState(null); - const [formData, setFormData] = useState({ - name: '', - url: '', - icon: '', - }); + const [formData, setFormData] = useState(newAppTemplate); useEffect(() => { if (props.app) { setFormData({ - name: props.app.name, - url: props.app.url, - icon: props.app.icon, + ...props.app, }); } else { - setFormData({ - name: '', - url: '', - icon: '', - }); + setFormData(newAppTemplate); } }, [props.app]); - const inputChangeHandler = (e: ChangeEvent): void => { - setFormData({ - ...formData, - [e.target.name]: e.target.value, + const inputChangeHandler = ( + e: ChangeEvent, + options?: { isNumber?: boolean; isBool?: boolean } + ) => { + inputHandler({ + e, + options, + setStateHandler: setFormData, + state: formData, }); }; @@ -86,11 +82,7 @@ const AppForm = (props: ComponentProps): JSX.Element => { } } - setFormData({ - name: '', - url: '', - icon: '', - }); + setFormData(newAppTemplate); }; return ( @@ -98,6 +90,7 @@ const AppForm = (props: ComponentProps): JSX.Element => { modalHandler={props.modalHandler} formHandler={formSubmitHandler} > + {/* NAME */} { onChange={(e) => inputChangeHandler(e)} /> + + {/* URL */} { value={formData.url} onChange={(e) => inputChangeHandler(e)} /> - - - {' '} - Check supported URL formats - - + + {/* ICON */} {!useCustomIcon ? ( // use mdi icon @@ -182,6 +169,21 @@ const AppForm = (props: ComponentProps): JSX.Element => { )} + + {/* VISIBILITY */} + + + + + {!props.app ? ( ) : ( diff --git a/client/src/components/Apps/AppTable/AppTable.tsx b/client/src/components/Apps/AppTable/AppTable.tsx index 3f68d76..631bd74 100644 --- a/client/src/components/Apps/AppTable/AppTable.tsx +++ b/client/src/components/Apps/AppTable/AppTable.tsx @@ -114,7 +114,7 @@ const AppTable = (props: ComponentProps): JSX.Element => { {(provided) => ( {localApps.map((app: App, index): JSX.Element => { @@ -143,6 +143,9 @@ const AppTable = (props: ComponentProps): JSX.Element => { + {!snapshot.isDragging && (
{app.name} {app.url} {app.icon} + {app.isPublic ? 'Visible' : 'Hidden'} +
{ const [modalIsOpen, setModalIsOpen] = useState(false); const [isInEdit, setIsInEdit] = useState(false); const [isInUpdate, setIsInUpdate] = useState(false); - const [appInUpdate, setAppInUpdate] = useState({ - name: 'string', - url: 'string', - icon: 'string', - isPinned: false, - orderId: 0, - id: 0, - createdAt: new Date(), - updatedAt: new Date(), - }); + const [appInUpdate, setAppInUpdate] = useState(appTemplate); useEffect(() => { if (apps.length === 0) { diff --git a/client/src/interfaces/App.ts b/client/src/interfaces/App.ts index e4314a5..fc4a738 100644 --- a/client/src/interfaces/App.ts +++ b/client/src/interfaces/App.ts @@ -1,15 +1,13 @@ import { Model } from '.'; -export interface App extends Model { - name: string; - url: string; - icon: string; - isPinned: boolean; - orderId: number; -} - export interface NewApp { name: string; url: string; icon: string; -} \ No newline at end of file + isPublic: boolean; +} + +export interface App extends Model, NewApp { + orderId: number; + isPinned: boolean; +} diff --git a/client/src/store/reducers/app.ts b/client/src/store/reducers/app.ts index 0935819..9d4c359 100644 --- a/client/src/store/reducers/app.ts +++ b/client/src/store/reducers/app.ts @@ -11,108 +11,115 @@ export interface State { const initialState: State = { loading: true, apps: [], - errors: undefined -} + errors: undefined, +}; const getApps = (state: State, action: Action): State => { return { ...state, loading: true, - errors: undefined - } -} + errors: undefined, + }; +}; const getAppsSuccess = (state: State, action: Action): State => { return { ...state, loading: false, - apps: action.payload - } -} + apps: action.payload, + }; +}; const getAppsError = (state: State, action: Action): State => { return { ...state, loading: false, - errors: action.payload - } -} + errors: action.payload, + }; +}; const pinApp = (state: State, action: Action): State => { const tmpApps = [...state.apps]; const changedApp = tmpApps.find((app: App) => app.id === action.payload.id); - + if (changedApp) { changedApp.isPinned = action.payload.isPinned; } - + return { ...state, - apps: tmpApps - } -} + apps: tmpApps, + }; +}; const addAppSuccess = (state: State, action: Action): State => { return { ...state, - apps: [...state.apps, action.payload] - } -} + apps: [...state.apps, action.payload], + }; +}; const deleteApp = (state: State, action: Action): State => { - const tmpApps = [...state.apps].filter((app: App) => app.id !== action.payload); - return { ...state, - apps: tmpApps - } -} + apps: [...state.apps].filter((app: App) => app.id !== action.payload), + }; +}; const updateApp = (state: State, action: Action): State => { - const tmpApps = [...state.apps]; - const appInUpdate = tmpApps.find((app: App) => app.id === action.payload.id); - - if (appInUpdate) { - appInUpdate.name = action.payload.name; - appInUpdate.url = action.payload.url; - appInUpdate.icon = action.payload.icon; - } + const appIdx = state.apps.findIndex((app) => app.id === action.payload.id); return { ...state, - apps: tmpApps - } -} + apps: [ + ...state.apps.slice(0, appIdx), + { + ...action.payload, + }, + ...state.apps.slice(appIdx + 1), + ], + }; +}; const reorderApps = (state: State, action: Action): State => { return { ...state, - apps: action.payload - } -} + apps: action.payload, + }; +}; const sortApps = (state: State, action: Action): State => { const sortedApps = sortData(state.apps, action.payload); return { ...state, - apps: sortedApps - } -} + apps: sortedApps, + }; +}; const appReducer = (state = initialState, action: Action) => { switch (action.type) { - case ActionTypes.getApps: return getApps(state, action); - case ActionTypes.getAppsSuccess: return getAppsSuccess(state, action); - case ActionTypes.getAppsError: return getAppsError(state, action); - case ActionTypes.pinApp: return pinApp(state, action); - case ActionTypes.addAppSuccess: return addAppSuccess(state, action); - case ActionTypes.deleteApp: return deleteApp(state, action); - case ActionTypes.updateApp: return updateApp(state, action); - case ActionTypes.reorderApps: return reorderApps(state, action); - case ActionTypes.sortApps: return sortApps(state, action); - default: return state; + case ActionTypes.getApps: + return getApps(state, action); + case ActionTypes.getAppsSuccess: + return getAppsSuccess(state, action); + case ActionTypes.getAppsError: + return getAppsError(state, action); + case ActionTypes.pinApp: + return pinApp(state, action); + case ActionTypes.addAppSuccess: + return addAppSuccess(state, action); + case ActionTypes.deleteApp: + return deleteApp(state, action); + case ActionTypes.updateApp: + return updateApp(state, action); + case ActionTypes.reorderApps: + return reorderApps(state, action); + case ActionTypes.sortApps: + return sortApps(state, action); + default: + return state; } -} +}; -export default appReducer; \ No newline at end of file +export default appReducer; diff --git a/client/src/utility/templateObjects/appTemplate.ts b/client/src/utility/templateObjects/appTemplate.ts new file mode 100644 index 0000000..8dad83d --- /dev/null +++ b/client/src/utility/templateObjects/appTemplate.ts @@ -0,0 +1,17 @@ +import { App, NewApp } from '../../interfaces'; + +export const newAppTemplate: NewApp = { + name: '', + url: '', + icon: '', + isPublic: true, +}; + +export const appTemplate: App = { + ...newAppTemplate, + isPinned: false, + orderId: 0, + id: 0, + createdAt: new Date(), + updatedAt: new Date(), +}; diff --git a/client/src/utility/templateObjects/index.ts b/client/src/utility/templateObjects/index.ts index 3f2d57c..228bed4 100644 --- a/client/src/utility/templateObjects/index.ts +++ b/client/src/utility/templateObjects/index.ts @@ -1,2 +1,3 @@ export * from './configTemplate'; export * from './settingsTemplate'; +export * from './appTemplate';