github-mirrors/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-04-24 22:07:24 -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 {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.AppCard h3 {
color: var(--color-accent);
margin-bottom: 10px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.AppCardIcon {
width: 35px;
height: 35px;
@ -19,7 +24,7 @@
font-size: 1em;
font-weight: 500;
color: var(--color-primary);
margin-bottom: -4px;
margin-bottom: -10px;
}
.AppCardDetails span {
@ -29,16 +34,24 @@
opacity: 1;
}
@media (min-width: 500px) {
.AppCard {
padding: 2px;
border-radius: 4px;
transition: all 0.1s;
}
.Apps {
display: flex;
flex-direction: column;
padding: 2px;
border-radius: 4px;
transition: all 0.1s;
}
.AppCard:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.Apps a {
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 {

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

@ -1,57 +1,64 @@
import classes from './AppCard.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
import { App, Category } from '../../../interfaces';
import { iconParser, urlParser } from '../../../utility';
import { App } from '../../../interfaces';
import { searchConfig } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon';
import classes from './AppCard.module.css';
interface ComponentProps {
app: App;
category: Category;
apps: App[]
pinHandler?: Function;
}
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 (
<a
href={redirectUrl}
target={searchConfig('appsSameTab', false) ? '' : '_blank'}
rel='noreferrer'
className={classes.AppCard}
>
<div className={classes.AppCardIcon}>{iconEl}</div>
<div className={classes.AppCardDetails}>
<h5>{props.app.name}</h5>
<span>{displayUrl}</span>
<div className={classes.AppCard}>
<h3>{props.category.name}</h3>
<div className={classes.Apps}>
{props.apps.map((app: App) => {
const [displayUrl, redirectUrl] = urlParser(app.url);
let iconEl: JSX.Element;
const { icon } = app;
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>
</a>
);
};
</div>
)
}
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 { addApp, updateApp } from '../../../store/actions';
import { App, NewApp } from '../../../interfaces';
import classes from './AppForm.module.css';
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import { App, Category, GlobalState, NewApp, NewCategory, NewNotification } from '../../../interfaces';
import {
addApp,
addAppCategory,
createNotification,
getAppCategories,
updateApp,
updateAppCategory,
} from '../../../store/actions';
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 {
modalHandler: () => void;
addApp: (formData: NewApp | FormData) => any;
updateApp: (id: number, formData: NewApp | FormData) => any;
contentType: ContentType;
categories: Category[];
category?: Category;
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 [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
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: '',
url: '',
categoryId: -1,
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(() => {
if (props.app) {
setFormData({
setAppData({
name: props.app.name,
url: props.app.url,
categoryId: props.app.categoryId,
icon: props.app.icon,
});
} else {
setFormData({
setAppData({
name: '',
url: '',
categoryId: -1,
icon: '',
});
}
}, [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 => {
e.preventDefault();
@ -63,132 +81,241 @@ const AppForm = (props: ComponentProps): JSX.Element => {
if (customIcon) {
data.append('icon', customIcon);
}
data.append('name', formData.name);
data.append('url', formData.url);
data.append('name', appData.name);
data.append('url', appData.url);
data.append('categoryId', appData.categoryId.toString());
return data;
};
if (!props.app) {
if (customIcon) {
const data = createFormData();
props.addApp(data);
} else {
props.addApp(formData);
if (!props.category && !props.app) {
// Add new
if (props.contentType === ContentType.category) {
// Add category
props.addAppCategory(categoryData);
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 {
if (customIcon) {
const data = createFormData();
props.updateApp(props.app.id, data);
} else {
props.updateApp(props.app.id, formData);
props.modalHandler();
// Update
if (props.contentType === ContentType.category && props.category) {
// Update category
props.updateAppCategory(props.category.id, categoryData);
setCategoryData({ name: '', type: 'apps' });
} 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({
name: '',
url: '',
icon: '',
});
};
setAppData({
name: '',
url: '',
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 (
<ModalForm
modalHandler={props.modalHandler}
formHandler={formSubmitHandler}
>
<InputGroup>
<label htmlFor="name">App Name</label>
<input
type="text"
name="name"
id="name"
placeholder="Bookstack"
required
value={formData.name}
onChange={(e) => inputChangeHandler(e)}
/>
</InputGroup>
<InputGroup>
<label htmlFor="url">App URL</label>
<input
type="text"
name="url"
id="url"
placeholder="bookstack.example.com"
required
value={formData.url}
onChange={(e) => inputChangeHandler(e)}
/>
<span>
<a
href="https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks"
target="_blank"
rel="noreferrer"
>
{' '}
Check supported URL formats
</a>
</span>
</InputGroup>
{!useCustomIcon ? (
// use mdi icon
<InputGroup>
<label htmlFor="icon">App Icon</label>
<input
type="text"
name="icon"
id="icon"
placeholder="book-open-outline"
required
value={formData.icon}
onChange={(e) => inputChangeHandler(e)}
/>
<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={() => {
setCustomIcon(null);
toggleUseCustomIcon(!useCustomIcon);
}}
className={classes.Switch}
>
Switch to MDI
</span>
</InputGroup>
)}
{!props.app ? (
<Button>Add new application</Button>
) : (
<Button>Update application</Button>
)}
{props.contentType === ContentType.category
? (
<Fragment>
<InputGroup>
<label htmlFor='categoryName'>Category Name</label>
<input
type='text'
name='name'
id='categoryName'
placeholder='Social Media'
required
value={categoryData.name}
onChange={(e) => inputChangeHandler(e, setCategoryData, categoryData)}
/>
</InputGroup>
</Fragment>
)
: (
<Fragment>
<InputGroup>
<label htmlFor='name'>App Name</label>
<input
type='text'
name='name'
id='name'
placeholder='Bookstack'
required
value={appData.name}
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
/>
</InputGroup>
<InputGroup>
<label htmlFor='url'>App URL</label>
<input
type='text'
name='url'
id='url'
placeholder='bookstack.example.com'
required
value={appData.url}
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
/>
<span>
<a
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
target='_blank'
rel='noreferrer'
>
{' '}Check supported URL formats
</a>
</span>
</InputGroup>
<InputGroup>
<label htmlFor='categoryId'>App Category</label>
<select
name='categoryId'
id='categoryId'
required
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
value={appData.categoryId}
>
<option value={-1}>Select category</option>
{props.categories.map((category: Category): JSX.Element => {
return (
<option
key={category.id}
value={category.id}
>
{category.name}
</option>
)
})}
</select>
</InputGroup>
{!useCustomIcon
// use mdi icon
? (<InputGroup>
<label htmlFor='icon'>App Icon</label>
<input
type='text'
name='icon'
id='icon'
placeholder='book-open-outline'
required
value={appData.icon}
onChange={(e) => inputChangeHandler(e, setAppData, appData)}
/>
<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>
);
};
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 { App } from '../../../interfaces/App';
import { App, Category } from '../../../interfaces';
import AppCard from '../AppCard/AppCard';
import classes from './AppGrid.module.css';
interface ComponentProps {
apps: App[];
totalApps?: number;
categories: Category[];
apps: App[]
totalCategories?: number;
searching: boolean;
}
const AppGrid = (props: ComponentProps): JSX.Element => {
let apps: JSX.Element;
if (props.apps.length > 0) {
if (props.categories.length > 0) {
apps = (
<div className={classes.AppGrid}>
{props.apps.map((app: App): JSX.Element => {
return <AppCard key={app.id} app={app} />;
{props.categories.map((category: Category): JSX.Element => {
return <AppCard key={category.id} category={category} apps={props.apps.filter((app: App) => app.categoryId === category.id)} />
})}
</div>
);
} else {
if (props.totalApps) {
if (props.totalCategories) {
if (props.searching) {
apps = (
<p className={classes.AppsMessage}>
@ -32,7 +33,7 @@ const AppGrid = (props: ComponentProps): JSX.Element => {
} else {
apps = (
<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
</p>
);
@ -40,7 +41,7 @@ const AppGrid = (props: ComponentProps): JSX.Element => {
} else {
apps = (
<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
</p>
);

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

@ -1,73 +1,101 @@
import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import { Fragment, KeyboardEvent, useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions';
// Typescript
import { App, GlobalState, NewNotification } from '../../../interfaces';
// CSS
import classes from './AppTable.module.css';
// UI
import { App, Category, NewNotification } from '../../../interfaces';
import {
createNotification,
deleteApp,
deleteAppCategory,
pinApp,
pinAppCategory,
reorderAppCategories,
reorderApps,
updateConfig,
} from '../../../store/actions';
import { searchConfig } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon';
import Table from '../../UI/Table/Table';
// Utils
import { searchConfig } from '../../../utility';
import { ContentType } from '../Apps';
import classes from './AppTable.module.css';
interface ComponentProps {
contentType: ContentType;
categories: Category[];
apps: App[];
pinAppCategory: (category: Category) => void;
deleteAppCategory: (id: number) => void;
reorderAppCategories: (categories: Category[]) => void;
updateHandler: (data: Category | App) => void;
pinApp: (app: App) => void;
deleteApp: (id: number) => void;
updateAppHandler: (app: App) => void;
reorderApps: (apps: App[]) => void;
updateConfig: (formData: any) => void;
createNotification: (notification: NewNotification) => void;
}
const AppTable = (props: ComponentProps): JSX.Element => {
const [localCategories, setLocalCategories] = useState<Category[]>([]);
const [localApps, setLocalApps] = useState<App[]>([]);
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
// Copy categories array
useEffect(() => {
setLocalCategories([...props.categories]);
}, [props.categories]);
// Copy apps array
useEffect(() => {
setLocalApps([...props.apps]);
}, [props.apps])
}, [props.apps]);
// Check ordering
useEffect(() => {
const order = searchConfig('useOrdering', '');
const order = searchConfig("useOrdering", "");
if (order === 'orderId') {
if (order === "orderId") {
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 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) {
props.deleteApp(app.id);
}
}
};
// Support keyboard navigation for actions
const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => {
if (e.key === 'Enter') {
handler(app);
const keyboardActionHandler = (
e: KeyboardEvent,
object: any,
handler: Function
) => {
if (e.key === "Enter") {
handler(object);
}
}
};
const dragEndHanlder = (result: DropResult): void => {
const dragEndHandler = (result: DropResult): void => {
if (!isCustomOrder) {
props.createNotification({
title: 'Error',
message: 'Custom order is disabled'
})
title: "Error",
message: "Custom order is disabled",
});
return;
}
@ -75,106 +103,251 @@ const AppTable = (props: ComponentProps): JSX.Element => {
return;
}
const tmpApps = [...localApps];
const [movedApp] = tmpApps.splice(result.source.index, 1);
tmpApps.splice(result.destination.index, 0, movedApp);
if (props.contentType === ContentType.app) {
const tmpApps = [...localApps];
const [movedApp] = tmpApps.splice(result.source.index, 1);
tmpApps.splice(result.destination.index, 0, movedApp);
setLocalApps(tmpApps);
props.reorderApps(tmpApps);
}
setLocalApps(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 (
<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={dragEndHanlder}>
<Droppable droppableId='apps'>
{(provided) => (
<Table headers={[
'Name',
'URL',
'Icon',
'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,
};
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>
setLocalCategories(tmpCategories);
props.reorderAppCategories(tmpCategories);
}
};
if (props.contentType === ContentType.category) {
return (
<Fragment>
<div className={classes.Message}>
{isCustomOrder ? (
<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>
)}
</Droppable>
</DragDropContext>
</Fragment>
)
}
</div>
<DragDropContext onDragEnd={dragEndHandler}>
<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 {
apps: state.app.apps
return (
<tr
{...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 = {
pinAppCategory,
deleteAppCategory,
reorderAppCategories,
pinApp,
deleteApp,
reorderApps,
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 { connect } from 'react-redux';
import { Link } from 'react-router-dom';
// Redux
import { connect } from 'react-redux';
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 { App, Category, GlobalState } from '../../interfaces';
import { getAppCategories, getApps } from '../../store/actions';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
import Headline from '../UI/Headlines/Headline/Headline';
import { Container } from '../UI/Layout/Layout';
import Modal from '../UI/Modal/Modal';
// Subcomponents
import AppGrid from './AppGrid/AppGrid';
import Spinner from '../UI/Spinner/Spinner';
import AppForm from './AppForm/AppForm';
import AppGrid from './AppGrid/AppGrid';
import classes from './Apps.module.css';
import AppTable from './AppTable/AppTable';
interface ComponentProps {
getApps: Function;
apps: App[];
interface ComponentProps {
loading: boolean;
categories: Category[];
getAppCategories: () => void;
apps: App[];
getApps: () => void;
searching: boolean;
}
export enum ContentType {
category,
app
}
const Apps = (props: ComponentProps): JSX.Element => {
const { getApps, apps, loading, searching = false } = props;
const {
apps,
getApps,
getAppCategories,
categories,
loading,
searching = false
} = props;
const [modalIsOpen, setModalIsOpen] = useState(false);
const [formContentType, setFormContentType] = useState(ContentType.category);
const [isInEdit, setIsInEdit] = useState(false);
const [tableContentType, setTableContentType] = useState(ContentType.category);
const [isInUpdate, setIsInUpdate] = useState(false);
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
name: "",
id: -1,
isPinned: false,
orderId: 0,
type: "apps",
bookmarks: [],
createdAt: new Date(),
updatedAt: new Date()
})
const [appInUpdate, setAppInUpdate] = useState<App>({
name: 'string',
url: 'string',
icon: 'string',
name: "string",
url: "string",
categoryId: -1,
icon: "string",
isPinned: false,
orderId: 0,
id: 0,
@ -53,60 +71,93 @@ const Apps = (props: ComponentProps): JSX.Element => {
}
}, [getApps]);
useEffect(() => {
if (categories.length === 0) {
getAppCategories();
}
}, [getAppCategories])
const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen);
setIsInUpdate(false);
};
// setIsInUpdate(false);
}
const toggleEdit = (): void => {
setIsInEdit(!isInEdit);
const addActionHandler = (contentType: ContentType) => {
setFormContentType(contentType);
setIsInUpdate(false);
};
toggleModal();
}
const toggleUpdate = (app: App): void => {
setAppInUpdate(app);
const editActionHandler = (contentType: ContentType) => {
// We"re in the edit mode and the same button was clicked - go back to list
if (isInEdit && contentType === tableContentType) {
setIsInEdit(false);
} else {
setIsInEdit(true);
setTableContentType(contentType);
}
}
const instanceOfCategory = (object: any): object is Category => {
return "apps" in object;
}
const goToUpdateMode = (data: Category | App): void => {
setIsInUpdate(true);
setModalIsOpen(true);
};
if (instanceOfCategory(data)) {
setFormContentType(ContentType.category);
setCategoryInUpdate(data);
} else {
setFormContentType(ContentType.app);
setAppInUpdate(data);
}
toggleModal();
}
return (
<Container>
<Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
<Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
{!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>
<Headline
title="All Applications"
subtitle={<Link to="/">Go back</Link>}
subtitle={(<Link to="/">Go back</Link>)}
/>
<div className={classes.ActionsContainer}>
<ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
<ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
<ActionButton name="Add Category" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.category)} />
<ActionButton name="Add App" icon="mdiPlusBox" handler={() => addActionHandler(ContentType.app)} />
<ActionButton name="Edit Categories" icon="mdiPencil" handler={() => editActionHandler(ContentType.category)} />
<ActionButton name="Edit Apps" icon="mdiPencil" handler={() => editActionHandler(ContentType.app)} />
</div>
<div className={classes.Apps}>
{loading ? (
<Spinner />
) : !isInEdit ? (
<AppGrid apps={apps} searching />
) : (
<AppTable updateAppHandler={toggleUpdate} />
)}
</div>
{loading ? (
<Spinner />
) : (!isInEdit ? (
<AppGrid categories={categories} apps={apps} searching />
) : (
<AppTable contentType={tableContentType} categories={categories} apps={apps} updateHandler={goToUpdateMode} />
)
)}
</Container>
);
};
const mapStateToProps = (state: GlobalState) => {
return {
apps: state.app.apps,
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 {
useState,
SyntheticEvent,
Fragment,
ChangeEvent,
useEffect,
} from 'react';
// Redux
import { ChangeEvent, Dispatch, Fragment, SetStateAction, SyntheticEvent, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
import {
getCategories,
addCategory,
addBookmark,
updateCategory,
updateBookmark,
addBookmarkCategory,
createNotification,
getBookmarkCategories,
updateBookmark,
updateBookmarkCategory,
} 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';
// CSS
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
import { ContentType } from '../Bookmarks';
import classes from './BookmarkForm.module.css';
interface ComponentProps {
@ -43,28 +22,28 @@ interface ComponentProps {
categories: Category[];
category?: Category;
bookmark?: Bookmark;
addCategory: (formData: NewCategory) => void;
addBookmarkCategory: (formData: NewCategory) => void;
addBookmark: (formData: NewBookmark | FormData) => void;
updateCategory: (id: number, formData: NewCategory) => void;
updateBookmarkCategory: (id: number, formData: NewCategory) => void;
updateBookmark: (
id: number,
formData: NewBookmark | FormData,
id: number,
formData: NewBookmark | FormData,
category: {
prev: number;
curr: number;
}
) => void;
prev: number,
curr: number
}) => void;
createNotification: (notification: NewNotification) => void;
}
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 [categoryName, setCategoryName] = useState<NewCategory>({
const [categoryData, setCategoryData] = useState<NewCategory>({
name: '',
});
type: 'bookmarks'
})
const [formData, setFormData] = useState<NewBookmark>({
const [bookmarkData, setBookmarkData] = useState<NewBookmark>({
name: '',
url: '',
categoryId: -1,
@ -74,23 +53,23 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Load category data if provided for editing
useEffect(() => {
if (props.category) {
setCategoryName({ name: props.category.name });
setCategoryData({ name: props.category.name, type: props.category.type });
} else {
setCategoryName({ name: '' });
setCategoryData({ name: '', type: "bookmarks" });
}
}, [props.category]);
// Load bookmark data if provided for editing
useEffect(() => {
if (props.bookmark) {
setFormData({
setBookmarkData({
name: props.bookmark.name,
url: props.bookmark.url,
categoryId: props.bookmark.categoryId,
icon: props.bookmark.icon,
});
} else {
setFormData({
setBookmarkData({
name: '',
url: '',
categoryId: -1,
@ -107,9 +86,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
if (customIcon) {
data.append('icon', customIcon);
}
data.append('name', formData.name);
data.append('url', formData.url);
data.append('categoryId', `${formData.categoryId}`);
data.append('name', bookmarkData.name);
data.append('url', bookmarkData.url);
data.append('categoryId', `${bookmarkData.categoryId}`);
return data;
};
@ -118,11 +97,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Add new
if (props.contentType === ContentType.category) {
// Add category
props.addCategory(categoryName);
setCategoryName({ name: '' });
props.addBookmarkCategory(categoryData);
setCategoryData({ name: '', type: 'bookmarks' });
} else if (props.contentType === ContentType.bookmark) {
// Add bookmark
if (formData.categoryId === -1) {
if (bookmarkData.categoryId === -1) {
props.createNotification({
title: 'Error',
message: 'Please select category',
@ -134,14 +113,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const data = createFormData();
props.addBookmark(data);
} else {
props.addBookmark(formData);
props.addBookmark(bookmarkData);
}
setFormData({
setBookmarkData({
name: '',
url: '',
categoryId: formData.categoryId,
icon: '',
categoryId: bookmarkData.categoryId,
icon: ''
});
// setCustomIcon(null);
@ -150,24 +129,32 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Update
if (props.contentType === ContentType.category && props.category) {
// Update category
props.updateCategory(props.category.id, categoryName);
setCategoryName({ name: '' });
props.updateBookmarkCategory(props.category.id, categoryData);
setCategoryData({ name: '', type: 'bookmarks' });
} else if (props.contentType === ContentType.bookmark && props.bookmark) {
// Update bookmark
if (customIcon) {
const data = createFormData();
props.updateBookmark(props.bookmark.id, data, {
prev: props.bookmark.categoryId,
curr: formData.categoryId,
});
props.updateBookmark(
props.bookmark.id,
data,
{
prev: props.bookmark.categoryId,
curr: bookmarkData.categoryId
}
)
} else {
props.updateBookmark(props.bookmark.id, formData, {
prev: props.bookmark.categoryId,
curr: formData.categoryId,
});
props.updateBookmark(
props.bookmark.id,
bookmarkData,
{
prev: props.bookmark.categoryId,
curr: bookmarkData.categoryId
}
);
}
setFormData({
setBookmarkData({
name: '',
url: '',
categoryId: -1,
@ -181,18 +168,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
}
};
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
setFormData({
...formData,
[e.target.name]: e.target.value,
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>, setDataFunction: Dispatch<SetStateAction<any>>, data: any): void => {
setDataFunction({
...data,
[e.target.name]: e.target.value
});
};
const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
setFormData({
...formData,
categoryId: parseInt(e.target.value),
});
const toggleUseCustomIcon = (): void => {
setUseCustomIcon(!useCustomIcon);
setCustomIcon(null);
};
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
@ -230,8 +215,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="categoryName"
placeholder="Social Media"
required
value={categoryName.name}
onChange={(e) => setCategoryName({ name: e.target.value })}
value={categoryData.name}
onChange={(e) => inputChangeHandler(e, setCategoryData, categoryData)}
/>
</InputGroup>
</Fragment>
@ -245,8 +230,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="name"
placeholder="Reddit"
required
value={formData.name}
onChange={(e) => inputChangeHandler(e)}
value={bookmarkData.name}
onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/>
</InputGroup>
<InputGroup>
@ -257,8 +242,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="url"
placeholder="reddit.com"
required
value={formData.url}
onChange={(e) => inputChangeHandler(e)}
value={bookmarkData.url}
onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/>
<span>
<a
@ -277,8 +262,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
name="categoryId"
id="categoryId"
required
onChange={(e) => selectChangeHandler(e)}
value={formData.categoryId}
value={bookmarkData.categoryId}
onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
>
<option value={-1}>Select category</option>
{props.categories.map((category: Category): JSX.Element => {
@ -295,12 +280,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
<InputGroup>
<label htmlFor="icon">Bookmark Icon (optional)</label>
<input
type="text"
name="icon"
id="icon"
placeholder="book-open-outline"
value={formData.icon}
onChange={(e) => inputChangeHandler(e)}
type='text'
name='icon'
id='icon'
placeholder='book-open-outline'
value={bookmarkData.icon}
onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/>
<span>
Use icon name from MDI.
@ -310,7 +295,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
</a>
</span>
<span
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
onClick={() => toggleUseCustomIcon()}
className={classes.Switch}
>
Switch to custom icon upload
@ -328,10 +313,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
accept=".jpg,.jpeg,.png,.svg"
/>
<span
onClick={() => {
setCustomIcon(null);
toggleUseCustomIcon(!useCustomIcon);
}}
onClick={() => toggleUseCustomIcon()}
className={classes.Switch}
>
Switch to MDI
@ -352,10 +334,10 @@ const mapStateToProps = (state: GlobalState) => {
};
const dispatchMap = {
getCategories,
addCategory,
getBookmarkCategories,
addBookmarkCategory,
addBookmark,
updateCategory,
updateBookmarkCategory,
updateBookmark,
createNotification,
};

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

@ -1,10 +1,8 @@
import { Link } from 'react-router-dom';
import classes from './BookmarkGrid.module.css';
import { Category } from '../../../interfaces';
import BookmarkCard from '../BookmarkCard/BookmarkCard';
import classes from './BookmarkGrid.module.css';
interface ComponentProps {
categories: Category[];
@ -37,7 +35,7 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
if (props.totalCategories) {
bookmarks = (
<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
</p>
);

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

@ -1,34 +1,31 @@
import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import { Fragment, KeyboardEvent, useEffect, useState } from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { connect } from 'react-redux';
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 { ContentType } from '../Bookmarks';
// CSS
import classes from './BookmarkTable.module.css';
// UI
import Table from '../../UI/Table/Table';
import Icon from '../../UI/Icons/Icon/Icon';
// Utils
import {
createNotification,
deleteBookmark,
deleteBookmarkCategory,
pinBookmarkCategory,
reorderBookmarkCategories,
} from '../../../store/actions';
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 {
contentType: ContentType;
categories: Category[];
pinCategory: (category: Category) => void;
deleteCategory: (id: number) => void;
pinBookmarkCategory: (category: Category) => void;
deleteBookmarkCategory: (id: number) => void;
updateHandler: (data: Category | Bookmark) => void;
deleteBookmark: (bookmarkId: number, categoryId: number) => void;
createNotification: (notification: NewNotification) => void;
reorderCategories: (categories: Category[]) => void;
reorderBookmarkCategories: (categories: Category[]) => void;
}
const BookmarkTable = (props: ComponentProps): JSX.Element => {
@ -38,45 +35,53 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
// Copy categories array
useEffect(() => {
setLocalCategories([...props.categories]);
}, [props.categories])
}, [props.categories]);
// Check ordering
useEffect(() => {
const order = searchConfig('useOrdering', '');
const order = searchConfig("useOrdering", "");
if (order === 'orderId') {
if (order === "orderId") {
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 bookmarks`);
const proceed = window.confirm(
`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`
);
if (proceed) {
props.deleteCategory(category.id);
props.deleteBookmarkCategory(category.id);
}
}
};
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) {
props.deleteBookmark(bookmark.id, bookmark.categoryId);
}
}
};
const keyboardActionHandler = (e: KeyboardEvent, category: Category, handler: Function) => {
if (e.key === 'Enter') {
const keyboardActionHandler = (
e: KeyboardEvent,
category: Category,
handler: Function
) => {
if (e.key === "Enter") {
handler(category);
}
}
};
const dragEndHanlder = (result: DropResult): void => {
const dragEndHandler = (result: DropResult): void => {
if (!isCustomOrder) {
props.createNotification({
title: 'Error',
message: 'Custom order is disabled'
})
title: "Error",
message: "Custom order is disabled",
});
return;
}
@ -85,141 +90,170 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
}
const tmpCategories = [...localCategories];
const [movedApp] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedApp);
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedCategory);
setLocalCategories(tmpCategories);
props.reorderCategories(tmpCategories);
}
props.reorderBookmarkCategories(tmpCategories);
};
if (props.contentType === ContentType.category) {
return (
<Fragment>
<div className={classes.Message}>
{isCustomOrder
? <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>
}
{isCustomOrder ? (
<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>
)}
</div>
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId='categories'>
<DragDropContext onDragEnd={dragEndHandler}>
<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,
};
<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,
};
return (
<tr
{...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.pinCategory(category)}
onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)}
tabIndex={0}>
{category.isPinned
? <Icon icon='mdiPinOff' color='var(--color-accent)' />
: <Icon icon='mdiPin' />
}
</div>
</td>
)}
</tr>
)
}}
</Draggable>
)
})}
return (
<tr
{...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.pinBookmarkCategory(category)}
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>
)}
</Droppable>
</DragDropContext>
</Fragment>
)
);
} else {
const bookmarks: {bookmark: Bookmark, categoryName: string}[] = [];
const bookmarks: { bookmark: Bookmark; categoryName: string }[] = [];
props.categories.forEach((category: Category) => {
category.bookmarks.forEach((bookmark: Bookmark) => {
bookmarks.push({
bookmark,
categoryName: category.name
categoryName: category.name,
});
})
})
});
});
return (
<Table headers={[
'Name',
'URL',
'Icon',
'Category',
'Actions'
]}>
{bookmarks.map((bookmark: {bookmark: Bookmark, categoryName: string}) => {
return (
<tr key={bookmark.bookmark.id}>
<td>{bookmark.bookmark.name}</td>
<td>{bookmark.bookmark.url}</td>
<td>{bookmark.bookmark.icon}</td>
<td>{bookmark.categoryName}</td>
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
tabIndex={0}>
<Icon icon='mdiDelete' />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateHandler(bookmark.bookmark)}
tabIndex={0}>
<Icon icon='mdiPencil' />
</div>
</td>
</tr>
)
})}
<Table headers={["Name", "URL", "Icon", "Category", "Actions"]}>
{bookmarks.map(
(bookmark: { bookmark: Bookmark; categoryName: string }) => {
return (
<tr key={bookmark.bookmark.id}>
<td>{bookmark.bookmark.name}</td>
<td>{bookmark.bookmark.url}</td>
<td>{bookmark.bookmark.icon}</td>
<td>{bookmark.categoryName}</td>
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
tabIndex={0}
>
<Icon icon="mdiDelete" />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateHandler(bookmark.bookmark)}
tabIndex={0}
>
<Icon icon="mdiPencil" />
</div>
</td>
</tr>
);
}
)}
</Table>
)
);
}
}
};
const actions = {
pinCategory,
deleteCategory,
pinBookmarkCategory,
deleteBookmarkCategory,
deleteBookmark,
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 { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { getCategories } from '../../store/actions';
import { Link } from 'react-router-dom';
import classes from './Bookmarks.module.css';
import { Container } from '../UI/Layout/Layout';
import Headline from '../UI/Headlines/Headline/Headline';
import { Bookmark, Category, GlobalState } from '../../interfaces';
import { getBookmarkCategories } from '../../store/actions';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
import { Category, GlobalState, Bookmark } from '../../interfaces';
import Spinner from '../UI/Spinner/Spinner';
import Headline from '../UI/Headlines/Headline/Headline';
import { Container } from '../UI/Layout/Layout';
import Modal from '../UI/Modal/Modal';
import Spinner from '../UI/Spinner/Spinner';
import BookmarkForm from './BookmarkForm/BookmarkForm';
import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
import classes from './Bookmarks.module.css';
import BookmarkTable from './BookmarkTable/BookmarkTable';
interface ComponentProps {
loading: boolean;
categories: Category[];
getCategories: () => void;
getBookmarkCategories: () => void;
searching: boolean;
}
@ -29,7 +27,7 @@ export enum ContentType {
}
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 [formContentType, setFormContentType] = useState(ContentType.category);
@ -43,6 +41,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
id: -1,
isPinned: false,
orderId: 0,
type: 'bookmarks',
bookmarks: [],
createdAt: new Date(),
updatedAt: new Date(),
@ -59,9 +58,9 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
useEffect(() => {
if (categories.length === 0) {
getCategories();
getBookmarkCategories();
}
}, [getCategories]);
}, [getBookmarkCategories]);
const toggleModal = (): void => {
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';
// Redux
import { connect } from 'react-redux';
import { getApps, getCategories } from '../../store/actions';
// Typescript
import { App, Bookmark, Category } from '../../interfaces';
import { GlobalState } from '../../interfaces/GlobalState';
import { App, Category } from '../../interfaces';
// 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 { getAppCategories, getApps, getBookmarkCategories } from '../../store/actions';
import { searchConfig } from '../../utility';
import AppGrid from '../Apps/AppGrid/AppGrid';
import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
import SearchBar from '../SearchBar/SearchBar';
// Functions
import { greeter } from './functions/greeter';
import SectionHeadline from '../UI/Headlines/SectionHeadline/SectionHeadline';
import Icon from '../UI/Icons/Icon/Icon';
import { Container } from '../UI/Layout/Layout';
import Spinner from '../UI/Spinner/Spinner';
import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
import { dateTime } from './functions/dateTime';
// Utils
import { searchConfig } from '../../utility';
import { greeter } from './functions/greeter';
import classes from './Home.module.css';
interface ComponentProps {
getApps: Function;
getCategories: Function;
getApps: () => void;
getAppCategories: () => void;
getBookmarkCategories: () => void;
appsLoading: boolean;
bookmarkCategoriesLoading: boolean;
appCategories: Category[];
apps: App[];
categoriesLoading: boolean;
categories: Category[];
bookmarkCategories: Category[];
}
const Home = (props: ComponentProps): JSX.Element => {
const {
getAppCategories,
getApps,
getBookmarkCategories,
appCategories,
apps,
bookmarkCategories,
appsLoading,
getCategories,
categories,
categoriesLoading,
bookmarkCategoriesLoading,
} = props;
const [header, setHeader] = useState({
@ -58,7 +49,14 @@ const Home = (props: ComponentProps): JSX.Element => {
// Local search query
const [localSearch, setLocalSearch] = useState<null | string>(null);
// Load applications
// Load app categories
useEffect(() => {
if (appCategories.length === 0) {
getAppCategories();
}
}, [getAppCategories]);
// Load apps
useEffect(() => {
if (apps.length === 0) {
getApps();
@ -67,10 +65,10 @@ const Home = (props: ComponentProps): JSX.Element => {
// Load bookmark categories
useEffect(() => {
if (categories.length === 0) {
getCategories();
if (bookmarkCategories.length === 0) {
getBookmarkCategories();
}
}, [getCategories]);
}, [getBookmarkCategories]);
// Refresh greeter and time
useEffect(() => {
@ -90,13 +88,20 @@ const Home = (props: ComponentProps): JSX.Element => {
}, []);
// Search bookmarks
const searchBookmarks = (query: string): Category[] => {
const category = { ...categories[0] };
category.name = 'Search Results';
category.bookmarks = categories
.map(({ bookmarks }) => bookmarks)
.flat()
.filter(({ name }) => new RegExp(query, 'i').test(name));
const searchBookmarks = (query: string, categoriesToSearch: Category[]): Category[] => {
const category: Category = {
name: "Search Results",
type: categoriesToSearch[0].type,
isPinned: true,
bookmarks: categoriesToSearch
.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];
};
@ -131,14 +136,15 @@ const Home = (props: ComponentProps): JSX.Element => {
<Spinner />
) : (
<AppGrid
categories={appCategories.filter((category: Category) => category.isPinned)}
apps={
!localSearch
? apps.filter(({ isPinned }) => isPinned)
: apps.filter(({ name }) =>
new RegExp(localSearch, 'i').test(name)
? apps.filter((app: App) => app.isPinned)
: apps.filter((app: App) =>
new RegExp(localSearch, 'i').test(app.name)
)
}
totalApps={apps.length}
totalCategories={appCategories.length}
searching={!!localSearch}
/>
)}
@ -151,16 +157,16 @@ const Home = (props: ComponentProps): JSX.Element => {
{searchConfig('hideCategories', 0) !== 1 ? (
<Fragment>
<SectionHeadline title="Bookmarks" link="/bookmarks" />
{categoriesLoading ? (
{bookmarkCategoriesLoading ? (
<Spinner />
) : (
<BookmarkGrid
categories={
!localSearch
? categories.filter(({ isPinned }) => isPinned)
: searchBookmarks(localSearch)
? bookmarkCategories.filter((category: Category) => category.isPinned)
: searchBookmarks(localSearch, bookmarkCategories)
}
totalCategories={categories.length}
totalCategories={bookmarkCategories.length}
searching={!!localSearch}
/>
)}
@ -178,11 +184,12 @@ const Home = (props: ComponentProps): JSX.Element => {
const mapStateToProps = (state: GlobalState) => {
return {
appCategories: state.app.categories,
appsLoading: state.app.loading,
apps: state.app.apps,
categoriesLoading: state.bookmark.loading,
categories: state.bookmark.categories,
};
};
bookmarkCategoriesLoading: state.bookmark.loading,
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';
// Redux
import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces';
import {
createNotification,
updateConfig,
sortAppCategories,
sortApps,
sortCategories,
sortBookmarkCategories,
updateConfig,
} 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 Button from '../../UI/Buttons/Button/Button';
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import SettingsHeadline from '../../UI/Headlines/SettingsHeadline/SettingsHeadline';
interface ComponentProps {
createNotification: (notification: NewNotification) => void;
updateConfig: (formData: SettingsForm) => void;
sortAppCategories: () => void;
sortApps: () => void;
sortCategories: () => void;
sortBookmarkCategories: () => void;
loading: boolean;
}
@ -79,9 +70,10 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
// Update local page title
document.title = formData.customTitle;
// Sort apps and categories with new settings
// Apply new sort settings
props.sortAppCategories();
props.sortApps();
props.sortCategories();
props.sortBookmarkCategories();
};
// Input handler
@ -293,7 +285,8 @@ const actions = {
createNotification,
updateConfig,
sortApps,
sortCategories,
sortAppCategories,
sortBookmarkCategories
};
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 {
name: string;
url: string;
categoryId: number;
icon: string;
isPinned: boolean;
orderId: number;
@ -11,5 +12,6 @@ export interface App extends Model {
export interface NewApp {
name: string;
url: string;
categoryId: number;
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 {
name: string;
type: string;
isPinned: boolean;
orderId: number;
bookmarks: Bookmark[];
@ -9,4 +10,5 @@ export interface Category extends Model {
export interface NewCategory {
name: string;
type: string;
}

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

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

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

@ -1,32 +1,96 @@
import axios from 'axios';
import { Dispatch } from 'redux';
import { ApiResponse, App, Category, Config, NewApp, NewCategory } from '../../interfaces';
import { ActionTypes } from './actionTypes';
import { App, ApiResponse, NewApp, Config } from '../../interfaces';
import { CreateNotificationAction } from './notification';
export interface GetAppsAction<T> {
type: ActionTypes.getApps | ActionTypes.getAppsSuccess | ActionTypes.getAppsError;
type:
| ActionTypes.getApps
| ActionTypes.getAppsSuccess
| ActionTypes.getAppsError;
payload: T;
}
export const getApps = () => async (dispatch: Dispatch) => {
dispatch<GetAppsAction<undefined>>({
type: ActionTypes.getApps,
payload: undefined
payload: undefined,
});
try {
const res = await axios.get<ApiResponse<App[]>>('/api/apps');
const res = await axios.get<ApiResponse<App[]>>("/api/apps");
dispatch<GetAppsAction<App[]>>({
type: ActionTypes.getAppsSuccess,
payload: res.data.data
})
payload: res.data.data,
});
} catch (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 {
type: ActionTypes.pinApp;
payload: App;
@ -35,26 +99,30 @@ export interface PinAppAction {
export const pinApp = (app: App) => async (dispatch: Dispatch) => {
try {
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>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `App ${name} ${status}`
}
})
title: "Success",
message: `App ${name} ${status}`,
},
});
dispatch<PinAppAction>({
type: ActionTypes.pinApp,
payload: res.data.data
})
payload: res.data.data,
});
} catch (err) {
console.log(err);
}
}
};
export interface AddAppAction {
type: ActionTypes.addAppSuccess;
@ -63,31 +131,133 @@ export interface AddAppAction {
export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
try {
const res = await axios.post<ApiResponse<App>>('/api/apps', formData);
const res = await axios.post<ApiResponse<App>>("/api/apps", formData);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `App added`
}
})
title: "Success",
message: `App ${res.data.data.name} added`,
},
});
await dispatch<AddAppAction>({
type: ActionTypes.addAppSuccess,
payload: res.data.data
})
payload: res.data.data,
});
// Sort apps
dispatch<any>(sortApps())
dispatch<any>(sortApps());
} catch (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 {
type: ActionTypes.deleteApp,
payload: number
type: ActionTypes.deleteApp;
payload: number;
}
export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
@ -97,80 +267,86 @@ export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: 'App deleted'
}
})
title: "Success",
message: "App deleted",
},
});
dispatch<DeleteAppAction>({
type: ActionTypes.deleteApp,
payload: id
})
payload: id,
});
} catch (err) {
console.log(err);
}
}
};
export interface UpdateAppAction {
type: ActionTypes.updateApp;
payload: App;
}
export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
try {
const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, formData);
export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
try {
const res = await axios.put<ApiResponse<App>>(
`/api/apps/${id}`,
formData
);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `App updated`
}
})
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: "Success",
message: `App ${res.data.data.name} updated`,
},
});
await dispatch<UpdateAppAction>({
type: ActionTypes.updateApp,
payload: res.data.data
})
await dispatch<UpdateAppAction>({
type: ActionTypes.updateApp,
payload: res.data.data,
});
// Sort apps
dispatch<any>(sortApps())
} catch (err) {
console.log(err);
}
}
// Sort apps
dispatch<any>(sortApps());
} catch (err) {
console.log(err);
}
};
export interface ReorderAppsAction {
type: ActionTypes.reorderApps;
payload: App[]
payload: App[];
}
interface ReorderQuery {
interface ReorderAppsQuery {
apps: {
id: number;
orderId: number;
}[]
}[];
}
export const reorderApps = (apps: App[]) => async (dispatch: Dispatch) => {
try {
const updateQuery: ReorderQuery = { apps: [] }
const updateQuery: ReorderAppsQuery = { apps: [] };
apps.forEach((app, index) => updateQuery.apps.push({
id: app.id,
orderId: index + 1
}))
apps.forEach((app, index) => {
updateQuery.apps.push({
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>({
type: ActionTypes.reorderApps,
payload: apps
})
payload: apps,
});
} catch (err) {
console.log(err);
}
}
};
export interface SortAppsAction {
type: ActionTypes.sortApps;
@ -179,13 +355,75 @@ export interface SortAppsAction {
export const sortApps = () => async (dispatch: Dispatch) => {
try {
const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
const res = await axios.get<ApiResponse<Config>>("/api/config/useOrdering");
dispatch<SortAppsAction>({
type: ActionTypes.sortApps,
payload: res.data.data.value
})
payload: res.data.data.value,
});
} catch (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 { Dispatch } from 'redux';
import { ApiResponse, Bookmark, Category, Config, NewBookmark, NewCategory } from '../../interfaces';
import { ActionTypes } from './actionTypes';
import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark, Config } from '../../interfaces';
import { CreateNotificationAction } from './notification';
/**
* GET CATEGORIES
*/
export interface GetCategoriesAction<T> {
type: ActionTypes.getCategories | ActionTypes.getCategoriesSuccess | ActionTypes.getCategoriesError;
export interface GetBookmarkCategoriesAction<T> {
type: ActionTypes.getBookmarkCategories | ActionTypes.getBookmarkCategoriesSuccess | ActionTypes.getBookmarkCategoriesError;
payload: T;
}
export const getCategories = () => async (dispatch: Dispatch) => {
dispatch<GetCategoriesAction<undefined>>({
type: ActionTypes.getCategories,
export const getBookmarkCategories = () => async (dispatch: Dispatch) => {
dispatch<GetBookmarkCategoriesAction<undefined>>({
type: ActionTypes.getBookmarkCategories,
payload: undefined
})
try {
const res = await axios.get<ApiResponse<Category[]>>('/api/categories');
dispatch<GetCategoriesAction<Category[]>>({
type: ActionTypes.getCategoriesSuccess,
payload: res.data.data
dispatch<GetBookmarkCategoriesAction<Category[]>>({
type: ActionTypes.getBookmarkCategoriesSuccess,
payload: res.data.data.filter((category: Category) => category.type === 'bookmarks'),
})
} catch (err) {
console.log(err);
@ -33,12 +34,12 @@ export const getCategories = () => async (dispatch: Dispatch) => {
/**
* ADD CATEGORY
*/
export interface AddCategoryAction {
type: ActionTypes.addCategory,
export interface AddBookmarkCategoryAction {
type: ActionTypes.addBookmarkCategory,
payload: Category
}
export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch) => {
export const addBookmarkCategory = (formData: NewCategory) => async (dispatch: Dispatch) => {
try {
const res = await axios.post<ApiResponse<Category>>('/api/categories', formData);
@ -50,12 +51,12 @@ export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch)
}
})
dispatch<AddCategoryAction>({
type: ActionTypes.addCategory,
dispatch<AddBookmarkCategoryAction>({
type: ActionTypes.addBookmarkCategory,
payload: res.data.data
})
dispatch<any>(sortCategories());
dispatch<any>(sortBookmarkCategories());
} catch (err) {
console.log(err);
}
@ -93,12 +94,12 @@ export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch
/**
* PIN CATEGORY
*/
export interface PinCategoryAction {
type: ActionTypes.pinCategory,
export interface PinBookmarkCategoryAction {
type: ActionTypes.pinBookmarkCategory,
payload: Category
}
export const pinCategory = (category: Category) => async (dispatch: Dispatch) => {
export const pinBookmarkCategory = (category: Category) => async (dispatch: Dispatch) => {
try {
const { id, isPinned, name } = category;
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>({
type: ActionTypes.pinCategory,
dispatch<PinBookmarkCategoryAction>({
type: ActionTypes.pinBookmarkCategory,
payload: res.data.data
})
} catch (err) {
@ -125,12 +126,12 @@ export const pinCategory = (category: Category) => async (dispatch: Dispatch) =>
/**
* DELETE CATEGORY
*/
export interface DeleteCategoryAction {
type: ActionTypes.deleteCategory,
export interface DeleteBookmarkCategoryAction {
type: ActionTypes.deleteBookmarkCategory,
payload: number
}
export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
export const deleteBookmarkCategory = (id: number) => async (dispatch: Dispatch) => {
try {
await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
@ -142,8 +143,8 @@ export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
}
})
dispatch<DeleteCategoryAction>({
type: ActionTypes.deleteCategory,
dispatch<DeleteBookmarkCategoryAction>({
type: ActionTypes.deleteBookmarkCategory,
payload: id
})
} catch (err) {
@ -154,12 +155,12 @@ export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
/**
* UPDATE CATEGORY
*/
export interface UpdateCategoryAction {
type: ActionTypes.updateCategory,
export interface UpdateBookmarkCategoryAction {
type: ActionTypes.updateBookmarkCategory,
payload: Category
}
export const updateCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
export const updateBookmarkCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
try {
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>({
type: ActionTypes.updateCategory,
dispatch<UpdateBookmarkCategoryAction>({
type: ActionTypes.updateBookmarkCategory,
payload: res.data.data
})
dispatch<any>(sortCategories());
dispatch<any>(sortBookmarkCategories());
} catch (err) {
console.log(err);
}
@ -277,17 +278,17 @@ export const updateBookmark = (
/**
* SORT CATEGORIES
*/
export interface SortCategoriesAction {
type: ActionTypes.sortCategories;
export interface SortBookmarkCategoriesAction {
type: ActionTypes.sortBookmarkCategories;
payload: string;
}
export const sortCategories = () => async (dispatch: Dispatch) => {
export const sortBookmarkCategories = () => async (dispatch: Dispatch) => {
try {
const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
dispatch<SortCategoriesAction>({
type: ActionTypes.sortCategories,
dispatch<SortBookmarkCategoriesAction>({
type: ActionTypes.sortBookmarkCategories,
payload: res.data.data.value
})
} catch (err) {
@ -298,8 +299,8 @@ export const sortCategories = () => async (dispatch: Dispatch) => {
/**
* REORDER CATEGORIES
*/
export interface ReorderCategoriesAction {
type: ActionTypes.reorderCategories;
export interface ReorderBookmarkCategoriesAction {
type: ActionTypes.reorderBookmarkCategories;
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 {
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);
dispatch<ReorderCategoriesAction>({
type: ActionTypes.reorderCategories,
dispatch<ReorderBookmarkCategoriesAction>({
type: ActionTypes.reorderBookmarkCategories,
payload: categories
})
} catch (err) {

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

@ -1,72 +1,152 @@
import { ActionTypes, Action } from '../actions';
import { App } from '../../interfaces/App';
import { App, Category } from '../../interfaces';
import { sortData } from '../../utility';
import { Action, ActionTypes } from '../actions';
export interface State {
loading: boolean;
apps: App[];
errors: string | undefined;
categories: Category[];
apps: App[];
}
const initialState: State = {
loading: true,
errors: undefined,
categories: [],
apps: [],
errors: undefined
}
};
const getApps = (state: State, action: Action): State => {
return {
...state,
loading: true,
errors: undefined
}
}
errors: undefined,
};
};
const getAppsSuccess = (state: State, action: Action): State => {
return {
...state,
loading: false,
apps: action.payload
}
}
apps: action.payload,
};
};
const getAppsError = (state: State, action: Action): State => {
return {
...state,
loading: false,
errors: action.payload
errors: action.payload,
};
};
const 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 tmpApps = [...state.apps];
const changedApp = tmpApps.find((app: App) => app.id === action.payload.id);
if (changedApp) {
changedApp.isPinned = action.payload.isPinned;
}
return {
...state,
apps: tmpApps
}
}
apps: tmpApps,
};
};
const addAppSuccess = (state: State, action: Action): State => {
return {
...state,
apps: [...state.apps, action.payload]
}
}
apps: [...state.apps, action.payload],
};
};
const deleteApp = (state: State, action: Action): State => {
const tmpApps = [...state.apps].filter((app: App) => app.id !== action.payload);
const deleteCategory = (state: State, action: Action): State => {
const categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload
);
return {
...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 tmpApps = [...state.apps];
@ -76,43 +156,96 @@ const updateApp = (state: State, action: Action): State => {
appInUpdate.name = action.payload.name;
appInUpdate.url = action.payload.url;
appInUpdate.icon = action.payload.icon;
appInUpdate.categoryId = action.payload.categoryId;
}
return {
...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 => {
return {
...state,
apps: action.payload
}
}
apps: action.payload,
};
};
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);
return {
...state,
apps: sortedApps
}
}
apps: sortedApps,
};
};
const appReducer = (state = initialState, action: Action) => {
switch (action.type) {
case ActionTypes.getApps: return getApps(state, action);
case ActionTypes.getAppsSuccess: return getAppsSuccess(state, action);
case ActionTypes.getAppsError: return getAppsError(state, action);
case ActionTypes.pinApp: return pinApp(state, action);
case ActionTypes.addAppSuccess: return addAppSuccess(state, action);
case ActionTypes.deleteApp: return deleteApp(state, action);
case ActionTypes.updateApp: return updateApp(state, action);
case ActionTypes.reorderApps: return reorderApps(state, action);
case ActionTypes.sortApps: return sortApps(state, action);
default: return state;
case ActionTypes.getAppCategories:
return getCategories(state, action);
case ActionTypes.getAppCategoriesSuccess:
return getCategoriesSuccess(state, action);
case ActionTypes.getApps:
return getApps(state, action);
case ActionTypes.getAppsSuccess:
return getAppsSuccess(state, action);
case ActionTypes.getAppsError:
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 { Category, Bookmark } from '../../interfaces';
import { Bookmark, Category } from '../../interfaces';
import { sortData } from '../../utility';
import { Action, ActionTypes } from '../actions';
export interface State {
loading: boolean;
@ -37,6 +37,7 @@ const addCategory = (state: State, action: Action): State => {
...state.categories,
{
...action.payload,
type: '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);
return {
@ -160,17 +161,17 @@ const reorderCategories = (state: State, action: Action): State => {
const bookmarkReducer = (state = initialState, action: Action) => {
switch (action.type) {
case ActionTypes.getCategories: return getCategories(state, action);
case ActionTypes.getCategoriesSuccess: return getCategoriesSuccess(state, action);
case ActionTypes.addCategory: return addCategory(state, action);
case ActionTypes.getBookmarkCategories: return getCategories(state, action);
case ActionTypes.getBookmarkCategoriesSuccess: return getCategoriesSuccess(state, action);
case ActionTypes.addBookmarkCategory: return addCategory(state, action);
case ActionTypes.addBookmark: return addBookmark(state, action);
case ActionTypes.pinCategory: return pinCategory(state, action);
case ActionTypes.deleteCategory: return deleteCategory(state, action);
case ActionTypes.updateCategory: return updateCategory(state, action);
case ActionTypes.pinBookmarkCategory: return pinCategory(state, action);
case ActionTypes.deleteBookmarkCategory: return deleteCategory(state, action);
case ActionTypes.updateBookmarkCategory: return updateCategory(state, action);
case ActionTypes.deleteBookmark: return deleteBookmark(state, action);
case ActionTypes.updateBookmark: return updateBookmark(state, action);
case ActionTypes.sortCategories: return sortCategories(state, action);
case ActionTypes.reorderCategories: return reorderCategories(state, action);
case ActionTypes.sortBookmarkCategories: return sortBookmarkCategories(state, action);
case ActionTypes.reorderBookmarkCategories: return reorderCategories(state, action);
default: return state;
}
}

26
controllers/category.js
View file

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

4
models/App.js
View file

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

4
models/Category.js
View file

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

10
models/associateModels.js
View file

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