github-mirrors/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-04-25 06:17:12 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add app categories (#0)

Browse source 
add app categories
This commit is contained in:
François Darveau 2021-06-26 15:06:47 -04:00 • committed by François Darveau
parent 6f44200a3c
commit 31cf2bc5ad
24 changed files with 1772 additions and 939 deletions
Download patch file Download diff file Expand all files Collapse all files

17
.vscode/launch.json vendored Normal file
View file

@ -0,0 +1,17 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "dev-server"
]
}
]
}

39
client/src/components/Apps/AppCard/AppCard.module.css
View file

@ -1,10 +1,15 @@
.AppCard { .AppCard {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.AppCard h3 {
color: var(--color-accent);
margin-bottom: 10px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.AppCardIcon { .AppCardIcon {
width: 35px; width: 35px;
height: 35px; height: 35px;
@ -19,7 +24,7 @@
font-size: 1em; font-size: 1em;
font-weight: 500; font-weight: 500;
color: var(--color-primary); color: var(--color-primary);
margin-bottom: -4px; margin-bottom: -10px;
} }
.AppCardDetails span { .AppCardDetails span {
@ -29,16 +34,24 @@
opacity: 1; opacity: 1;
} }
@media (min-width: 500px) { .Apps {
.AppCard { display: flex;
padding: 2px; flex-direction: column;
border-radius: 4px; padding: 2px;
transition: all 0.1s; border-radius: 4px;
} transition: all 0.1s;
}
.AppCard:hover { .Apps a {
background-color: rgba(0, 0, 0, 0.2); line-height: 2;
} transition: all 0.25s;
display: flex;
width: 100%;
align-items: center;
}
.Apps a:hover {
background-color: rgba(0, 0, 0, 0.2);
} }
.CustomIcon { .CustomIcon {

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

@ -1,57 +1,64 @@
import classes from './AppCard.module.css'; import { App, Category } from '../../../interfaces';
import Icon from '../../UI/Icons/Icon/Icon';
import { iconParser, urlParser } from '../../../utility'; import { iconParser, urlParser } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon';
import { App } from '../../../interfaces'; import classes from './AppCard.module.css';
import { searchConfig } from '../../../utility';
interface ComponentProps { interface ComponentProps {
app: App; category: Category;
apps: App[]
pinHandler?: Function; pinHandler?: Function;
} }
const AppCard = (props: ComponentProps): JSX.Element => { const AppCard = (props: ComponentProps): JSX.Element => {
const [displayUrl, redirectUrl] = urlParser(props.app.url);
let iconEl: JSX.Element;
const { icon } = props.app;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
iconEl = (
<img
src={`/uploads/${icon}`}
alt={`${props.app.name} icon`}
className={classes.CustomIcon}
/>
);
} else if (/.(svg)$/i.test(icon)) {
iconEl = (
<div className={classes.CustomIcon}>
<svg
data-src={`/uploads/${icon}`}
fill='var(--color-primary)'
className={classes.CustomIcon}
></svg>
</div>
);
} else {
iconEl = <Icon icon={iconParser(icon)} />;
}
return ( return (
<a <div className={classes.AppCard}>
href={redirectUrl} <h3>{props.category.name}</h3>
target={searchConfig('appsSameTab', false) ? '' : '_blank'} <div className={classes.Apps}>
rel='noreferrer' {props.apps.map((app: App) => {
className={classes.AppCard} const [displayUrl, redirectUrl] = urlParser(app.url);
>
<div className={classes.AppCardIcon}>{iconEl}</div> let iconEl: JSX.Element;
<div className={classes.AppCardDetails}> const { icon } = app;
<h5>{props.app.name}</h5>
<span>{displayUrl}</span> if (/.(jpeg|jpg|png)$/i.test(icon)) {
iconEl = (
<img
src={`/uploads/${icon}`}
alt={`${app.name} icon`}
className={classes.CustomIcon}
/>
);
} else if (/.(svg)$/i.test(icon)) {
iconEl = (
<div className={classes.CustomIcon}>
<svg
data-src={`/uploads/${icon}`}
fill='var(--color-primary)'
className={classes.CustomIcon}
></svg>
</div>
);
} else {
iconEl = <Icon icon={iconParser(icon)} />;
}
return (
<a
href={redirectUrl}
target='_blank'
rel='noreferrer'
key={`app-${app.id}`}>
<div className={classes.AppCardIcon}>{iconEl}</div>
<div className={classes.AppCardDetails}>
<h5>{app.name}</h5>
<span>{displayUrl}</span>
</div>
</a>
)
})}
</div> </div>
</a> </div>
); )
}; }
export default AppCard; export default AppCard;

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

@ -1,59 +1,77 @@
import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react'; import { ChangeEvent, Dispatch, Fragment, SetStateAction, SyntheticEvent, useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { addApp, updateApp } from '../../../store/actions';
import { App, NewApp } from '../../../interfaces';
import classes from './AppForm.module.css'; import { App, Category, GlobalState, NewApp, NewCategory, NewNotification } from '../../../interfaces';
import {
import ModalForm from '../../UI/Forms/ModalForm/ModalForm'; addApp,
import InputGroup from '../../UI/Forms/InputGroup/InputGroup'; addAppCategory,
createNotification,
getAppCategories,
updateApp,
updateAppCategory,
} from '../../../store/actions';
import Button from '../../UI/Buttons/Button/Button'; import Button from '../../UI/Buttons/Button/Button';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import { ContentType } from '../Apps';
import classes from './AppForm.module.css';
interface ComponentProps { interface ComponentProps {
modalHandler: () => void; modalHandler: () => void;
addApp: (formData: NewApp | FormData) => any; contentType: ContentType;
updateApp: (id: number, formData: NewApp | FormData) => any; categories: Category[];
category?: Category;
app?: App; app?: App;
addAppCategory: (formData: NewCategory) => void;
addApp: (formData: NewApp | FormData) => void;
updateAppCategory: (id: number, formData: NewCategory) => void;
updateApp: (id: number, formData: NewApp | FormData, previousCategoryId: number) => void;
createNotification: (notification: NewNotification) => void;
} }
const AppForm = (props: ComponentProps): JSX.Element => { const AppForm = (props: ComponentProps): JSX.Element => {
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false); const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
const [customIcon, setCustomIcon] = useState<File | null>(null); const [customIcon, setCustomIcon] = useState<File | null>(null);
const [formData, setFormData] = useState<NewApp>({ const [categoryData, setCategoryData] = useState<NewCategory>({
name: '',
type: 'apps'
})
const [appData, setAppData] = useState<NewApp>({
name: '', name: '',
url: '', url: '',
categoryId: -1,
icon: '', icon: '',
}); });
// Load category data if provided for editing
useEffect(() => {
if (props.category) {
setCategoryData({ name: props.category.name, type: props.category.type });
} else {
setCategoryData({ name: '', type: "apps" });
}
}, [props.category]);
// Load app data if provided for editing
useEffect(() => { useEffect(() => {
if (props.app) { if (props.app) {
setFormData({ setAppData({
name: props.app.name, name: props.app.name,
url: props.app.url, url: props.app.url,
categoryId: props.app.categoryId,
icon: props.app.icon, icon: props.app.icon,
}); });
} else { } else {
setFormData({ setAppData({
name: '', name: '',
url: '', url: '',
categoryId: -1,
icon: '', icon: '',
}); });
} }
}, [props.app]); }, [props.app]);
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
if (e.target.files) {
setCustomIcon(e.target.files[0]);
}
};
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => { const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
e.preventDefault(); e.preventDefault();
@ -63,132 +81,241 @@ const AppForm = (props: ComponentProps): JSX.Element => {
if (customIcon) { if (customIcon) {
data.append('icon', customIcon); data.append('icon', customIcon);
} }
data.append('name', formData.name); data.append('name', appData.name);
data.append('url', formData.url); data.append('url', appData.url);
data.append('categoryId', appData.categoryId.toString());
return data; return data;
}; };
if (!props.app) { if (!props.category && !props.app) {
if (customIcon) { // Add new
const data = createFormData(); if (props.contentType === ContentType.category) {
props.addApp(data); // Add category
} else { props.addAppCategory(categoryData);
props.addApp(formData); setCategoryData({ name: '', type: 'apps' });
} else if (props.contentType === ContentType.app) {
// Add app
if (appData.categoryId === -1) {
props.createNotification({
title: 'Error',
message: 'Please select category'
})
return;
}
if (customIcon) {
const data = createFormData();
props.addApp(data);
} else {
props.addApp(appData);
}
setAppData({
name: '',
url: '',
categoryId: appData.categoryId,
icon: ''
})
} }
} else { } else {
if (customIcon) { // Update
const data = createFormData(); if (props.contentType === ContentType.category && props.category) {
props.updateApp(props.app.id, data); // Update category
} else { props.updateAppCategory(props.category.id, categoryData);
props.updateApp(props.app.id, formData); setCategoryData({ name: '', type: 'apps' });
props.modalHandler(); } else if (props.contentType === ContentType.app && props.app) {
// Update app
if (customIcon) {
const data = createFormData();
props.updateApp(props.app.id, data, props.app.categoryId);
} else {
props.updateApp(props.app.id, appData, props.app.categoryId);
props.modalHandler();
}
} }
}
setFormData({ setAppData({
name: '', name: '',
url: '', url: '',
icon: '', categoryId: -1,
}); icon: ''
}; });
setCustomIcon(null);
}
}
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>, setDataFunction: Dispatch<SetStateAction<any>>, data: any): void => {
setDataFunction({
...data,
[e.target.name]: e.target.value
})
}
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
if (e.target.files) {
setCustomIcon(e.target.files[0]);
}
}
let button = <Button>Submit</Button>
if (!props.category && !props.app) {
if (props.contentType === ContentType.category) {
button = <Button>Add new category</Button>;
} else {
button = <Button>Add new app</Button>;
}
} else if (props.category) {
button = <Button>Update category</Button>
} else if (props.app) {
button = <Button>Update app</Button>
}
return ( return (
<ModalForm <ModalForm
modalHandler={props.modalHandler} modalHandler={props.modalHandler}
formHandler={formSubmitHandler} formHandler={formSubmitHandler}
> >
<InputGroup> {props.contentType === ContentType.category
<label htmlFor="name">App Name</label> ? (
<input <Fragment>
type="text" <InputGroup>
name="name" <label htmlFor='categoryName'>Category Name</label>
id="name" <input
placeholder="Bookstack" type='text'
required name='name'
value={formData.name} id='categoryName'
onChange={(e) => inputChangeHandler(e)} placeholder='Social Media'
/> required
</InputGroup> value={categoryData.name}
<InputGroup> onChange={(e) => inputChangeHandler(e, setCategoryData, categoryData)}
<label htmlFor="url">App URL</label> />
<input </InputGroup>
type="text" </Fragment>
name="url" )
id="url" : (
placeholder="bookstack.example.com" <Fragment>
required <InputGroup>
value={formData.url} <label htmlFor='name'>App Name</label>
onChange={(e) => inputChangeHandler(e)} <input
/> type='text'
<span> name='name'
<a id='name'
href="https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks" placeholder='Bookstack'
target="_blank" required
rel="noreferrer" value={appData.name}
> onChange={(e) => inputChangeHandler(e, setAppData, appData)}
{' '} />
Check supported URL formats </InputGroup>
</a> <InputGroup>
</span> <label htmlFor='url'>App URL</label>
</InputGroup> <input
{!useCustomIcon ? ( type='text'
// use mdi icon name='url'
<InputGroup> id='url'
<label htmlFor="icon">App Icon</label> placeholder='bookstack.example.com'
<input required
type="text" value={appData.url}
name="icon" onChange={(e) => inputChangeHandler(e, setAppData, appData)}
id="icon" />
placeholder="book-open-outline" <span>
required <a
value={formData.icon} href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
onChange={(e) => inputChangeHandler(e)} target='_blank'
/> rel='noreferrer'
<span> >
Use icon name from MDI. {' '}Check supported URL formats
<a href="https://materialdesignicons.com/" target="blank"> </a>
{' '} </span>
Click here for reference </InputGroup>
</a> <InputGroup>
</span> <label htmlFor='categoryId'>App Category</label>
<span <select
onClick={() => toggleUseCustomIcon(!useCustomIcon)} name='categoryId'
className={classes.Switch} id='categoryId'
> required
Switch to custom icon upload onChange={(e) => inputChangeHandler(e, setAppData, appData)}
</span> value={appData.categoryId}
</InputGroup> >
) : ( <option value={-1}>Select category</option>
// upload custom icon {props.categories.map((category: Category): JSX.Element => {
<InputGroup> return (
<label htmlFor="icon">App Icon</label> <option
<input key={category.id}
type="file" value={category.id}
name="icon" >
id="icon" {category.name}
required </option>
onChange={(e) => fileChangeHandler(e)} )
accept=".jpg,.jpeg,.png,.svg" })}
/> </select>
<span </InputGroup>
onClick={() => { {!useCustomIcon
setCustomIcon(null); // use mdi icon
toggleUseCustomIcon(!useCustomIcon); ? (<InputGroup>
}} <label htmlFor='icon'>App Icon</label>
className={classes.Switch} <input
> type='text'
Switch to MDI name='icon'
</span> id='icon'
</InputGroup> placeholder='book-open-outline'
)} required
{!props.app ? ( value={appData.icon}
<Button>Add new application</Button> onChange={(e) => inputChangeHandler(e, setAppData, appData)}
) : ( />
<Button>Update application</Button> <span>
)} Use icon name from MDI.
<a
href='https://materialdesignicons.com/'
target='blank'>
{' '}Click here for reference
</a>
</span>
<span
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}>
Switch to custom icon upload
</span>
</InputGroup>)
// upload custom icon
: (<InputGroup>
<label htmlFor='icon'>App Icon</label>
<input
type='file'
name='icon'
id='icon'
required
onChange={(e) => fileChangeHandler(e)}
accept=".jpg,.jpeg,.png,.svg"
/>
<span
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}>
Switch to MDI
</span>
</InputGroup>)
}
</Fragment>
)
}
{button}
</ModalForm> </ModalForm>
); );
}; };
export default connect(null, { addApp, updateApp })(AppForm); const mapStateToProps = (state: GlobalState) => {
return {
categories: state.app.categories
}
}
const dispatchMap = {
getAppCategories,
addAppCategory,
addApp,
updateAppCategory,
updateApp,
createNotification
}
export default connect(mapStateToProps, dispatchMap)(AppForm);

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

@ -1,28 +1,29 @@
import classes from './AppGrid.module.css';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { App } from '../../../interfaces/App';
import { App, Category } from '../../../interfaces';
import AppCard from '../AppCard/AppCard'; import AppCard from '../AppCard/AppCard';
import classes from './AppGrid.module.css';
interface ComponentProps { interface ComponentProps {
apps: App[]; categories: Category[];
totalApps?: number; apps: App[]
totalCategories?: number;
searching: boolean; searching: boolean;
} }
const AppGrid = (props: ComponentProps): JSX.Element => { const AppGrid = (props: ComponentProps): JSX.Element => {
let apps: JSX.Element; let apps: JSX.Element;
if (props.apps.length > 0) { if (props.categories.length > 0) {
apps = ( apps = (
<div className={classes.AppGrid}> <div className={classes.AppGrid}>
{props.apps.map((app: App): JSX.Element => { {props.categories.map((category: Category): JSX.Element => {
return <AppCard key={app.id} app={app} />; return <AppCard key={category.id} category={category} apps={props.apps.filter((app: App) => app.categoryId === category.id)} />
})} })}
</div> </div>
); );
} else { } else {
if (props.totalApps) { if (props.totalCategories) {
if (props.searching) { if (props.searching) {
apps = ( apps = (
<p className={classes.AppsMessage}> <p className={classes.AppsMessage}>
@ -32,7 +33,7 @@ const AppGrid = (props: ComponentProps): JSX.Element => {
} else { } else {
apps = ( apps = (
<p className={classes.AppsMessage}> <p className={classes.AppsMessage}>
There are no pinned applications. You can pin them from the{' '} There are no pinned application categories. You can pin them from the{' '}
<Link to="/applications">/applications</Link> menu <Link to="/applications">/applications</Link> menu
</p> </p>
); );
@ -40,7 +41,7 @@ const AppGrid = (props: ComponentProps): JSX.Element => {
} else { } else {
apps = ( apps = (
<p className={classes.AppsMessage}> <p className={classes.AppsMessage}>
You don't have any applications. You can add a new one from{' '} You don't have any applications. You can add a new one from the{' '}
<Link to="/applications">/applications</Link> menu <Link to="/applications">/applications</Link> menu
</p> </p>
); );

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

@ -1,73 +1,101 @@
import { Fragment, KeyboardEvent, useState, useEffect } from 'react'; import { Fragment, KeyboardEvent, useEffect, useState } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// Redux import { App, Category, NewNotification } from '../../../interfaces';
import { connect } from 'react-redux'; import {
import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions'; createNotification,
deleteApp,
// Typescript deleteAppCategory,
import { App, GlobalState, NewNotification } from '../../../interfaces'; pinApp,
pinAppCategory,
// CSS reorderAppCategories,
import classes from './AppTable.module.css'; reorderApps,
updateConfig,
// UI } from '../../../store/actions';
import { searchConfig } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon'; import Icon from '../../UI/Icons/Icon/Icon';
import Table from '../../UI/Table/Table'; import Table from '../../UI/Table/Table';
import { ContentType } from '../Apps';
// Utils import classes from './AppTable.module.css';
import { searchConfig } from '../../../utility';
interface ComponentProps { interface ComponentProps {
contentType: ContentType;
categories: Category[];
apps: App[]; apps: App[];
pinAppCategory: (category: Category) => void;
deleteAppCategory: (id: number) => void;
reorderAppCategories: (categories: Category[]) => void;
updateHandler: (data: Category | App) => void;
pinApp: (app: App) => void; pinApp: (app: App) => void;
deleteApp: (id: number) => void; deleteApp: (id: number) => void;
updateAppHandler: (app: App) => void;
reorderApps: (apps: App[]) => void; reorderApps: (apps: App[]) => void;
updateConfig: (formData: any) => void; updateConfig: (formData: any) => void;
createNotification: (notification: NewNotification) => void; createNotification: (notification: NewNotification) => void;
} }
const AppTable = (props: ComponentProps): JSX.Element => { const AppTable = (props: ComponentProps): JSX.Element => {
const [localCategories, setLocalCategories] = useState<Category[]>([]);
const [localApps, setLocalApps] = useState<App[]>([]); const [localApps, setLocalApps] = useState<App[]>([]);
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false); const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
// Copy categories array
useEffect(() => {
setLocalCategories([...props.categories]);
}, [props.categories]);
// Copy apps array // Copy apps array
useEffect(() => { useEffect(() => {
setLocalApps([...props.apps]); setLocalApps([...props.apps]);
}, [props.apps]) }, [props.apps]);
// Check ordering // Check ordering
useEffect(() => { useEffect(() => {
const order = searchConfig('useOrdering', ''); const order = searchConfig("useOrdering", "");
if (order === 'orderId') { if (order === "orderId") {
setIsCustomOrder(true); setIsCustomOrder(true);
} }
}, []) }, []);
const deleteCategoryHandler = (category: Category): void => {
const proceed = window.confirm(
`Are you sure you want to delete ${category.name}? It will delete ALL assigned apps`
);
if (proceed) {
props.deleteAppCategory(category.id);
}
};
const deleteAppHandler = (app: App): void => { const deleteAppHandler = (app: App): void => {
const proceed = window.confirm(`Are you sure you want to delete ${app.name} at ${app.url} ?`); const proceed = window.confirm(
`Are you sure you want to delete ${app.name} at ${app.url} ?`
);
if (proceed) { if (proceed) {
props.deleteApp(app.id); props.deleteApp(app.id);
} }
} };
// Support keyboard navigation for actions // Support keyboard navigation for actions
const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => { const keyboardActionHandler = (
if (e.key === 'Enter') { e: KeyboardEvent,
handler(app); object: any,
handler: Function
) => {
if (e.key === "Enter") {
handler(object);
} }
} };
const dragEndHanlder = (result: DropResult): void => { const dragEndHandler = (result: DropResult): void => {
if (!isCustomOrder) { if (!isCustomOrder) {
props.createNotification({ props.createNotification({
title: 'Error', title: "Error",
message: 'Custom order is disabled' message: "Custom order is disabled",
}) });
return; return;
} }
@ -75,106 +103,251 @@ const AppTable = (props: ComponentProps): JSX.Element => {
return; return;
} }
const tmpApps = [...localApps]; if (props.contentType === ContentType.app) {
const [movedApp] = tmpApps.splice(result.source.index, 1); const tmpApps = [...localApps];
tmpApps.splice(result.destination.index, 0, movedApp); const [movedApp] = tmpApps.splice(result.source.index, 1);
tmpApps.splice(result.destination.index, 0, movedApp);
setLocalApps(tmpApps); setLocalApps(tmpApps);
props.reorderApps(tmpApps); props.reorderApps(tmpApps);
} } else if (props.contentType === ContentType.category) {
const tmpCategories = [...localCategories];
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedCategory);
return ( setLocalCategories(tmpCategories);
<Fragment> props.reorderAppCategories(tmpCategories);
<div className={classes.Message}> }
{isCustomOrder };
? <p>You can drag and drop single rows to reorder application</p>
: <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p> if (props.contentType === ContentType.category) {
} return (
</div> <Fragment>
<DragDropContext onDragEnd={dragEndHanlder}> <div className={classes.Message}>
<Droppable droppableId='apps'> {isCustomOrder ? (
{(provided) => ( <p>You can drag and drop single rows to reorder categories</p>
<Table headers={[ ) : (
'Name', <p>
'URL', Custom order is disabled. You can change it in{" "}
'Icon', <Link to="/settings/other">settings</Link>
'Actions' </p>
]}
innerRef={provided.innerRef}>
{localApps.map((app: App, index): JSX.Element => {
return (
<Draggable key={app.id} draggableId={app.id.toString()} index={index}>
{(provided, snapshot) => {
const style = {
border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
borderRadius: '4px',
...provided.draggableProps.style,
};
return (
<tr
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={style}
>
<td style={{ width:'200px' }}>{app.name}</td>
<td style={{ width:'200px' }}>{app.url}</td>
<td style={{ width:'200px' }}>{app.icon}</td>
{!snapshot.isDragging && (
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
tabIndex={0}>
<Icon icon='mdiDelete' />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
tabIndex={0}>
<Icon icon='mdiPencil' />
</div>
<div
className={classes.TableAction}
onClick={() => props.pinApp(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
tabIndex={0}>
{app.isPinned
? <Icon icon='mdiPinOff' color='var(--color-accent)' />
: <Icon icon='mdiPin' />
}
</div>
</td>
)}
</tr>
)
}}
</Draggable>
)
})}
</Table>
)} )}
</Droppable> </div>
</DragDropContext> <DragDropContext onDragEnd={dragEndHandler}>
</Fragment> <Droppable droppableId="categories">
) {(provided) => (
} <Table headers={["Name", "Actions"]} innerRef={provided.innerRef}>
{localCategories.map(
(category: Category, index): JSX.Element => {
return (
<Draggable
key={category.id}
draggableId={category.id.toString()}
index={index}
>
{(provided, snapshot) => {
const style = {
border: snapshot.isDragging
? "1px solid var(--color-accent)"
: "none",
borderRadius: "4px",
...provided.draggableProps.style,
};
const mapStateToProps = (state: GlobalState) => { return (
return { <tr
apps: state.app.apps {...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={style}
>
<td>{category.name}</td>
{!snapshot.isDragging && (
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() =>
deleteCategoryHandler(category)
}
onKeyDown={(e) =>
keyboardActionHandler(
e,
category,
deleteCategoryHandler
)
}
tabIndex={0}
>
<Icon icon="mdiDelete" />
</div>
<div
className={classes.TableAction}
onClick={() =>
props.updateHandler(category)
}
tabIndex={0}
>
<Icon icon="mdiPencil" />
</div>
<div
className={classes.TableAction}
onClick={() => props.pinAppCategory(category)}
onKeyDown={(e) =>
keyboardActionHandler(
e,
category,
props.pinAppCategory
)
}
tabIndex={0}
>
{category.isPinned ? (
<Icon
icon="mdiPinOff"
color="var(--color-accent)"
/>
) : (
<Icon icon="mdiPin" />
)}
</div>
</td>
)}
</tr>
);
}}
</Draggable>
);
}
)}
</Table>
)}
</Droppable>
</DragDropContext>
</Fragment>
);
} else {
return (
<Fragment>
<div className={classes.Message}>
{isCustomOrder ? (
<p>You can drag and drop single rows to reorder application</p>
) : (
<p>
Custom order is disabled. You can change it in{" "}
<Link to="/settings/other">settings</Link>
</p>
)}
</div>
<DragDropContext onDragEnd={dragEndHandler}>
<Droppable droppableId="apps">
{(provided) => (
<Table
headers={["Name", "URL", "Icon", "Category", "Actions"]}
innerRef={provided.innerRef}
>
{localApps.map((app: App, index): JSX.Element => {
return (
<Draggable
key={app.id}
draggableId={app.id.toString()}
index={index}
>
{(provided, snapshot) => {
const style = {
border: snapshot.isDragging
? "1px solid var(--color-accent)"
: "none",
borderRadius: "4px",
...provided.draggableProps.style,
};
const category = localCategories.find((category: Category) => category.id === app.categoryId);
const categoryName = category?.name;
return (
<tr
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={style}
>
<td style={{ width: "200px" }}>{app.name}</td>
<td style={{ width: "200px" }}>{app.url}</td>
<td style={{ width: "200px" }}>{app.icon}</td>
<td style={{ width: "200px" }}>{categoryName}</td>
{!snapshot.isDragging && (
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteAppHandler(app)}
onKeyDown={(e) =>
keyboardActionHandler(
e,
app,
deleteAppHandler
)
}
tabIndex={0}
>
<Icon icon="mdiDelete" />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateHandler(app)}
onKeyDown={(e) =>
keyboardActionHandler(
e,
app,
props.updateHandler
)
}
tabIndex={0}
>
<Icon icon="mdiPencil" />
</div>
<div
className={classes.TableAction}
onClick={() => props.pinApp(app)}
onKeyDown={(e) =>
keyboardActionHandler(e, app, props.pinApp)
}
tabIndex={0}
>
{app.isPinned ? (
<Icon
icon="mdiPinOff"
color="var(--color-accent)"
/>
) : (
<Icon icon="mdiPin" />
)}
</div>
</td>
)}
</tr>
);
}}
</Draggable>
);
})}
</Table>
)}
</Droppable>
</DragDropContext>
</Fragment>
);
} }
} };
const actions = { const actions = {
pinAppCategory,
deleteAppCategory,
reorderAppCategories,
pinApp, pinApp,
deleteApp, deleteApp,
reorderApps, reorderApps,
updateConfig, updateConfig,
createNotification createNotification,
} };
export default connect(mapStateToProps, actions)(AppTable); export default connect(null, actions)(AppTable);

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

@ -1,45 +1,63 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// Redux import { App, Category, GlobalState } from '../../interfaces';
import { connect } from 'react-redux'; import { getAppCategories, getApps } from '../../store/actions';
import { getApps } from '../../store/actions';
// Typescript
import { App, GlobalState } 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 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 Modal from '../UI/Modal/Modal';
import Spinner from '../UI/Spinner/Spinner';
// Subcomponents
import AppGrid from './AppGrid/AppGrid';
import AppForm from './AppForm/AppForm'; import AppForm from './AppForm/AppForm';
import AppGrid from './AppGrid/AppGrid';
import classes from './Apps.module.css';
import AppTable from './AppTable/AppTable'; import AppTable from './AppTable/AppTable';
interface ComponentProps { interface ComponentProps {
getApps: Function;
apps: App[];
loading: boolean; loading: boolean;
categories: Category[];
getAppCategories: () => void;
apps: App[];
getApps: () => void;
searching: boolean; searching: boolean;
} }
export enum ContentType {
category,
app
}
const Apps = (props: ComponentProps): JSX.Element => { const Apps = (props: ComponentProps): JSX.Element => {
const { getApps, apps, loading, searching = false } = props; const {
apps,
getApps,
getAppCategories,
categories,
loading,
searching = false
} = props;
const [modalIsOpen, setModalIsOpen] = useState(false); const [modalIsOpen, setModalIsOpen] = useState(false);
const [formContentType, setFormContentType] = useState(ContentType.category);
const [isInEdit, setIsInEdit] = useState(false); const [isInEdit, setIsInEdit] = useState(false);
const [tableContentType, setTableContentType] = useState(ContentType.category);
const [isInUpdate, setIsInUpdate] = useState(false); const [isInUpdate, setIsInUpdate] = useState(false);
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
name: "",
id: -1,
isPinned: false,
orderId: 0,
type: "apps",
bookmarks: [],
createdAt: new Date(),
updatedAt: new Date()
})
const [appInUpdate, setAppInUpdate] = useState<App>({ const [appInUpdate, setAppInUpdate] = useState<App>({
name: 'string', name: "string",
url: 'string', url: "string",
icon: 'string', categoryId: -1,
icon: "string",
isPinned: false, isPinned: false,
orderId: 0, orderId: 0,
id: 0, id: 0,
@ -53,60 +71,93 @@ const Apps = (props: ComponentProps): JSX.Element => {
} }
}, [getApps]); }, [getApps]);
useEffect(() => {
if (categories.length === 0) {
getAppCategories();
}
}, [getAppCategories])
const toggleModal = (): void => { const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen); setModalIsOpen(!modalIsOpen);
setIsInUpdate(false); // setIsInUpdate(false);
}; }
const toggleEdit = (): void => { const addActionHandler = (contentType: ContentType) => {
setIsInEdit(!isInEdit); setFormContentType(contentType);
setIsInUpdate(false); setIsInUpdate(false);
}; toggleModal();
}
const toggleUpdate = (app: App): void => { const editActionHandler = (contentType: ContentType) => {
setAppInUpdate(app); // 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); setIsInUpdate(true);
setModalIsOpen(true); if (instanceOfCategory(data)) {
}; setFormContentType(ContentType.category);
setCategoryInUpdate(data);
} else {
setFormContentType(ContentType.app);
setAppInUpdate(data);
}
toggleModal();
}
return ( return (
<Container> <Container>
<Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}> <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
{!isInUpdate ? ( {!isInUpdate ? (
<AppForm modalHandler={toggleModal} /> <AppForm modalHandler={toggleModal} contentType={formContentType} />
) : ( ) : (
<AppForm modalHandler={toggleModal} app={appInUpdate} /> formContentType === ContentType.category ? (
<AppForm modalHandler={toggleModal} contentType={formContentType} category={categoryInUpdate} />
) : (
<AppForm modalHandler={toggleModal} contentType={formContentType} app={appInUpdate} />
)
)} )}
</Modal> </Modal>
<Headline <Headline
title="All Applications" title="All Applications"
subtitle={<Link to="/">Go back</Link>} subtitle={(<Link to="/">Go back</Link>)}
/> />
<div className={classes.ActionsContainer}> <div className={classes.ActionsContainer}>
<ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} /> <ActionButton name="Add Category" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.category)} />
<ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} /> <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> </div>
<div className={classes.Apps}> {loading ? (
{loading ? ( <Spinner />
<Spinner /> ) : (!isInEdit ? (
) : !isInEdit ? ( <AppGrid categories={categories} apps={apps} searching />
<AppGrid apps={apps} searching /> ) : (
) : ( <AppTable contentType={tableContentType} categories={categories} apps={apps} updateHandler={goToUpdateMode} />
<AppTable updateAppHandler={toggleUpdate} /> )
)} )}
</div>
</Container> </Container>
); );
}; };
const mapStateToProps = (state: GlobalState) => { const mapStateToProps = (state: GlobalState) => {
return { return {
apps: state.app.apps,
loading: state.app.loading, loading: state.app.loading,
}; categories: state.app.categories,
}; apps: state.app.apps,
}
}
export default connect(mapStateToProps, { getApps })(Apps); export default connect(mapStateToProps, { getApps, getAppCategories })(Apps);

182
client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
View file

@ -1,40 +1,19 @@
// React import { ChangeEvent, Dispatch, Fragment, SetStateAction, SyntheticEvent, useEffect, useState } from 'react';
import {
useState,
SyntheticEvent,
Fragment,
ChangeEvent,
useEffect,
} from 'react';
// Redux
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
import { import {
getCategories,
addCategory,
addBookmark, addBookmark,
updateCategory, addBookmarkCategory,
updateBookmark,
createNotification, createNotification,
getBookmarkCategories,
updateBookmark,
updateBookmarkCategory,
} from '../../../store/actions'; } from '../../../store/actions';
// Typescript
import {
Bookmark,
Category,
GlobalState,
NewBookmark,
NewCategory,
NewNotification,
} from '../../../interfaces';
import { ContentType } from '../Bookmarks';
// UI
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import Button from '../../UI/Buttons/Button/Button'; import Button from '../../UI/Buttons/Button/Button';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
// CSS import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import { ContentType } from '../Bookmarks';
import classes from './BookmarkForm.module.css'; import classes from './BookmarkForm.module.css';
interface ComponentProps { interface ComponentProps {
@ -43,28 +22,28 @@ interface ComponentProps {
categories: Category[]; categories: Category[];
category?: Category; category?: Category;
bookmark?: Bookmark; bookmark?: Bookmark;
addCategory: (formData: NewCategory) => void; addBookmarkCategory: (formData: NewCategory) => void;
addBookmark: (formData: NewBookmark | FormData) => void; addBookmark: (formData: NewBookmark | FormData) => void;
updateCategory: (id: number, formData: NewCategory) => void; updateBookmarkCategory: (id: number, formData: NewCategory) => void;
updateBookmark: ( updateBookmark: (
id: number, id: number,
formData: NewBookmark | FormData, formData: NewBookmark | FormData,
category: { category: {
prev: number; prev: number,
curr: number; curr: number
} }) => void;
) => void;
createNotification: (notification: NewNotification) => void; createNotification: (notification: NewNotification) => void;
} }
const BookmarkForm = (props: ComponentProps): JSX.Element => { const BookmarkForm = (props: ComponentProps): JSX.Element => {
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false); const [useCustomIcon, setUseCustomIcon] = useState<boolean>(false);
const [customIcon, setCustomIcon] = useState<File | null>(null); const [customIcon, setCustomIcon] = useState<File | null>(null);
const [categoryName, setCategoryName] = useState<NewCategory>({ const [categoryData, setCategoryData] = useState<NewCategory>({
name: '', name: '',
}); type: 'bookmarks'
})
const [formData, setFormData] = useState<NewBookmark>({ const [bookmarkData, setBookmarkData] = useState<NewBookmark>({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
@ -74,23 +53,23 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Load category data if provided for editing // Load category data if provided for editing
useEffect(() => { useEffect(() => {
if (props.category) { if (props.category) {
setCategoryName({ name: props.category.name }); setCategoryData({ name: props.category.name, type: props.category.type });
} else { } else {
setCategoryName({ name: '' }); setCategoryData({ name: '', type: "bookmarks" });
} }
}, [props.category]); }, [props.category]);
// Load bookmark data if provided for editing // Load bookmark data if provided for editing
useEffect(() => { useEffect(() => {
if (props.bookmark) { if (props.bookmark) {
setFormData({ setBookmarkData({
name: props.bookmark.name, name: props.bookmark.name,
url: props.bookmark.url, url: props.bookmark.url,
categoryId: props.bookmark.categoryId, categoryId: props.bookmark.categoryId,
icon: props.bookmark.icon, icon: props.bookmark.icon,
}); });
} else { } else {
setFormData({ setBookmarkData({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
@ -107,9 +86,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
if (customIcon) { if (customIcon) {
data.append('icon', customIcon); data.append('icon', customIcon);
} }
data.append('name', formData.name); data.append('name', bookmarkData.name);
data.append('url', formData.url); data.append('url', bookmarkData.url);
data.append('categoryId', `${formData.categoryId}`); data.append('categoryId', `${bookmarkData.categoryId}`);
return data; return data;
}; };
@ -118,11 +97,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Add new // Add new
if (props.contentType === ContentType.category) { if (props.contentType === ContentType.category) {
// Add category // Add category
props.addCategory(categoryName); props.addBookmarkCategory(categoryData);
setCategoryName({ name: '' }); setCategoryData({ name: '', type: 'bookmarks' });
} else if (props.contentType === ContentType.bookmark) { } else if (props.contentType === ContentType.bookmark) {
// Add bookmark // Add bookmark
if (formData.categoryId === -1) { if (bookmarkData.categoryId === -1) {
props.createNotification({ props.createNotification({
title: 'Error', title: 'Error',
message: 'Please select category', message: 'Please select category',
@ -134,14 +113,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const data = createFormData(); const data = createFormData();
props.addBookmark(data); props.addBookmark(data);
} else { } else {
props.addBookmark(formData); props.addBookmark(bookmarkData);
} }
setFormData({ setBookmarkData({
name: '', name: '',
url: '', url: '',
categoryId: formData.categoryId, categoryId: bookmarkData.categoryId,
icon: '', icon: ''
}); });
// setCustomIcon(null); // setCustomIcon(null);
@ -150,24 +129,32 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Update // Update
if (props.contentType === ContentType.category && props.category) { if (props.contentType === ContentType.category && props.category) {
// Update category // Update category
props.updateCategory(props.category.id, categoryName); props.updateBookmarkCategory(props.category.id, categoryData);
setCategoryName({ name: '' }); setCategoryData({ name: '', type: 'bookmarks' });
} else if (props.contentType === ContentType.bookmark && props.bookmark) { } else if (props.contentType === ContentType.bookmark && props.bookmark) {
// Update bookmark // Update bookmark
if (customIcon) { if (customIcon) {
const data = createFormData(); const data = createFormData();
props.updateBookmark(props.bookmark.id, data, { props.updateBookmark(
prev: props.bookmark.categoryId, props.bookmark.id,
curr: formData.categoryId, data,
}); {
prev: props.bookmark.categoryId,
curr: bookmarkData.categoryId
}
)
} else { } else {
props.updateBookmark(props.bookmark.id, formData, { props.updateBookmark(
prev: props.bookmark.categoryId, props.bookmark.id,
curr: formData.categoryId, bookmarkData,
}); {
prev: props.bookmark.categoryId,
curr: bookmarkData.categoryId
}
);
} }
setFormData({ setBookmarkData({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
@ -181,18 +168,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
} }
}; };
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>, setDataFunction: Dispatch<SetStateAction<any>>, data: any): void => {
setFormData({ setDataFunction({
...formData, ...data,
[e.target.name]: e.target.value, [e.target.name]: e.target.value
}); });
}; };
const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => { const toggleUseCustomIcon = (): void => {
setFormData({ setUseCustomIcon(!useCustomIcon);
...formData, setCustomIcon(null);
categoryId: parseInt(e.target.value),
});
}; };
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
@ -230,8 +215,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="categoryName" id="categoryName"
placeholder="Social Media" placeholder="Social Media"
required required
value={categoryName.name} value={categoryData.name}
onChange={(e) => setCategoryName({ name: e.target.value })} onChange={(e) => inputChangeHandler(e, setCategoryData, categoryData)}
/> />
</InputGroup> </InputGroup>
</Fragment> </Fragment>
@ -245,8 +230,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="name" id="name"
placeholder="Reddit" placeholder="Reddit"
required required
value={formData.name} value={bookmarkData.name}
onChange={(e) => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/> />
</InputGroup> </InputGroup>
<InputGroup> <InputGroup>
@ -257,8 +242,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="url" id="url"
placeholder="reddit.com" placeholder="reddit.com"
required required
value={formData.url} value={bookmarkData.url}
onChange={(e) => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/> />
<span> <span>
<a <a
@ -277,8 +262,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
name="categoryId" name="categoryId"
id="categoryId" id="categoryId"
required required
onChange={(e) => selectChangeHandler(e)} value={bookmarkData.categoryId}
value={formData.categoryId} onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
> >
<option value={-1}>Select category</option> <option value={-1}>Select category</option>
{props.categories.map((category: Category): JSX.Element => { {props.categories.map((category: Category): JSX.Element => {
@ -295,12 +280,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
<InputGroup> <InputGroup>
<label htmlFor="icon">Bookmark Icon (optional)</label> <label htmlFor="icon">Bookmark Icon (optional)</label>
<input <input
type="text" type='text'
name="icon" name='icon'
id="icon" id='icon'
placeholder="book-open-outline" placeholder='book-open-outline'
value={formData.icon} value={bookmarkData.icon}
onChange={(e) => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/> />
<span> <span>
Use icon name from MDI. Use icon name from MDI.
@ -310,7 +295,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
</a> </a>
</span> </span>
<span <span
onClick={() => toggleUseCustomIcon(!useCustomIcon)} onClick={() => toggleUseCustomIcon()}
className={classes.Switch} className={classes.Switch}
> >
Switch to custom icon upload Switch to custom icon upload
@ -328,10 +313,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
accept=".jpg,.jpeg,.png,.svg" accept=".jpg,.jpeg,.png,.svg"
/> />
<span <span
onClick={() => { onClick={() => toggleUseCustomIcon()}
setCustomIcon(null);
toggleUseCustomIcon(!useCustomIcon);
}}
className={classes.Switch} className={classes.Switch}
> >
Switch to MDI Switch to MDI
@ -352,10 +334,10 @@ const mapStateToProps = (state: GlobalState) => {
}; };
const dispatchMap = { const dispatchMap = {
getCategories, getBookmarkCategories,
addCategory, addBookmarkCategory,
addBookmark, addBookmark,
updateCategory, updateBookmarkCategory,
updateBookmark, updateBookmark,
createNotification, createNotification,
}; };

6
client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
View file

@ -1,10 +1,8 @@
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import classes from './BookmarkGrid.module.css';
import { Category } from '../../../interfaces'; import { Category } from '../../../interfaces';
import BookmarkCard from '../BookmarkCard/BookmarkCard'; import BookmarkCard from '../BookmarkCard/BookmarkCard';
import classes from './BookmarkGrid.module.css';
interface ComponentProps { interface ComponentProps {
categories: Category[]; categories: Category[];
@ -37,7 +35,7 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
if (props.totalCategories) { if (props.totalCategories) {
bookmarks = ( bookmarks = (
<p className={classes.BookmarksMessage}> <p className={classes.BookmarksMessage}>
There are no pinned categories. You can pin them from the{' '} There are no pinned bookmark categories. You can pin them from the{' '}
<Link to="/bookmarks">/bookmarks</Link> menu <Link to="/bookmarks">/bookmarks</Link> menu
</p> </p>
); );

322
client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx
View file

@ -1,34 +1,31 @@
import { KeyboardEvent, useState, useEffect, Fragment } from 'react'; import { Fragment, KeyboardEvent, useEffect, useState } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
import { pinCategory, deleteCategory, deleteBookmark, createNotification, reorderCategories } from '../../../store/actions';
// Typescript
import { Bookmark, Category, NewNotification } from '../../../interfaces'; import { Bookmark, Category, NewNotification } from '../../../interfaces';
import { ContentType } from '../Bookmarks'; import {
createNotification,
// CSS deleteBookmark,
import classes from './BookmarkTable.module.css'; deleteBookmarkCategory,
pinBookmarkCategory,
// UI reorderBookmarkCategories,
import Table from '../../UI/Table/Table'; } from '../../../store/actions';
import Icon from '../../UI/Icons/Icon/Icon';
// Utils
import { searchConfig } from '../../../utility'; import { searchConfig } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon';
import Table from '../../UI/Table/Table';
import { ContentType } from '../Bookmarks';
import classes from './BookmarkTable.module.css';
interface ComponentProps { interface ComponentProps {
contentType: ContentType; contentType: ContentType;
categories: Category[]; categories: Category[];
pinCategory: (category: Category) => void; pinBookmarkCategory: (category: Category) => void;
deleteCategory: (id: number) => void; deleteBookmarkCategory: (id: number) => void;
updateHandler: (data: Category | Bookmark) => void; updateHandler: (data: Category | Bookmark) => void;
deleteBookmark: (bookmarkId: number, categoryId: number) => void; deleteBookmark: (bookmarkId: number, categoryId: number) => void;
createNotification: (notification: NewNotification) => void; createNotification: (notification: NewNotification) => void;
reorderCategories: (categories: Category[]) => void; reorderBookmarkCategories: (categories: Category[]) => void;
} }
const BookmarkTable = (props: ComponentProps): JSX.Element => { const BookmarkTable = (props: ComponentProps): JSX.Element => {
@ -38,45 +35,53 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
// Copy categories array // Copy categories array
useEffect(() => { useEffect(() => {
setLocalCategories([...props.categories]); setLocalCategories([...props.categories]);
}, [props.categories]) }, [props.categories]);
// Check ordering // Check ordering
useEffect(() => { useEffect(() => {
const order = searchConfig('useOrdering', ''); const order = searchConfig("useOrdering", "");
if (order === 'orderId') { if (order === "orderId") {
setIsCustomOrder(true); setIsCustomOrder(true);
} }
}) }, []);
const deleteCategoryHandler = (category: Category): void => { const deleteCategoryHandler = (category: Category): void => {
const proceed = window.confirm(`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`); const proceed = window.confirm(
`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`
);
if (proceed) { if (proceed) {
props.deleteCategory(category.id); props.deleteBookmarkCategory(category.id);
} }
} };
const deleteBookmarkHandler = (bookmark: Bookmark): void => { const deleteBookmarkHandler = (bookmark: Bookmark): void => {
const proceed = window.confirm(`Are you sure you want to delete ${bookmark.name}?`); const proceed = window.confirm(
`Are you sure you want to delete ${bookmark.name}?`
);
if (proceed) { if (proceed) {
props.deleteBookmark(bookmark.id, bookmark.categoryId); props.deleteBookmark(bookmark.id, bookmark.categoryId);
} }
} };
const keyboardActionHandler = (e: KeyboardEvent, category: Category, handler: Function) => { const keyboardActionHandler = (
if (e.key === 'Enter') { e: KeyboardEvent,
category: Category,
handler: Function
) => {
if (e.key === "Enter") {
handler(category); handler(category);
} }
} };
const dragEndHanlder = (result: DropResult): void => { const dragEndHandler = (result: DropResult): void => {
if (!isCustomOrder) { if (!isCustomOrder) {
props.createNotification({ props.createNotification({
title: 'Error', title: "Error",
message: 'Custom order is disabled' message: "Custom order is disabled",
}) });
return; return;
} }
@ -85,141 +90,170 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
} }
const tmpCategories = [...localCategories]; const tmpCategories = [...localCategories];
const [movedApp] = tmpCategories.splice(result.source.index, 1); const [movedCategory] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedApp); tmpCategories.splice(result.destination.index, 0, movedCategory);
setLocalCategories(tmpCategories); setLocalCategories(tmpCategories);
props.reorderCategories(tmpCategories); props.reorderBookmarkCategories(tmpCategories);
} };
if (props.contentType === ContentType.category) { if (props.contentType === ContentType.category) {
return ( return (
<Fragment> <Fragment>
<div className={classes.Message}> <div className={classes.Message}>
{isCustomOrder {isCustomOrder ? (
? <p>You can drag and drop single rows to reorder categories</p> <p>You can drag and drop single rows to reorder categories</p>
: <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p> ) : (
} <p>
Custom order is disabled. You can change it in{" "}
<Link to="/settings/other">settings</Link>
</p>
)}
</div> </div>
<DragDropContext onDragEnd={dragEndHanlder}> <DragDropContext onDragEnd={dragEndHandler}>
<Droppable droppableId='categories'> <Droppable droppableId="categories">
{(provided) => ( {(provided) => (
<Table headers={[ <Table headers={["Name", "Actions"]} innerRef={provided.innerRef}>
'Name', {localCategories.map(
'Actions' (category: Category, index): JSX.Element => {
]} return (
innerRef={provided.innerRef}> <Draggable
{localCategories.map((category: Category, index): JSX.Element => { key={category.id}
return ( draggableId={category.id.toString()}
<Draggable key={category.id} draggableId={category.id.toString()} index={index}> index={index}
{(provided, snapshot) => { >
const style = { {(provided, snapshot) => {
border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none', const style = {
borderRadius: '4px', border: snapshot.isDragging
...provided.draggableProps.style, ? "1px solid var(--color-accent)"
}; : "none",
borderRadius: "4px",
...provided.draggableProps.style,
};
return ( return (
<tr <tr
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
ref={provided.innerRef} ref={provided.innerRef}
style={style} style={style}
> >
<td>{category.name}</td> <td>{category.name}</td>
{!snapshot.isDragging && ( {!snapshot.isDragging && (
<td className={classes.TableActions}> <td className={classes.TableActions}>
<div <div
className={classes.TableAction} className={classes.TableAction}
onClick={() => deleteCategoryHandler(category)} onClick={() =>
onKeyDown={(e) => keyboardActionHandler(e, category, deleteCategoryHandler)} deleteCategoryHandler(category)
tabIndex={0}> }
<Icon icon='mdiDelete' /> onKeyDown={(e) =>
</div> keyboardActionHandler(
<div e,
className={classes.TableAction} category,
onClick={() => props.updateHandler(category)} deleteCategoryHandler
tabIndex={0}> )
<Icon icon='mdiPencil' /> }
</div> tabIndex={0}
<div >
className={classes.TableAction} <Icon icon="mdiDelete" />
onClick={() => props.pinCategory(category)} </div>
onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)} <div
tabIndex={0}> className={classes.TableAction}
{category.isPinned onClick={() =>
? <Icon icon='mdiPinOff' color='var(--color-accent)' /> props.updateHandler(category)
: <Icon icon='mdiPin' /> }
} tabIndex={0}
</div> >
</td> <Icon icon="mdiPencil" />
)} </div>
</tr> <div
) className={classes.TableAction}
}} onClick={() => props.pinBookmarkCategory(category)}
</Draggable> onKeyDown={(e) =>
) keyboardActionHandler(
})} e,
category,
props.pinBookmarkCategory
)
}
tabIndex={0}
>
{category.isPinned ? (
<Icon
icon="mdiPinOff"
color="var(--color-accent)"
/>
) : (
<Icon icon="mdiPin" />
)}
</div>
</td>
)}
</tr>
);
}}
</Draggable>
);
}
)}
</Table> </Table>
)} )}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
</Fragment> </Fragment>
) );
} else { } else {
const bookmarks: {bookmark: Bookmark, categoryName: string}[] = []; const bookmarks: { bookmark: Bookmark; categoryName: string }[] = [];
props.categories.forEach((category: Category) => { props.categories.forEach((category: Category) => {
category.bookmarks.forEach((bookmark: Bookmark) => { category.bookmarks.forEach((bookmark: Bookmark) => {
bookmarks.push({ bookmarks.push({
bookmark, bookmark,
categoryName: category.name categoryName: category.name,
}); });
}) });
}) });
return ( return (
<Table headers={[ <Table headers={["Name", "URL", "Icon", "Category", "Actions"]}>
'Name', {bookmarks.map(
'URL', (bookmark: { bookmark: Bookmark; categoryName: string }) => {
'Icon', return (
'Category', <tr key={bookmark.bookmark.id}>
'Actions' <td>{bookmark.bookmark.name}</td>
]}> <td>{bookmark.bookmark.url}</td>
{bookmarks.map((bookmark: {bookmark: Bookmark, categoryName: string}) => { <td>{bookmark.bookmark.icon}</td>
return ( <td>{bookmark.categoryName}</td>
<tr key={bookmark.bookmark.id}> <td className={classes.TableActions}>
<td>{bookmark.bookmark.name}</td> <div
<td>{bookmark.bookmark.url}</td> className={classes.TableAction}
<td>{bookmark.bookmark.icon}</td> onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
<td>{bookmark.categoryName}</td> tabIndex={0}
<td className={classes.TableActions}> >
<div <Icon icon="mdiDelete" />
className={classes.TableAction} </div>
onClick={() => deleteBookmarkHandler(bookmark.bookmark)} <div
tabIndex={0}> className={classes.TableAction}
<Icon icon='mdiDelete' /> onClick={() => props.updateHandler(bookmark.bookmark)}
</div> tabIndex={0}
<div >
className={classes.TableAction} <Icon icon="mdiPencil" />
onClick={() => props.updateHandler(bookmark.bookmark)} </div>
tabIndex={0}> </td>
<Icon icon='mdiPencil' /> </tr>
</div> );
</td> }
</tr> )}
)
})}
</Table> </Table>
) );
} }
} };
const actions = { const actions = {
pinCategory, pinBookmarkCategory,
deleteCategory, deleteBookmarkCategory,
deleteBookmark, deleteBookmark,
createNotification, createNotification,
reorderCategories reorderBookmarkCategories,
} };
export default connect(null, actions)(BookmarkTable); export default connect(null, actions)(BookmarkTable);

29
client/src/components/Bookmarks/Bookmarks.tsx
View file

@ -1,25 +1,23 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { getCategories } from '../../store/actions'; import { Link } from 'react-router-dom';
import classes from './Bookmarks.module.css'; import { Bookmark, Category, GlobalState } from '../../interfaces';
import { getBookmarkCategories } from '../../store/actions';
import { Container } from '../UI/Layout/Layout';
import Headline from '../UI/Headlines/Headline/Headline';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton'; import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
import Headline from '../UI/Headlines/Headline/Headline';
import BookmarkGrid from './BookmarkGrid/BookmarkGrid'; import { Container } from '../UI/Layout/Layout';
import { Category, GlobalState, Bookmark } from '../../interfaces';
import Spinner from '../UI/Spinner/Spinner';
import Modal from '../UI/Modal/Modal'; import Modal from '../UI/Modal/Modal';
import Spinner from '../UI/Spinner/Spinner';
import BookmarkForm from './BookmarkForm/BookmarkForm'; import BookmarkForm from './BookmarkForm/BookmarkForm';
import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
import classes from './Bookmarks.module.css';
import BookmarkTable from './BookmarkTable/BookmarkTable'; import BookmarkTable from './BookmarkTable/BookmarkTable';
interface ComponentProps { interface ComponentProps {
loading: boolean; loading: boolean;
categories: Category[]; categories: Category[];
getCategories: () => void; getBookmarkCategories: () => void;
searching: boolean; searching: boolean;
} }
@ -29,7 +27,7 @@ export enum ContentType {
} }
const Bookmarks = (props: ComponentProps): JSX.Element => { const Bookmarks = (props: ComponentProps): JSX.Element => {
const { getCategories, categories, loading, searching = false } = props; const { getBookmarkCategories, categories, loading, searching = false } = props;
const [modalIsOpen, setModalIsOpen] = useState(false); const [modalIsOpen, setModalIsOpen] = useState(false);
const [formContentType, setFormContentType] = useState(ContentType.category); const [formContentType, setFormContentType] = useState(ContentType.category);
@ -43,6 +41,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
id: -1, id: -1,
isPinned: false, isPinned: false,
orderId: 0, orderId: 0,
type: 'bookmarks',
bookmarks: [], bookmarks: [],
createdAt: new Date(), createdAt: new Date(),
updatedAt: new Date(), updatedAt: new Date(),
@ -59,9 +58,9 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
useEffect(() => { useEffect(() => {
if (categories.length === 0) { if (categories.length === 0) {
getCategories(); getBookmarkCategories();
} }
}, [getCategories]); }, [getBookmarkCategories]);
const toggleModal = (): void => { const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen); setModalIsOpen(!modalIsOpen);
@ -169,4 +168,4 @@ const mapStateToProps = (state: GlobalState) => {
}; };
}; };
export default connect(mapStateToProps, { getCategories })(Bookmarks); export default connect(mapStateToProps, { getBookmarkCategories })(Bookmarks);

119
client/src/components/Home/Home.tsx
View file

@ -1,53 +1,44 @@
import { useState, useEffect, Fragment } from 'react'; import { Fragment, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
// Redux import { App, Bookmark, Category } from '../../interfaces';
import { connect } from 'react-redux';
import { getApps, getCategories } from '../../store/actions';
// Typescript
import { GlobalState } from '../../interfaces/GlobalState'; import { GlobalState } from '../../interfaces/GlobalState';
import { App, Category } from '../../interfaces'; import { getAppCategories, getApps, getBookmarkCategories } from '../../store/actions';
import { searchConfig } from '../../utility';
// UI
import Icon from '../UI/Icons/Icon/Icon';
import { Container } from '../UI/Layout/Layout';
import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
import Spinner from '../UI/Spinner/Spinner';
// CSS
import classes from './Home.module.css';
// Components
import AppGrid from '../Apps/AppGrid/AppGrid'; import AppGrid from '../Apps/AppGrid/AppGrid';
import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid'; import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
import SearchBar from '../SearchBar/SearchBar'; import SearchBar from '../SearchBar/SearchBar';
import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
// Functions import Icon from '../UI/Icons/Icon/Icon';
import { greeter } from './functions/greeter'; import { Container } from '../UI/Layout/Layout';
import Spinner from '../UI/Spinner/Spinner';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
import { dateTime } from './functions/dateTime'; import { dateTime } from './functions/dateTime';
import { greeter } from './functions/greeter';
// Utils import classes from './Home.module.css';
import { searchConfig } from '../../utility';
interface ComponentProps { interface ComponentProps {
getApps: Function; getApps: () => void;
getCategories: Function; getAppCategories: () => void;
getBookmarkCategories: () => void;
appsLoading: boolean; appsLoading: boolean;
bookmarkCategoriesLoading: boolean;
appCategories: Category[];
apps: App[]; apps: App[];
categoriesLoading: boolean; bookmarkCategories: Category[];
categories: Category[];
} }
const Home = (props: ComponentProps): JSX.Element => { const Home = (props: ComponentProps): JSX.Element => {
const { const {
getAppCategories,
getApps, getApps,
getBookmarkCategories,
appCategories,
apps, apps,
bookmarkCategories,
appsLoading, appsLoading,
getCategories, bookmarkCategoriesLoading,
categories,
categoriesLoading,
} = props; } = props;
const [header, setHeader] = useState({ const [header, setHeader] = useState({
@ -58,7 +49,14 @@ const Home = (props: ComponentProps): JSX.Element => {
// Local search query // Local search query
const [localSearch, setLocalSearch] = useState<null | string>(null); const [localSearch, setLocalSearch] = useState<null | string>(null);
// Load applications // Load app categories
useEffect(() => {
if (appCategories.length === 0) {
getAppCategories();
}
}, [getAppCategories]);
// Load apps
useEffect(() => { useEffect(() => {
if (apps.length === 0) { if (apps.length === 0) {
getApps(); getApps();
@ -67,10 +65,10 @@ const Home = (props: ComponentProps): JSX.Element => {
// Load bookmark categories // Load bookmark categories
useEffect(() => { useEffect(() => {
if (categories.length === 0) { if (bookmarkCategories.length === 0) {
getCategories(); getBookmarkCategories();
} }
}, [getCategories]); }, [getBookmarkCategories]);
// Refresh greeter and time // Refresh greeter and time
useEffect(() => { useEffect(() => {
@ -90,13 +88,20 @@ const Home = (props: ComponentProps): JSX.Element => {
}, []); }, []);
// Search bookmarks // Search bookmarks
const searchBookmarks = (query: string): Category[] => { const searchBookmarks = (query: string, categoriesToSearch: Category[]): Category[] => {
const category = { ...categories[0] }; const category: Category = {
category.name = 'Search Results'; name: "Search Results",
category.bookmarks = categories type: categoriesToSearch[0].type,
.map(({ bookmarks }) => bookmarks) isPinned: true,
.flat() bookmarks: categoriesToSearch
.filter(({ name }) => new RegExp(query, 'i').test(name)); .map((c: Category) => c.bookmarks)
.flat()
.filter((bookmark: Bookmark) => new RegExp(query, 'i').test(bookmark.name)),
id: 0,
orderId: 0,
createdAt: new Date(),
updatedAt: new Date(),
};
return [category]; return [category];
}; };
@ -131,14 +136,15 @@ const Home = (props: ComponentProps): JSX.Element => {
<Spinner /> <Spinner />
) : ( ) : (
<AppGrid <AppGrid
categories={appCategories.filter((category: Category) => category.isPinned)}
apps={ apps={
!localSearch !localSearch
? apps.filter(({ isPinned }) => isPinned) ? apps.filter((app: App) => app.isPinned)
: apps.filter(({ name }) => : apps.filter((app: App) =>
new RegExp(localSearch, 'i').test(name) new RegExp(localSearch, 'i').test(app.name)
) )
} }
totalApps={apps.length} totalCategories={appCategories.length}
searching={!!localSearch} searching={!!localSearch}
/> />
)} )}
@ -151,16 +157,16 @@ const Home = (props: ComponentProps): JSX.Element => {
{searchConfig('hideCategories', 0) !== 1 ? ( {searchConfig('hideCategories', 0) !== 1 ? (
<Fragment> <Fragment>
<SectionHeadline title="Bookmarks" link="/bookmarks" /> <SectionHeadline title="Bookmarks" link="/bookmarks" />
{categoriesLoading ? ( {bookmarkCategoriesLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
<BookmarkGrid <BookmarkGrid
categories={ categories={
!localSearch !localSearch
? categories.filter(({ isPinned }) => isPinned) ? bookmarkCategories.filter((category: Category) => category.isPinned)
: searchBookmarks(localSearch) : searchBookmarks(localSearch, bookmarkCategories)
} }
totalCategories={categories.length} totalCategories={bookmarkCategories.length}
searching={!!localSearch} searching={!!localSearch}
/> />
)} )}
@ -178,11 +184,12 @@ const Home = (props: ComponentProps): JSX.Element => {
const mapStateToProps = (state: GlobalState) => { const mapStateToProps = (state: GlobalState) => {
return { return {
appCategories: state.app.categories,
appsLoading: state.app.loading, appsLoading: state.app.loading,
apps: state.app.apps, apps: state.app.apps,
categoriesLoading: state.bookmark.loading, bookmarkCategoriesLoading: state.bookmark.loading,
categories: state.bookmark.categories, bookmarkCategories: state.bookmark.categories,
}; }
}; }
export default connect(mapStateToProps, { getApps, getCategories })(Home); export default connect(mapStateToProps, { getApps, getAppCategories, getBookmarkCategories })(Home);

39
client/src/components/Settings/OtherSettings/OtherSettings.tsx
View file

@ -1,34 +1,25 @@
import { useState, useEffect, ChangeEvent, FormEvent } from 'react'; import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
// Redux
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces';
import { import {
createNotification, createNotification,
updateConfig, sortAppCategories,
sortApps, sortApps,
sortCategories, sortBookmarkCategories,
updateConfig,
} from '../../../store/actions'; } from '../../../store/actions';
// Typescript
import {
GlobalState,
NewNotification,
SettingsForm,
} from '../../../interfaces';
// UI
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import Button from '../../UI/Buttons/Button/Button';
import SettingsHeadline from '../../UI/Headlines/SettingsHeadline/SettingsHeadline';
// Utils
import { searchConfig } from '../../../utility'; import { searchConfig } from '../../../utility';
import Button from '../../UI/Buttons/Button/Button';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import SettingsHeadline from '../../UI/Headlines/SettingsHeadline/SettingsHeadline';
interface ComponentProps { interface ComponentProps {
createNotification: (notification: NewNotification) => void; createNotification: (notification: NewNotification) => void;
updateConfig: (formData: SettingsForm) => void; updateConfig: (formData: SettingsForm) => void;
sortAppCategories: () => void;
sortApps: () => void; sortApps: () => void;
sortCategories: () => void; sortBookmarkCategories: () => void;
loading: boolean; loading: boolean;
} }
@ -79,9 +70,10 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
// Update local page title // Update local page title
document.title = formData.customTitle; document.title = formData.customTitle;
// Sort apps and categories with new settings // Apply new sort settings
props.sortAppCategories();
props.sortApps(); props.sortApps();
props.sortCategories(); props.sortBookmarkCategories();
}; };
// Input handler // Input handler
@ -293,7 +285,8 @@ const actions = {
createNotification, createNotification,
updateConfig, updateConfig,
sortApps, sortApps,
sortCategories, sortAppCategories,
sortBookmarkCategories
}; };
export default connect(mapStateToProps, actions)(OtherSettings); export default connect(mapStateToProps, actions)(OtherSettings);

2
client/src/interfaces/App.ts
View file

@ -3,6 +3,7 @@ import { Model } from '.';
export interface App extends Model { export interface App extends Model {
name: string; name: string;
url: string; url: string;
categoryId: number;
icon: string; icon: string;
isPinned: boolean; isPinned: boolean;
orderId: number; orderId: number;
@ -11,5 +12,6 @@ export interface App extends Model {
export interface NewApp { export interface NewApp {
name: string; name: string;
url: string; url: string;
categoryId: number;
icon: string; icon: string;
} }

4
client/src/interfaces/Category.ts
View file

@ -1,7 +1,8 @@
import { Model, Bookmark } from '.'; import { Bookmark, Model } from '.';
export interface Category extends Model { export interface Category extends Model {
name: string; name: string;
type: string;
isPinned: boolean; isPinned: boolean;
orderId: number; orderId: number;
bookmarks: Bookmark[]; bookmarks: Bookmark[];
@ -9,4 +10,5 @@ export interface Category extends Model {
export interface NewCategory { export interface NewCategory {
name: string; name: string;
type: string;
} }

112
client/src/store/actions/actionTypes.ts
View file

@ -1,44 +1,50 @@
import { import {
// Theme
SetThemeAction,
// Apps
GetAppsAction,
PinAppAction,
AddAppAction, AddAppAction,
DeleteAppAction, AddAppCategoryAction,
UpdateAppAction,
ReorderAppsAction,
SortAppsAction,
// Categories
GetCategoriesAction,
AddCategoryAction,
PinCategoryAction,
DeleteCategoryAction,
UpdateCategoryAction,
SortCategoriesAction,
ReorderCategoriesAction,
// Bookmarks
AddBookmarkAction, AddBookmarkAction,
DeleteBookmarkAction, AddBookmarkCategoryAction,
UpdateBookmarkAction,
// Notifications
CreateNotificationAction,
ClearNotificationAction, ClearNotificationAction,
// Config CreateNotificationAction,
DeleteAppAction,
DeleteAppCategoryAction,
DeleteBookmarkAction,
DeleteBookmarkCategoryAction,
GetAppCategoriesAction,
GetAppsAction,
GetBookmarkCategoriesAction,
GetConfigAction, GetConfigAction,
PinAppAction,
PinAppCategoryAction,
PinBookmarkCategoryAction,
ReorderAppCategoriesAction,
ReorderAppsAction,
ReorderBookmarkCategoriesAction,
SetThemeAction,
SortAppCategoriesAction,
SortAppsAction,
SortBookmarkCategoriesAction,
UpdateAppAction,
UpdateAppCategoryAction,
UpdateBookmarkAction,
UpdateBookmarkCategoryAction,
UpdateConfigAction, UpdateConfigAction,
} from './'; } from './';
import { import { AddQueryAction, DeleteQueryAction, FetchQueriesAction, UpdateQueryAction } from './config';
AddQueryAction,
DeleteQueryAction,
FetchQueriesAction,
UpdateQueryAction,
} from './config';
export enum ActionTypes { export enum ActionTypes {
// Theme // Theme
setTheme = 'SET_THEME', setTheme = 'SET_THEME',
// Apps // App categories
getAppCategories = 'GET_APP_CATEGORIES',
getAppCategoriesSuccess = 'GET_APP_CATEGORIES_SUCCESS',
getAppCategoriesError = 'GET_APP_CATEGORIES_ERROR',
addAppCategory = 'ADD_APP_CATEGORY',
pinAppCategory = 'PIN_APP_CATEGORY',
deleteAppCategory = 'DELETE_APP_CATEGORY',
updateAppCategory = 'UPDATE_APP_CATEGORY',
sortAppCategories = 'SORT_APP_CATEGORIES',
reorderAppCategories = 'REORDER_APP_CATEGORIES',
// Apps
getApps = 'GET_APPS', getApps = 'GET_APPS',
getAppsSuccess = 'GET_APPS_SUCCESS', getAppsSuccess = 'GET_APPS_SUCCESS',
getAppsError = 'GET_APPS_ERROR', getAppsError = 'GET_APPS_ERROR',
@ -49,16 +55,16 @@ export enum ActionTypes {
updateApp = 'UPDATE_APP', updateApp = 'UPDATE_APP',
reorderApps = 'REORDER_APPS', reorderApps = 'REORDER_APPS',
sortApps = 'SORT_APPS', sortApps = 'SORT_APPS',
// Categories // Bookmark categories
getCategories = 'GET_CATEGORIES', getBookmarkCategories = 'GET_BOOKMARK_CATEGORIES',
getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS', getBookmarkCategoriesSuccess = 'GET_BOOKMARK_CATEGORIES_SUCCESS',
getCategoriesError = 'GET_CATEGORIES_ERROR', getBookmarkCategoriesError = 'GET_BOOKMARK_CATEGORIES_ERROR',
addCategory = 'ADD_CATEGORY', addBookmarkCategory = 'ADD_BOOKMARK_CATEGORY',
pinCategory = 'PIN_CATEGORY', pinBookmarkCategory = 'PIN_BOOKMARK_CATEGORY',
deleteCategory = 'DELETE_CATEGORY', deleteBookmarkCategory = 'DELETE_BOOKMARK_CATEGORY',
updateCategory = 'UPDATE_CATEGORY', updateBookmarkCategory = 'UPDATE_BOOKMARK_CATEGORY',
sortCategories = 'SORT_CATEGORIES', sortBookmarkCategories = 'SORT_BOOKMARK_CATEGORIES',
reorderCategories = 'REORDER_CATEGORIES', reorderBookmarkCategories = 'REORDER_BOOKMARK_CATEGORIES',
// Bookmarks // Bookmarks
addBookmark = 'ADD_BOOKMARK', addBookmark = 'ADD_BOOKMARK',
deleteBookmark = 'DELETE_BOOKMARK', deleteBookmark = 'DELETE_BOOKMARK',
@ -77,7 +83,15 @@ export enum ActionTypes {
export type Action = export type Action =
// Theme // Theme
| SetThemeAction SetThemeAction
// App categories
| GetAppCategoriesAction<any>
| AddAppCategoryAction
| PinAppCategoryAction
| DeleteAppCategoryAction
| UpdateAppCategoryAction
| SortAppCategoriesAction
| ReorderAppCategoriesAction
// Apps // Apps
| GetAppsAction<any> | GetAppsAction<any>
| PinAppAction | PinAppAction
@ -86,14 +100,14 @@ export type Action =
| UpdateAppAction | UpdateAppAction
| ReorderAppsAction | ReorderAppsAction
| SortAppsAction | SortAppsAction
// Categories // Bookmark categories
| GetCategoriesAction<any> | GetBookmarkCategoriesAction<any>
| AddCategoryAction | AddBookmarkCategoryAction
| PinCategoryAction | PinBookmarkCategoryAction
| DeleteCategoryAction | DeleteBookmarkCategoryAction
| UpdateCategoryAction | UpdateBookmarkCategoryAction
| SortCategoriesAction | SortBookmarkCategoriesAction
| ReorderCategoriesAction | ReorderBookmarkCategoriesAction
// Bookmarks // Bookmarks
| AddBookmarkAction | AddBookmarkAction
| DeleteBookmarkAction | DeleteBookmarkAction

374
client/src/store/actions/app.ts
View file

@ -1,32 +1,96 @@
import axios from 'axios'; import axios from 'axios';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { ApiResponse, App, Category, Config, NewApp, NewCategory } from '../../interfaces';
import { ActionTypes } from './actionTypes'; import { ActionTypes } from './actionTypes';
import { App, ApiResponse, NewApp, Config } from '../../interfaces';
import { CreateNotificationAction } from './notification'; import { CreateNotificationAction } from './notification';
export interface GetAppsAction<T> { export interface GetAppsAction<T> {
type: ActionTypes.getApps | ActionTypes.getAppsSuccess | ActionTypes.getAppsError; type:
| ActionTypes.getApps
| ActionTypes.getAppsSuccess
| ActionTypes.getAppsError;
payload: T; payload: T;
} }
export const getApps = () => async (dispatch: Dispatch) => { export const getApps = () => async (dispatch: Dispatch) => {
dispatch<GetAppsAction<undefined>>({ dispatch<GetAppsAction<undefined>>({
type: ActionTypes.getApps, type: ActionTypes.getApps,
payload: undefined payload: undefined,
}); });
try { try {
const res = await axios.get<ApiResponse<App[]>>('/api/apps'); const res = await axios.get<ApiResponse<App[]>>("/api/apps");
dispatch<GetAppsAction<App[]>>({ dispatch<GetAppsAction<App[]>>({
type: ActionTypes.getAppsSuccess, type: ActionTypes.getAppsSuccess,
payload: res.data.data payload: res.data.data,
}) });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
};
export interface GetAppCategoriesAction<T> {
type:
| ActionTypes.getAppCategories
| ActionTypes.getAppCategoriesSuccess
| ActionTypes.getAppCategoriesSuccess;
payload: T;
} }
export const getAppCategories = () => async (dispatch: Dispatch) => {
dispatch<GetAppCategoriesAction<undefined>>({
type: ActionTypes.getAppCategories,
payload: undefined,
});
try {
const res = await axios.get<ApiResponse<Category[]>>("/api/categories");
dispatch<GetAppCategoriesAction<Category[]>>({
type: ActionTypes.getAppCategoriesSuccess,
payload: res.data.data.filter(
(category: Category) => category.type === "apps"
),
});
} catch (err) {
console.log(err);
}
};
export interface AddAppCategoryAction {
type: ActionTypes.addAppCategory;
payload: Category;
}
export const addAppCategory =
(formData: NewCategory) => async (dispatch: Dispatch) => {
try {
const res = await axios.post<ApiResponse<Category>>(
"/api/categories",
formData
);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: "Success",
message: `Category ${formData.name} created`,
},
});
dispatch<AddAppCategoryAction>({
type: ActionTypes.addAppCategory,
payload: res.data.data,
});
dispatch<any>(sortAppCategories());
} catch (err) {
console.log(err);
}
};
export interface PinAppAction { export interface PinAppAction {
type: ActionTypes.pinApp; type: ActionTypes.pinApp;
payload: App; payload: App;
@ -35,26 +99,30 @@ export interface PinAppAction {
export const pinApp = (app: App) => async (dispatch: Dispatch) => { export const pinApp = (app: App) => async (dispatch: Dispatch) => {
try { try {
const { id, isPinned, name } = app; const { id, isPinned, name } = app;
const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, { isPinned: !isPinned }); const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, {
isPinned: !isPinned,
});
const status = isPinned ? 'unpinned from Homescreen' : 'pinned to Homescreen'; const status = isPinned
? "unpinned from Homescreen"
: "pinned to Homescreen";
dispatch<CreateNotificationAction>({ dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification, type: ActionTypes.createNotification,
payload: { payload: {
title: 'Success', title: "Success",
message: `App ${name} ${status}` message: `App ${name} ${status}`,
} },
}) });
dispatch<PinAppAction>({ dispatch<PinAppAction>({
type: ActionTypes.pinApp, type: ActionTypes.pinApp,
payload: res.data.data payload: res.data.data,
}) });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} };
export interface AddAppAction { export interface AddAppAction {
type: ActionTypes.addAppSuccess; type: ActionTypes.addAppSuccess;
@ -63,31 +131,133 @@ export interface AddAppAction {
export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => { export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
try { try {
const res = await axios.post<ApiResponse<App>>('/api/apps', formData); const res = await axios.post<ApiResponse<App>>("/api/apps", formData);
dispatch<CreateNotificationAction>({ dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification, type: ActionTypes.createNotification,
payload: { payload: {
title: 'Success', title: "Success",
message: `App added` message: `App ${res.data.data.name} added`,
} },
}) });
await dispatch<AddAppAction>({ await dispatch<AddAppAction>({
type: ActionTypes.addAppSuccess, type: ActionTypes.addAppSuccess,
payload: res.data.data payload: res.data.data,
}) });
// Sort apps // Sort apps
dispatch<any>(sortApps()) dispatch<any>(sortApps());
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
};
/**
* PIN CATEGORY
*/
export interface PinAppCategoryAction {
type: ActionTypes.pinAppCategory;
payload: Category;
} }
export const pinAppCategory =
(category: Category) => async (dispatch: Dispatch) => {
try {
const { id, isPinned, name } = category;
const res = await axios.put<ApiResponse<Category>>(
`/api/categories/${id}`,
{ isPinned: !isPinned }
);
const status = isPinned
? "unpinned from Homescreen"
: "pinned to Homescreen";
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: "Success",
message: `Category ${name} ${status}`,
},
});
dispatch<PinAppCategoryAction>({
type: ActionTypes.pinAppCategory,
payload: res.data.data,
});
} catch (err) {
console.log(err);
}
};
/**
* DELETE CATEGORY
*/
export interface DeleteAppCategoryAction {
type: ActionTypes.deleteAppCategory;
payload: number;
}
export const deleteAppCategory = (id: number) => async (dispatch: Dispatch) => {
try {
await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: "Success",
message: `Category deleted`,
},
});
dispatch<DeleteAppCategoryAction>({
type: ActionTypes.deleteAppCategory,
payload: id,
});
} catch (err) {
console.log(err);
}
};
/**
* UPDATE CATEGORY
*/
export interface UpdateAppCategoryAction {
type: ActionTypes.updateAppCategory;
payload: Category;
}
export const updateAppCategory =
(id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
try {
const res = await axios.put<ApiResponse<Category>>(
`/api/categories/${id}`,
formData
);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: "Success",
message: `Category ${formData.name} updated`,
},
});
dispatch<UpdateAppCategoryAction>({
type: ActionTypes.updateAppCategory,
payload: res.data.data,
});
dispatch<any>(sortAppCategories());
} catch (err) {
console.log(err);
}
};
export interface DeleteAppAction { export interface DeleteAppAction {
type: ActionTypes.deleteApp, type: ActionTypes.deleteApp;
payload: number payload: number;
} }
export const deleteApp = (id: number) => async (dispatch: Dispatch) => { export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
@ -97,80 +267,86 @@ export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
dispatch<CreateNotificationAction>({ dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification, type: ActionTypes.createNotification,
payload: { payload: {
title: 'Success', title: "Success",
message: 'App deleted' message: "App deleted",
} },
}) });
dispatch<DeleteAppAction>({ dispatch<DeleteAppAction>({
type: ActionTypes.deleteApp, type: ActionTypes.deleteApp,
payload: id payload: id,
}) });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} };
export interface UpdateAppAction { export interface UpdateAppAction {
type: ActionTypes.updateApp; type: ActionTypes.updateApp;
payload: App; payload: App;
} }
export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => { export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
try { try {
const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, formData); const res = await axios.put<ApiResponse<App>>(
`/api/apps/${id}`,
formData
);
dispatch<CreateNotificationAction>({ dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification, type: ActionTypes.createNotification,
payload: { payload: {
title: 'Success', title: "Success",
message: `App updated` message: `App ${res.data.data.name} updated`,
} },
}) });
await dispatch<UpdateAppAction>({ await dispatch<UpdateAppAction>({
type: ActionTypes.updateApp, type: ActionTypes.updateApp,
payload: res.data.data payload: res.data.data,
}) });
// Sort apps // Sort apps
dispatch<any>(sortApps()) dispatch<any>(sortApps());
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} };
export interface ReorderAppsAction { export interface ReorderAppsAction {
type: ActionTypes.reorderApps; type: ActionTypes.reorderApps;
payload: App[] payload: App[];
} }
interface ReorderQuery { interface ReorderAppsQuery {
apps: { apps: {
id: number; id: number;
orderId: number; orderId: number;
}[] }[];
} }
export const reorderApps = (apps: App[]) => async (dispatch: Dispatch) => { export const reorderApps = (apps: App[]) => async (dispatch: Dispatch) => {
try { try {
const updateQuery: ReorderQuery = { apps: [] } const updateQuery: ReorderAppsQuery = { apps: [] };
apps.forEach((app, index) => updateQuery.apps.push({ apps.forEach((app, index) => {
id: app.id, updateQuery.apps.push({
orderId: index + 1 id: app.id,
})) orderId: index + 1,
});
app.orderId = index + 1;
});
await axios.put<ApiResponse<{}>>('/api/apps/0/reorder', updateQuery); await axios.put<ApiResponse<{}>>("/api/apps/0/reorder", updateQuery);
dispatch<ReorderAppsAction>({ dispatch<ReorderAppsAction>({
type: ActionTypes.reorderApps, type: ActionTypes.reorderApps,
payload: apps payload: apps,
}) });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} };
export interface SortAppsAction { export interface SortAppsAction {
type: ActionTypes.sortApps; type: ActionTypes.sortApps;
@ -179,13 +355,75 @@ export interface SortAppsAction {
export const sortApps = () => async (dispatch: Dispatch) => { export const sortApps = () => async (dispatch: Dispatch) => {
try { try {
const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering'); const res = await axios.get<ApiResponse<Config>>("/api/config/useOrdering");
dispatch<SortAppsAction>({ dispatch<SortAppsAction>({
type: ActionTypes.sortApps, type: ActionTypes.sortApps,
payload: res.data.data.value payload: res.data.data.value,
}) });
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} };
/**
* SORT CATEGORIES
*/
export interface SortAppCategoriesAction {
type: ActionTypes.sortAppCategories;
payload: string;
}
export const sortAppCategories = () => async (dispatch: Dispatch) => {
try {
const res = await axios.get<ApiResponse<Config>>("/api/config/useOrdering");
dispatch<SortAppCategoriesAction>({
type: ActionTypes.sortAppCategories,
payload: res.data.data.value,
});
} catch (err) {
console.log(err);
}
};
/**
* REORDER CATEGORIES
*/
export interface ReorderAppCategoriesAction {
type: ActionTypes.reorderAppCategories;
payload: Category[];
}
interface ReorderCategoriesQuery {
categories: {
id: number;
orderId: number;
}[];
}
export const reorderAppCategories =
(categories: Category[]) => async (dispatch: Dispatch) => {
try {
const updateQuery: ReorderCategoriesQuery = { categories: [] };
categories.forEach((category, index) =>
updateQuery.categories.push({
id: category.id,
orderId: index + 1,
})
);
await axios.put<ApiResponse<{}>>(
"/api/categories/0/reorder",
updateQuery
);
dispatch<ReorderAppCategoriesAction>({
type: ActionTypes.reorderAppCategories,
payload: categories,
});
} catch (err) {
console.log(err);
}
};

83
client/src/store/actions/bookmark.ts
View file

@ -1,29 +1,30 @@
import axios from 'axios'; import axios from 'axios';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { ApiResponse, Bookmark, Category, Config, NewBookmark, NewCategory } from '../../interfaces';
import { ActionTypes } from './actionTypes'; import { ActionTypes } from './actionTypes';
import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark, Config } from '../../interfaces';
import { CreateNotificationAction } from './notification'; import { CreateNotificationAction } from './notification';
/** /**
* GET CATEGORIES * GET CATEGORIES
*/ */
export interface GetCategoriesAction<T> { export interface GetBookmarkCategoriesAction<T> {
type: ActionTypes.getCategories | ActionTypes.getCategoriesSuccess | ActionTypes.getCategoriesError; type: ActionTypes.getBookmarkCategories | ActionTypes.getBookmarkCategoriesSuccess | ActionTypes.getBookmarkCategoriesError;
payload: T; payload: T;
} }
export const getCategories = () => async (dispatch: Dispatch) => { export const getBookmarkCategories = () => async (dispatch: Dispatch) => {
dispatch<GetCategoriesAction<undefined>>({ dispatch<GetBookmarkCategoriesAction<undefined>>({
type: ActionTypes.getCategories, type: ActionTypes.getBookmarkCategories,
payload: undefined payload: undefined
}) })
try { try {
const res = await axios.get<ApiResponse<Category[]>>('/api/categories'); const res = await axios.get<ApiResponse<Category[]>>('/api/categories');
dispatch<GetCategoriesAction<Category[]>>({ dispatch<GetBookmarkCategoriesAction<Category[]>>({
type: ActionTypes.getCategoriesSuccess, type: ActionTypes.getBookmarkCategoriesSuccess,
payload: res.data.data payload: res.data.data.filter((category: Category) => category.type === 'bookmarks'),
}) })
} catch (err) { } catch (err) {
console.log(err); console.log(err);
@ -33,12 +34,12 @@ export const getCategories = () => async (dispatch: Dispatch) => {
/** /**
* ADD CATEGORY * ADD CATEGORY
*/ */
export interface AddCategoryAction { export interface AddBookmarkCategoryAction {
type: ActionTypes.addCategory, type: ActionTypes.addBookmarkCategory,
payload: Category payload: Category
} }
export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch) => { export const addBookmarkCategory = (formData: NewCategory) => async (dispatch: Dispatch) => {
try { try {
const res = await axios.post<ApiResponse<Category>>('/api/categories', formData); const res = await axios.post<ApiResponse<Category>>('/api/categories', formData);
@ -50,12 +51,12 @@ export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch)
} }
}) })
dispatch<AddCategoryAction>({ dispatch<AddBookmarkCategoryAction>({
type: ActionTypes.addCategory, type: ActionTypes.addBookmarkCategory,
payload: res.data.data payload: res.data.data
}) })
dispatch<any>(sortCategories()); dispatch<any>(sortBookmarkCategories());
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
@ -93,12 +94,12 @@ export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch
/** /**
* PIN CATEGORY * PIN CATEGORY
*/ */
export interface PinCategoryAction { export interface PinBookmarkCategoryAction {
type: ActionTypes.pinCategory, type: ActionTypes.pinBookmarkCategory,
payload: Category payload: Category
} }
export const pinCategory = (category: Category) => async (dispatch: Dispatch) => { export const pinBookmarkCategory = (category: Category) => async (dispatch: Dispatch) => {
try { try {
const { id, isPinned, name } = category; const { id, isPinned, name } = category;
const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, { isPinned: !isPinned }); const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, { isPinned: !isPinned });
@ -113,8 +114,8 @@ export const pinCategory = (category: Category) => async (dispatch: Dispatch) =>
} }
}) })
dispatch<PinCategoryAction>({ dispatch<PinBookmarkCategoryAction>({
type: ActionTypes.pinCategory, type: ActionTypes.pinBookmarkCategory,
payload: res.data.data payload: res.data.data
}) })
} catch (err) { } catch (err) {
@ -125,12 +126,12 @@ export const pinCategory = (category: Category) => async (dispatch: Dispatch) =>
/** /**
* DELETE CATEGORY * DELETE CATEGORY
*/ */
export interface DeleteCategoryAction { export interface DeleteBookmarkCategoryAction {
type: ActionTypes.deleteCategory, type: ActionTypes.deleteBookmarkCategory,
payload: number payload: number
} }
export const deleteCategory = (id: number) => async (dispatch: Dispatch) => { export const deleteBookmarkCategory = (id: number) => async (dispatch: Dispatch) => {
try { try {
await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`); await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
@ -142,8 +143,8 @@ export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
} }
}) })
dispatch<DeleteCategoryAction>({ dispatch<DeleteBookmarkCategoryAction>({
type: ActionTypes.deleteCategory, type: ActionTypes.deleteBookmarkCategory,
payload: id payload: id
}) })
} catch (err) { } catch (err) {
@ -154,12 +155,12 @@ export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
/** /**
* UPDATE CATEGORY * UPDATE CATEGORY
*/ */
export interface UpdateCategoryAction { export interface UpdateBookmarkCategoryAction {
type: ActionTypes.updateCategory, type: ActionTypes.updateBookmarkCategory,
payload: Category payload: Category
} }
export const updateCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => { export const updateBookmarkCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
try { try {
const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, formData); const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, formData);
@ -171,12 +172,12 @@ export const updateCategory = (id: number, formData: NewCategory) => async (disp
} }
}) })
dispatch<UpdateCategoryAction>({ dispatch<UpdateBookmarkCategoryAction>({
type: ActionTypes.updateCategory, type: ActionTypes.updateBookmarkCategory,
payload: res.data.data payload: res.data.data
}) })
dispatch<any>(sortCategories()); dispatch<any>(sortBookmarkCategories());
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
@ -277,17 +278,17 @@ export const updateBookmark = (
/** /**
* SORT CATEGORIES * SORT CATEGORIES
*/ */
export interface SortCategoriesAction { export interface SortBookmarkCategoriesAction {
type: ActionTypes.sortCategories; type: ActionTypes.sortBookmarkCategories;
payload: string; payload: string;
} }
export const sortCategories = () => async (dispatch: Dispatch) => { export const sortBookmarkCategories = () => async (dispatch: Dispatch) => {
try { try {
const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering'); const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
dispatch<SortCategoriesAction>({ dispatch<SortBookmarkCategoriesAction>({
type: ActionTypes.sortCategories, type: ActionTypes.sortBookmarkCategories,
payload: res.data.data.value payload: res.data.data.value
}) })
} catch (err) { } catch (err) {
@ -298,8 +299,8 @@ export const sortCategories = () => async (dispatch: Dispatch) => {
/** /**
* REORDER CATEGORIES * REORDER CATEGORIES
*/ */
export interface ReorderCategoriesAction { export interface ReorderBookmarkCategoriesAction {
type: ActionTypes.reorderCategories; type: ActionTypes.reorderBookmarkCategories;
payload: Category[]; payload: Category[];
} }
@ -310,7 +311,7 @@ interface ReorderQuery {
}[] }[]
} }
export const reorderCategories = (categories: Category[]) => async (dispatch: Dispatch) => { export const reorderBookmarkCategories = (categories: Category[]) => async (dispatch: Dispatch) => {
try { try {
const updateQuery: ReorderQuery = { categories: [] } const updateQuery: ReorderQuery = { categories: [] }
@ -321,8 +322,8 @@ export const reorderCategories = (categories: Category[]) => async (dispatch: Di
await axios.put<ApiResponse<{}>>('/api/categories/0/reorder', updateQuery); await axios.put<ApiResponse<{}>>('/api/categories/0/reorder', updateQuery);
dispatch<ReorderCategoriesAction>({ dispatch<ReorderBookmarkCategoriesAction>({
type: ActionTypes.reorderCategories, type: ActionTypes.reorderBookmarkCategories,
payload: categories payload: categories
}) })
} catch (err) { } catch (err) {

225
client/src/store/reducers/app.ts
View file

@ -1,72 +1,152 @@
import { ActionTypes, Action } from '../actions'; import { App, Category } from '../../interfaces';
import { App } from '../../interfaces/App';
import { sortData } from '../../utility'; import { sortData } from '../../utility';
import { Action, ActionTypes } from '../actions';
export interface State { export interface State {
loading: boolean; loading: boolean;
apps: App[];
errors: string | undefined; errors: string | undefined;
categories: Category[];
apps: App[];
} }
const initialState: State = { const initialState: State = {
loading: true, loading: true,
errors: undefined,
categories: [],
apps: [], apps: [],
errors: undefined };
}
const getApps = (state: State, action: Action): State => { const getApps = (state: State, action: Action): State => {
return { return {
...state, ...state,
loading: true, loading: true,
errors: undefined errors: undefined,
} };
} };
const getAppsSuccess = (state: State, action: Action): State => { const getAppsSuccess = (state: State, action: Action): State => {
return { return {
...state, ...state,
loading: false, loading: false,
apps: action.payload apps: action.payload,
} };
} };
const getAppsError = (state: State, action: Action): State => { const getAppsError = (state: State, action: Action): State => {
return { return {
...state, ...state,
loading: false, loading: false,
errors: action.payload errors: action.payload,
};
};
const getCategories = (state: State, action: Action): State => {
return {
...state,
loading: true,
errors: undefined,
};
};
const getCategoriesSuccess = (state: State, action: Action): State => {
return {
...state,
loading: false,
categories: action.payload,
};
};
const addCategory = (state: State, action: Action): State => {
return {
...state,
categories: [
...state.categories,
{
...action.payload,
type: "apps",
apps: [],
},
],
};
};
const pinCategory = (state: State, action: Action): State => {
const tmpCategories = [...state.categories];
const changedCategory = tmpCategories.find(
(category: Category) => category.id === action.payload.id
);
if (changedCategory) {
changedCategory.isPinned = action.payload.isPinned;
} }
}
return {
...state,
categories: tmpCategories,
};
};
const pinApp = (state: State, action: Action): State => { const pinApp = (state: State, action: Action): State => {
const tmpApps = [...state.apps]; const tmpApps = [...state.apps];
const changedApp = tmpApps.find((app: App) => app.id === action.payload.id); const changedApp = tmpApps.find((app: App) => app.id === action.payload.id);
if (changedApp) { if (changedApp) {
changedApp.isPinned = action.payload.isPinned; changedApp.isPinned = action.payload.isPinned;
} }
return { return {
...state, ...state,
apps: tmpApps apps: tmpApps,
} };
} };
const addAppSuccess = (state: State, action: Action): State => { const addAppSuccess = (state: State, action: Action): State => {
return { return {
...state, ...state,
apps: [...state.apps, action.payload] apps: [...state.apps, action.payload],
} };
} };
const deleteApp = (state: State, action: Action): State => { const deleteCategory = (state: State, action: Action): State => {
const tmpApps = [...state.apps].filter((app: App) => app.id !== action.payload); const categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload
);
return { return {
...state, ...state,
apps: tmpApps categories: [
...state.categories.slice(0, categoryIndex),
...state.categories.slice(categoryIndex + 1),
],
};
};
const updateCategory = (state: State, action: Action): State => {
const tmpCategories = [...state.categories];
const categoryInUpdate = tmpCategories.find(
(category: Category) => category.id === action.payload.id
);
if (categoryInUpdate) {
categoryInUpdate.name = action.payload.name;
} }
}
return {
...state,
categories: tmpCategories,
};
};
const deleteApp = (state: State, action: Action): State => {
const tmpApps = [...state.apps].filter(
(app: App) => app.id !== action.payload
);
return {
...state,
apps: tmpApps,
};
};
const updateApp = (state: State, action: Action): State => { const updateApp = (state: State, action: Action): State => {
const tmpApps = [...state.apps]; const tmpApps = [...state.apps];
@ -76,43 +156,96 @@ const updateApp = (state: State, action: Action): State => {
appInUpdate.name = action.payload.name; appInUpdate.name = action.payload.name;
appInUpdate.url = action.payload.url; appInUpdate.url = action.payload.url;
appInUpdate.icon = action.payload.icon; appInUpdate.icon = action.payload.icon;
appInUpdate.categoryId = action.payload.categoryId;
} }
return { return {
...state, ...state,
apps: tmpApps apps: tmpApps,
} };
} };
const sortAppCategories = (state: State, action: Action): State => {
const sortedCategories = sortData<Category>(state.categories, action.payload);
return {
...state,
categories: sortedCategories,
};
};
const reorderCategories = (state: State, action: Action): State => {
return {
...state,
categories: action.payload,
};
};
const reorderApps = (state: State, action: Action): State => { const reorderApps = (state: State, action: Action): State => {
return { return {
...state, ...state,
apps: action.payload apps: action.payload,
} };
} };
const sortApps = (state: State, action: Action): State => { const sortApps = (state: State, action: Action): State => {
// const tmpCategories = [...state.categories];
// tmpCategories.forEach((category: Category) => {
// category.apps = sortData<App>(category.apps, action.payload);
// });
// return {
// ...state,
// categories: tmpCategories,
// };
const sortedApps = sortData<App>(state.apps, action.payload); const sortedApps = sortData<App>(state.apps, action.payload);
return { return {
...state, ...state,
apps: sortedApps apps: sortedApps,
} };
} };
const appReducer = (state = initialState, action: Action) => { const appReducer = (state = initialState, action: Action) => {
switch (action.type) { switch (action.type) {
case ActionTypes.getApps: return getApps(state, action); case ActionTypes.getAppCategories:
case ActionTypes.getAppsSuccess: return getAppsSuccess(state, action); return getCategories(state, action);
case ActionTypes.getAppsError: return getAppsError(state, action); case ActionTypes.getAppCategoriesSuccess:
case ActionTypes.pinApp: return pinApp(state, action); return getCategoriesSuccess(state, action);
case ActionTypes.addAppSuccess: return addAppSuccess(state, action); case ActionTypes.getApps:
case ActionTypes.deleteApp: return deleteApp(state, action); return getApps(state, action);
case ActionTypes.updateApp: return updateApp(state, action); case ActionTypes.getAppsSuccess:
case ActionTypes.reorderApps: return reorderApps(state, action); return getAppsSuccess(state, action);
case ActionTypes.sortApps: return sortApps(state, action); case ActionTypes.getAppsError:
default: return state; return getAppsError(state, action);
case ActionTypes.addAppCategory:
return addCategory(state, action);
case ActionTypes.addAppSuccess:
return addAppSuccess(state, action);
case ActionTypes.pinAppCategory:
return pinCategory(state, action);
case ActionTypes.pinApp:
return pinApp(state, action);
case ActionTypes.deleteAppCategory:
return deleteCategory(state, action);
case ActionTypes.updateAppCategory:
return updateCategory(state, action);
case ActionTypes.deleteApp:
return deleteApp(state, action);
case ActionTypes.updateApp:
return updateApp(state, action);
case ActionTypes.sortAppCategories:
return sortAppCategories(state, action);
case ActionTypes.reorderAppCategories:
return reorderCategories(state, action);
case ActionTypes.sortApps:
return sortApps(state, action);
case ActionTypes.reorderApps:
return reorderApps(state, action);
default:
return state;
} }
} };
export default appReducer; export default appReducer;

23
client/src/store/reducers/bookmark.ts
View file

@ -1,6 +1,6 @@
import { ActionTypes, Action } from '../actions'; import { Bookmark, Category } from '../../interfaces';
import { Category, Bookmark } from '../../interfaces';
import { sortData } from '../../utility'; import { sortData } from '../../utility';
import { Action, ActionTypes } from '../actions';
export interface State { export interface State {
loading: boolean; loading: boolean;
@ -37,6 +37,7 @@ const addCategory = (state: State, action: Action): State => {
...state.categories, ...state.categories,
{ {
...action.payload, ...action.payload,
type: 'bookmarks',
bookmarks: [] bookmarks: []
} }
] ]
@ -142,7 +143,7 @@ const updateBookmark = (state: State, action: Action): State => {
} }
} }
const sortCategories = (state: State, action: Action): State => { const sortBookmarkCategories = (state: State, action: Action): State => {
const sortedCategories = sortData<Category>(state.categories, action.payload); const sortedCategories = sortData<Category>(state.categories, action.payload);
return { return {
@ -160,17 +161,17 @@ const reorderCategories = (state: State, action: Action): State => {
const bookmarkReducer = (state = initialState, action: Action) => { const bookmarkReducer = (state = initialState, action: Action) => {
switch (action.type) { switch (action.type) {
case ActionTypes.getCategories: return getCategories(state, action); case ActionTypes.getBookmarkCategories: return getCategories(state, action);
case ActionTypes.getCategoriesSuccess: return getCategoriesSuccess(state, action); case ActionTypes.getBookmarkCategoriesSuccess: return getCategoriesSuccess(state, action);
case ActionTypes.addCategory: return addCategory(state, action); case ActionTypes.addBookmarkCategory: return addCategory(state, action);
case ActionTypes.addBookmark: return addBookmark(state, action); case ActionTypes.addBookmark: return addBookmark(state, action);
case ActionTypes.pinCategory: return pinCategory(state, action); case ActionTypes.pinBookmarkCategory: return pinCategory(state, action);
case ActionTypes.deleteCategory: return deleteCategory(state, action); case ActionTypes.deleteBookmarkCategory: return deleteCategory(state, action);
case ActionTypes.updateCategory: return updateCategory(state, action); case ActionTypes.updateBookmarkCategory: return updateCategory(state, action);
case ActionTypes.deleteBookmark: return deleteBookmark(state, action); case ActionTypes.deleteBookmark: return deleteBookmark(state, action);
case ActionTypes.updateBookmark: return updateBookmark(state, action); case ActionTypes.updateBookmark: return updateBookmark(state, action);
case ActionTypes.sortCategories: return sortCategories(state, action); case ActionTypes.sortBookmarkCategories: return sortBookmarkCategories(state, action);
case ActionTypes.reorderCategories: return reorderCategories(state, action); case ActionTypes.reorderBookmarkCategories: return reorderCategories(state, action);
default: return state; default: return state;
} }
} }

26
controllers/category.js
View file

@ -42,12 +42,16 @@ exports.getCategories = asyncWrapper(async (req, res, next) => {
where: { key: 'useOrdering' }, where: { key: 'useOrdering' },
}); });
const orderType = useOrdering ? useOrdering.value : 'createdAt'; const orderType = useOrdering ? useOrdering.value : "createdAt";
let categories; let categories;
if (orderType == 'name') { if (orderType == "name") {
categories = await Category.findAll({ categories = await Category.findAll({
include: [ include: [
{
model: App,
as: 'apps',
},
{ {
model: Bookmark, model: Bookmark,
as: 'bookmarks', as: 'bookmarks',
@ -58,6 +62,10 @@ exports.getCategories = asyncWrapper(async (req, res, next) => {
} else { } else {
categories = await Category.findAll({ categories = await Category.findAll({
include: [ include: [
{
model: App,
as: 'apps',
},
{ {
model: Bookmark, model: Bookmark,
as: 'bookmarks', as: 'bookmarks',
@ -80,6 +88,10 @@ exports.getCategory = asyncWrapper(async (req, res, next) => {
const category = await Category.findOne({ const category = await Category.findOne({
where: { id: req.params.id }, where: { id: req.params.id },
include: [ include: [
{
model: App,
as: 'apps',
},
{ {
model: Bookmark, model: Bookmark,
as: 'bookmarks', as: 'bookmarks',
@ -134,6 +146,10 @@ exports.deleteCategory = asyncWrapper(async (req, res, next) => {
const category = await Category.findOne({ const category = await Category.findOne({
where: { id: req.params.id }, where: { id: req.params.id },
include: [ include: [
{
model: App,
as: 'apps',
},
{ {
model: Bookmark, model: Bookmark,
as: 'bookmarks', as: 'bookmarks',
@ -150,6 +166,12 @@ exports.deleteCategory = asyncWrapper(async (req, res, next) => {
); );
} }
category.apps.forEach(async (app) => {
await App.destroy({
where: { id: app.id },
});
});
category.bookmarks.forEach(async (bookmark) => { category.bookmarks.forEach(async (bookmark) => {
await Bookmark.destroy({ await Bookmark.destroy({
where: { id: bookmark.id }, where: { id: bookmark.id },

4
models/App.js
View file

@ -10,6 +10,10 @@ const App = sequelize.define('App', {
type: DataTypes.STRING, type: DataTypes.STRING,
allowNull: false allowNull: false
}, },
categoryId: {
type: DataTypes.INTEGER,
allowNull: false
},
icon: { icon: {
type: DataTypes.STRING, type: DataTypes.STRING,
allowNull: false, allowNull: false,

4
models/Category.js
View file

@ -6,6 +6,10 @@ const Category = sequelize.define('Category', {
type: DataTypes.STRING, type: DataTypes.STRING,
allowNull: false allowNull: false
}, },
type: {
type: DataTypes.STRING,
allowNull: false
},
isPinned: { isPinned: {
type: DataTypes.BOOLEAN, type: DataTypes.BOOLEAN,
defaultValue: false defaultValue: false

10
models/associateModels.js
View file

@ -1,7 +1,17 @@
const Category = require('./Category'); const Category = require('./Category');
const App = require('./App');
const Bookmark = require('./Bookmark'); const Bookmark = require('./Bookmark');
const associateModels = () => { const associateModels = () => {
// Category <> App
Category.hasMany(App, {
as: 'apps',
foreignKey: 'categoryId'
});
App.belongsTo(Category, { foreignKey: 'categoryId' });
// Category <> Bookmark
Category.hasMany(Bookmark, { Category.hasMany(Bookmark, {
foreignKey: 'categoryId', foreignKey: 'categoryId',
as: 'bookmarks' as: 'bookmarks'