beenull/flame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #226 from pawelmalak/feature

Browse source 
Version 2.1.0
This commit is contained in:
pawelmalak 2021-11-26 14:52:32 +01:00 committed by GitHub
commit 2ca90a18e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
56 changed files with 1272 additions and 723 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env
View file

@ -1,5 +1,5 @@
PORT=5005
NODE_ENV=development
VERSION=2.0.1
VERSION=2.1.0
PASSWORD=flame_password
SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

9
CHANGELOG.md
View file

@ -1,3 +1,12 @@
### v2.1.0 (2021-11-26)
- Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
- Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
- Empty apps and categories sections will now be hidden from guests ([#210](https://github.com/pawelmalak/flame/issues/210))
- Fixed bug with fahrenheit degrees being displayed as float ([#221](https://github.com/pawelmalak/flame/issues/221))
- Fixed bug with alphabetical order not working for bookmarks until the page was refreshed ([#224](https://github.com/pawelmalak/flame/issues/224))
- Added option to change visibilty of apps, categories and bookmarks directly from table view
- Password input will now autofocus when visiting /settings/app
### v2.0.1 (2021-11-19)
- Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
- Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))

2
client/.env
View file

@ -1 +1 @@
REACT_APP_VERSION=2.0.1
REACT_APP_VERSION=2.1.0

12
client/src/components/Actions/TableActions.module.css Normal file
View file

@ -0,0 +1,12 @@
.TableActions {
display: flex;
align-items: center;
}
.TableAction {
width: 22px;
}
.TableAction:hover {
cursor: pointer;
}

81
client/src/components/Actions/TableActions.tsx Normal file
View file

@ -0,0 +1,81 @@
import { Icon } from '../UI';
import classes from './TableActions.module.css';
interface Entity {
id: number;
name: string;
isPinned?: boolean;
isPublic: boolean;
}
interface Props {
entity: Entity;
deleteHandler: (id: number, name: string) => void;
updateHandler: (id: number) => void;
pinHanlder?: (id: number) => void;
changeVisibilty: (id: number) => void;
showPin?: boolean;
}
export const TableActions = (props: Props): JSX.Element => {
const {
entity,
deleteHandler,
updateHandler,
pinHanlder,
changeVisibilty,
showPin = true,
} = props;
const _pinHandler = pinHanlder || function () {};
return (
<td className={classes.TableActions}>
{/* DELETE */}
<div
className={classes.TableAction}
onClick={() => deleteHandler(entity.id, entity.name)}
tabIndex={0}
>
<Icon icon="mdiDelete" />
</div>
{/* UPDATE */}
<div
className={classes.TableAction}
onClick={() => updateHandler(entity.id)}
tabIndex={0}
>
<Icon icon="mdiPencil" />
</div>
{/* PIN */}
{showPin && (
<div
className={classes.TableAction}
onClick={() => _pinHandler(entity.id)}
tabIndex={0}
>
{entity.isPinned ? (
<Icon icon="mdiPinOff" color="var(--color-accent)" />
) : (
<Icon icon="mdiPin" />
)}
</div>
)}
{/* VISIBILITY */}
<div
className={classes.TableAction}
onClick={() => changeVisibilty(entity.id)}
tabIndex={0}
>
{entity.isPublic ? (
<Icon icon="mdiEyeOff" color="var(--color-accent)" />
) : (
<Icon icon="mdiEye" />
)}
</div>
</td>
);
};

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

@ -1,6 +1,6 @@
import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
import { useDispatch } from 'react-redux';
import { App, NewApp } from '../../../interfaces';
import { useDispatch, useSelector } from 'react-redux';
import { NewApp } from '../../../interfaces';
import classes from './AppForm.module.css';
@ -8,29 +8,34 @@ import { ModalForm, InputGroup, Button } from '../../UI';
import { inputHandler, newAppTemplate } from '../../../utility';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
import { State } from '../../../store/reducers';
interface Props {
modalHandler: () => void;
app?: App;
}
export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
export const AppForm = ({ modalHandler }: Props): JSX.Element => {
const { appInUpdate } = useSelector((state: State) => state.apps);
const dispatch = useDispatch();
const { addApp, updateApp } = bindActionCreators(actionCreators, dispatch);
const { addApp, updateApp, setEditApp } = bindActionCreators(
actionCreators,
dispatch
);
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
const [customIcon, setCustomIcon] = useState<File | null>(null);
const [formData, setFormData] = useState<NewApp>(newAppTemplate);
useEffect(() => {
if (app) {
if (appInUpdate) {
setFormData({
...app,
...appInUpdate,
});
} else {
setFormData(newAppTemplate);
}
}, [app]);
}, [appInUpdate]);
const inputChangeHandler = (
e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
@ -66,7 +71,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
return data;
};
if (!app) {
if (!appInUpdate) {
if (customIcon) {
const data = createFormData();
addApp(data);
@ -76,14 +81,15 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
} else {
if (customIcon) {
const data = createFormData();
updateApp(app.id, data);
updateApp(appInUpdate.id, data);
} else {
updateApp(app.id, formData);
updateApp(appInUpdate.id, formData);
modalHandler();
}
}
setFormData(newAppTemplate);
setEditApp(null);
};
return (
@ -154,7 +160,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
id="icon"
required
onChange={(e) => fileChangeHandler(e)}
accept=".jpg,.jpeg,.png,.svg"
accept=".jpg,.jpeg,.png,.svg,.ico"
/>
<span
onClick={() => {
@ -182,7 +188,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
</select>
</InputGroup>
{!app ? (
{!appInUpdate ? (
<Button>Add new application</Button>
) : (
<Button>Update application</Button>

18
client/src/components/Apps/AppGrid/AppGrid.module.css
View file

@ -20,21 +20,3 @@
grid-template-columns: repeat(4, 1fr);
}
}
.GridMessage {
color: var(--color-primary);
}
.GridMessage a {
color: var(--color-accent);
font-weight: 600;
}
.AppsMessage {
color: var(--color-primary);
}
.AppsMessage a {
color: var(--color-accent);
font-weight: 600;
}

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

@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import { App } from '../../../interfaces/App';
import { AppCard } from '../AppCard/AppCard';
import { Message } from '../../UI';
interface Props {
apps: App[];
@ -13,36 +14,32 @@ interface Props {
export const AppGrid = (props: Props): JSX.Element => {
let apps: JSX.Element;
if (props.apps.length > 0) {
apps = (
<div className={classes.AppGrid}>
{props.apps.map((app: App): JSX.Element => {
return <AppCard key={app.id} app={app} />;
})}
</div>
);
} else {
if (props.totalApps) {
if (props.searching) {
apps = (
<p className={classes.AppsMessage}>
No apps match your search criteria
</p>
);
} else {
apps = (
<p className={classes.AppsMessage}>
There are no pinned applications. You can pin them from the{' '}
<Link to="/applications">/applications</Link> menu
</p>
);
}
if (props.searching || props.apps.length) {
if (!props.apps.length) {
apps = <Message>No apps match your search criteria</Message>;
} else {
apps = (
<p className={classes.AppsMessage}>
<div className={classes.AppGrid}>
{props.apps.map((app: App): JSX.Element => {
return <AppCard key={app.id} app={app} />;
})}
</div>
);
}
} else {
if (props.totalApps) {
apps = (
<Message>
There are no pinned applications. You can pin them from the{' '}
<Link to="/applications">/applications</Link> menu
</Message>
);
} else {
apps = (
<Message>
You don't have any applications. You can add a new one from{' '}
<Link to="/applications">/applications</Link> menu
</p>
</Message>
);
}
}

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

@ -1,4 +1,4 @@
import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
import { Fragment, useState, useEffect } from 'react';
import {
DragDropContext,
Droppable,
@ -9,21 +9,20 @@ import { Link } from 'react-router-dom';
// Redux
import { useDispatch, useSelector } from 'react-redux';
// Typescript
import { App } from '../../../interfaces';
// CSS
import classes from './AppTable.module.css';
// UI
import { Icon, Table } from '../../UI';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { App } from '../../../interfaces';
// Other
import classes from './AppTable.module.css';
import { Table } from '../../UI';
import { TableActions } from '../../Actions/TableActions';
interface Props {
updateAppHandler: (app: App) => void;
openFormForUpdating: (app: App) => void;
}
export const AppTable = (props: Props): JSX.Element => {
@ -33,49 +32,18 @@ export const AppTable = (props: Props): JSX.Element => {
} = useSelector((state: State) => state);
const dispatch = useDispatch();
const { pinApp, deleteApp, reorderApps, updateConfig, createNotification } =
const { pinApp, deleteApp, reorderApps, createNotification, updateApp } =
bindActionCreators(actionCreators, dispatch);
const [localApps, setLocalApps] = useState<App[]>([]);
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
// Copy apps array
useEffect(() => {
setLocalApps([...apps]);
}, [apps]);
// Check ordering
useEffect(() => {
const order = config.useOrdering;
if (order === 'orderId') {
setIsCustomOrder(true);
}
}, []);
const deleteAppHandler = (app: App): void => {
const proceed = window.confirm(
`Are you sure you want to delete ${app.name} at ${app.url} ?`
);
if (proceed) {
deleteApp(app.id);
}
};
// Support keyboard navigation for actions
const keyboardActionHandler = (
e: KeyboardEvent,
app: App,
handler: Function
) => {
if (e.key === 'Enter') {
handler(app);
}
};
const dragEndHanlder = (result: DropResult): void => {
if (!isCustomOrder) {
if (config.useOrdering !== 'orderId') {
createNotification({
title: 'Error',
message: 'Custom order is disabled',
@ -95,18 +63,43 @@ export const AppTable = (props: Props): JSX.Element => {
reorderApps(tmpApps);
};
// Action handlers
const deleteAppHandler = (id: number, name: string) => {
const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
if (proceed) {
deleteApp(id);
}
};
const updateAppHandler = (id: number) => {
const app = apps.find((a) => a.id === id) as App;
props.openFormForUpdating(app);
};
const pinAppHandler = (id: number) => {
const app = apps.find((a) => a.id === id) as App;
pinApp(app);
};
const changeAppVisibiltyHandler = (id: number) => {
const app = apps.find((a) => a.id === id) as App;
updateApp(id, { ...app, isPublic: !app.isPublic });
};
return (
<Fragment>
<div className={classes.Message}>
{isCustomOrder ? (
{config.useOrdering === 'orderId' ? (
<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>
Custom order is disabled. You can change it in the{' '}
<Link to="/settings/interface">settings</Link>
</p>
)}
</div>
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId="apps">
{(provided) => (
@ -143,54 +136,15 @@ export const AppTable = (props: Props): JSX.Element => {
<td style={{ width: '200px' }}>
{app.isPublic ? 'Visible' : 'Hidden'}
</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={() => pinApp(app)}
onKeyDown={(e) =>
keyboardActionHandler(e, app, pinApp)
}
tabIndex={0}
>
{app.isPinned ? (
<Icon
icon="mdiPinOff"
color="var(--color-accent)"
/>
) : (
<Icon icon="mdiPin" />
)}
</div>
</td>
<TableActions
entity={app}
deleteHandler={deleteAppHandler}
updateHandler={updateAppHandler}
pinHanlder={pinAppHandler}
changeVisibilty={changeAppVisibiltyHandler}
/>
)}
</tr>
);

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

@ -19,7 +19,6 @@ import { AppForm } from './AppForm/AppForm';
import { AppTable } from './AppTable/AppTable';
// Utils
import { appTemplate } from '../../utility';
import { State } from '../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../store';
@ -29,57 +28,53 @@ interface Props {
}
export const Apps = (props: Props): JSX.Element => {
// Get Redux state
const {
apps: { apps, loading },
auth: { isAuthenticated },
} = useSelector((state: State) => state);
// Get Redux action creators
const dispatch = useDispatch();
const { getApps } = bindActionCreators(actionCreators, dispatch);
const [modalIsOpen, setModalIsOpen] = useState(false);
const [isInEdit, setIsInEdit] = useState(false);
const [isInUpdate, setIsInUpdate] = useState(false);
const [appInUpdate, setAppInUpdate] = useState<App>(appTemplate);
const { getApps, setEditApp } = bindActionCreators(actionCreators, dispatch);
// Load apps if array is empty
useEffect(() => {
if (!apps.length) {
getApps();
}
}, []);
// observe if user is authenticated -> set default view if not
// Form
const [modalIsOpen, setModalIsOpen] = useState(false);
const [showTable, setShowTable] = useState(false);
// Observe if user is authenticated -> set default view if not
useEffect(() => {
if (!isAuthenticated) {
setIsInEdit(false);
setShowTable(false);
setModalIsOpen(false);
}
}, [isAuthenticated]);
// Form actions
const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen);
setIsInUpdate(false);
};
const toggleEdit = (): void => {
setIsInEdit(!isInEdit);
setIsInUpdate(false);
setShowTable(!showTable);
};
const toggleUpdate = (app: App): void => {
setAppInUpdate(app);
setIsInUpdate(true);
const openFormForUpdating = (app: App): void => {
setEditApp(app);
setModalIsOpen(true);
};
return (
<Container>
<Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
{!isInUpdate ? (
<AppForm modalHandler={toggleModal} />
) : (
<AppForm modalHandler={toggleModal} app={appInUpdate} />
)}
<AppForm modalHandler={toggleModal} />
</Modal>
<Headline
@ -89,7 +84,14 @@ export const Apps = (props: Props): JSX.Element => {
{isAuthenticated && (
<div className={classes.ActionsContainer}>
<ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
<ActionButton
name="Add"
icon="mdiPlusBox"
handler={() => {
setEditApp(null);
toggleModal();
}}
/>
<ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
</div>
)}
@ -97,10 +99,10 @@ export const Apps = (props: Props): JSX.Element => {
<div className={classes.Apps}>
{loading ? (
<Spinner />
) : !isInEdit ? (
) : !showTable ? (
<AppGrid apps={apps} searching={props.searching} />
) : (
<AppTable updateAppHandler={toggleUpdate} />
<AppTable openFormForUpdating={openFormForUpdating} />
)}
</div>
</Container>

4
client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
View file

@ -10,6 +10,10 @@
text-transform: uppercase;
}
.BookmarkHeader:hover {
cursor: pointer;
}
.Bookmarks {
display: flex;
flex-direction: column;

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

@ -1,28 +1,47 @@
import { Fragment } from 'react';
import { useSelector } from 'react-redux';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { Bookmark, Category } from '../../../interfaces';
// Other
import classes from './BookmarkCard.module.css';
import { Icon } from '../../UI';
import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
interface Props {
category: Category;
fromHomepage?: boolean;
}
export const BookmarkCard = (props: Props): JSX.Element => {
const { category, fromHomepage = false } = props;
const { config } = useSelector((state: State) => state.config);
const dispatch = useDispatch();
const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
return (
<div className={classes.BookmarkCard}>
<h3>{props.category.name}</h3>
<h3
className={fromHomepage ? '' : classes.BookmarkHeader}
onClick={() => {
if (!fromHomepage) {
setEditCategory(category);
}
}}
>
{category.name}
</h3>
<div className={classes.Bookmarks}>
{props.category.bookmarks.map((bookmark: Bookmark) => {
{category.bookmarks.map((bookmark: Bookmark) => {
const redirectUrl = urlParser(bookmark.url)[1];
let iconEl: JSX.Element = <Fragment></Fragment>;

9
client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css
View file

@ -20,12 +20,3 @@
grid-template-columns: repeat(4, 1fr);
}
}
.BookmarksMessage {
color: var(--color-primary);
}
.BookmarksMessage a {
color: var(--color-accent);
font-weight: 600;
}

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

@ -5,48 +5,57 @@ import classes from './BookmarkGrid.module.css';
import { Category } from '../../../interfaces';
import { BookmarkCard } from '../BookmarkCard/BookmarkCard';
import { Message } from '../../UI';
interface Props {
categories: Category[];
totalCategories?: number;
searching: boolean;
fromHomepage?: boolean;
}
export const BookmarkGrid = (props: Props): JSX.Element => {
const {
categories,
totalCategories,
searching,
fromHomepage = false,
} = props;
let bookmarks: JSX.Element;
if (props.categories.length) {
if (props.searching && !props.categories[0].bookmarks.length) {
bookmarks = (
<p className={classes.BookmarksMessage}>
No bookmarks match your search criteria
</p>
);
if (categories.length) {
if (searching && !categories[0].bookmarks.length) {
bookmarks = <Message>No bookmarks match your search criteria</Message>;
} else {
bookmarks = (
<div className={classes.BookmarkGrid}>
{props.categories.map(
{categories.map(
(category: Category): JSX.Element => (
<BookmarkCard category={category} key={category.id} />
<BookmarkCard
category={category}
fromHomepage={fromHomepage}
key={category.id}
/>
)
)}
</div>
);
}
} else {
if (props.totalCategories) {
if (totalCategories) {
bookmarks = (
<p className={classes.BookmarksMessage}>
<Message>
There are no pinned categories. You can pin them from the{' '}
<Link to="/bookmarks">/bookmarks</Link> menu
</p>
</Message>
);
} else {
bookmarks = (
<p className={classes.BookmarksMessage}>
<Message>
You don't have any bookmarks. You can add a new one from{' '}
<Link to="/bookmarks">/bookmarks</Link> menu
</p>
</Message>
);
}
}

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

@ -1,272 +0,0 @@
import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
import {
DragDropContext,
Droppable,
Draggable,
DropResult,
} from 'react-beautiful-dnd';
import { Link } from 'react-router-dom';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { Bookmark, Category } from '../../../interfaces';
import { ContentType } from '../Bookmarks';
// CSS
import classes from './BookmarkTable.module.css';
// UI
import { Table, Icon } from '../../UI';
interface Props {
contentType: ContentType;
categories: Category[];
updateHandler: (data: Category | Bookmark) => void;
}
export const BookmarkTable = (props: Props): JSX.Element => {
const { config } = useSelector((state: State) => state.config);
const dispatch = useDispatch();
const {
pinCategory,
deleteCategory,
deleteBookmark,
createNotification,
reorderCategories,
} = bindActionCreators(actionCreators, dispatch);
const [localCategories, setLocalCategories] = useState<Category[]>([]);
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
// Copy categories array
useEffect(() => {
setLocalCategories([...props.categories]);
}, [props.categories]);
// Check ordering
useEffect(() => {
const order = config.useOrdering;
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`
);
if (proceed) {
deleteCategory(category.id);
}
};
const deleteBookmarkHandler = (bookmark: Bookmark): void => {
const proceed = window.confirm(
`Are you sure you want to delete ${bookmark.name}?`
);
if (proceed) {
deleteBookmark(bookmark.id, bookmark.categoryId);
}
};
const keyboardActionHandler = (
e: KeyboardEvent,
category: Category,
handler: Function
) => {
if (e.key === 'Enter') {
handler(category);
}
};
const dragEndHanlder = (result: DropResult): void => {
if (!isCustomOrder) {
createNotification({
title: 'Error',
message: 'Custom order is disabled',
});
return;
}
if (!result.destination) {
return;
}
const tmpCategories = [...localCategories];
const [movedApp] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedApp);
setLocalCategories(tmpCategories);
reorderCategories(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>
)}
</div>
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId="categories">
{(provided) => (
<Table
headers={['Name', 'Visibility', '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 style={{ width: '300px' }}>
{category.name}
</td>
<td style={{ width: '300px' }}>
{category.isPublic ? 'Visible' : 'Hidden'}
</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={() => pinCategory(category)}
onKeyDown={(e) =>
keyboardActionHandler(
e,
category,
pinCategory
)
}
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 }[] = [];
props.categories.forEach((category: Category) => {
category.bookmarks.forEach((bookmark: Bookmark) => {
bookmarks.push({
bookmark,
categoryName: category.name,
});
});
});
return (
<Table
headers={['Name', 'URL', 'Icon', 'Visibility', '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.bookmark.isPublic ? 'Visible' : 'Hidden'}</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>
);
}
};

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

@ -18,11 +18,8 @@ import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
// Components
import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
import { BookmarkTable } from './BookmarkTable/BookmarkTable';
import { Form } from './Form/Form';
// Utils
import { bookmarkTemplate, categoryTemplate } from '../../utility';
import { Table } from './Table/Table';
interface Props {
searching: boolean;
@ -34,76 +31,96 @@ export enum ContentType {
}
export const Bookmarks = (props: Props): JSX.Element => {
// Get Redux state
const {
bookmarks: { loading, categories },
bookmarks: { loading, categories, categoryInEdit },
auth: { isAuthenticated },
} = useSelector((state: State) => state);
// Get Redux action creators
const dispatch = useDispatch();
const { getCategories } = bindActionCreators(actionCreators, dispatch);
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>(categoryTemplate);
const [bookmarkInUpdate, setBookmarkInUpdate] =
useState<Bookmark>(bookmarkTemplate);
const { getCategories, setEditCategory, setEditBookmark } =
bindActionCreators(actionCreators, dispatch);
// Load categories if array is empty
useEffect(() => {
if (!categories.length) {
getCategories();
}
}, []);
// observe if user is authenticated -> set default view if not
// Form
const [modalIsOpen, setModalIsOpen] = useState(false);
const [formContentType, setFormContentType] = useState(ContentType.category);
const [isInUpdate, setIsInUpdate] = useState(false);
// Table
const [showTable, setShowTable] = useState(false);
const [tableContentType, setTableContentType] = useState(
ContentType.category
);
// Observe if user is authenticated -> set default view (grid) if not
useEffect(() => {
if (!isAuthenticated) {
setIsInEdit(false);
setShowTable(false);
setModalIsOpen(false);
}
}, [isAuthenticated]);
useEffect(() => {
if (categoryInEdit && !modalIsOpen) {
setTableContentType(ContentType.bookmark);
setShowTable(true);
}
}, [categoryInEdit]);
useEffect(() => {
setShowTable(false);
setEditCategory(null);
}, []);
// Form actions
const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen);
};
const addActionHandler = (contentType: ContentType) => {
const openFormForAdding = (contentType: ContentType) => {
setFormContentType(contentType);
setIsInUpdate(false);
toggleModal();
};
const editActionHandler = (contentType: ContentType) => {
// We're in the edit mode and the same button was clicked - go back to list
if (isInEdit && contentType === tableContentType) {
setIsInEdit(false);
} else {
setIsInEdit(true);
setTableContentType(contentType);
}
};
const instanceOfCategory = (object: any): object is Category => {
return 'bookmarks' in object;
};
const goToUpdateMode = (data: Category | Bookmark): void => {
const openFormForUpdating = (data: Category | Bookmark): void => {
setIsInUpdate(true);
const instanceOfCategory = (object: any): object is Category => {
return 'bookmarks' in object;
};
if (instanceOfCategory(data)) {
setFormContentType(ContentType.category);
setCategoryInUpdate(data);
setEditCategory(data);
} else {
setFormContentType(ContentType.bookmark);
setBookmarkInUpdate(data);
setEditBookmark(data);
}
toggleModal();
};
// Table actions
const showTableForEditing = (contentType: ContentType) => {
// We're in the edit mode and the same button was clicked - go back to list
if (showTable && contentType === tableContentType) {
setEditCategory(null);
setShowTable(false);
} else {
setShowTable(true);
setTableContentType(contentType);
}
};
return (
<Container>
<Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
@ -111,8 +128,6 @@ export const Bookmarks = (props: Props): JSX.Element => {
modalHandler={toggleModal}
contentType={formContentType}
inUpdate={isInUpdate}
category={categoryInUpdate}
bookmark={bookmarkInUpdate}
/>
</Modal>
@ -123,35 +138,34 @@ export const Bookmarks = (props: Props): JSX.Element => {
<ActionButton
name="Add Category"
icon="mdiPlusBox"
handler={() => addActionHandler(ContentType.category)}
handler={() => openFormForAdding(ContentType.category)}
/>
<ActionButton
name="Add Bookmark"
icon="mdiPlusBox"
handler={() => addActionHandler(ContentType.bookmark)}
handler={() => openFormForAdding(ContentType.bookmark)}
/>
<ActionButton
name="Edit Categories"
icon="mdiPencil"
handler={() => editActionHandler(ContentType.category)}
handler={() => showTableForEditing(ContentType.category)}
/>
<ActionButton
name="Edit Bookmarks"
icon="mdiPencil"
handler={() => editActionHandler(ContentType.bookmark)}
handler={() => showTableForEditing(ContentType.bookmark)}
/>
</div>
)}
{loading ? (
<Spinner />
) : !isInEdit ? (
) : !showTable ? (
<BookmarkGrid categories={categories} searching={props.searching} />
) : (
<BookmarkTable
<Table
contentType={tableContentType}
categories={categories}
updateHandler={goToUpdateMode}
openFormForUpdating={openFormForUpdating}
/>
)}
</Container>

14
client/src/components/Bookmarks/Form/BookmarksForm.tsx
View file

@ -137,15 +137,15 @@ export const BookmarksForm = ({
}
modalHandler();
setFormData(newBookmarkTemplate);
setCustomIcon(null);
}
setFormData({ ...newBookmarkTemplate, categoryId: formData.categoryId });
setCustomIcon(null);
};
return (
<ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
{/* NAME */}
<InputGroup>
<label htmlFor="name">Bookmark Name</label>
<input
@ -159,6 +159,7 @@ export const BookmarksForm = ({
/>
</InputGroup>
{/* URL */}
<InputGroup>
<label htmlFor="url">Bookmark URL</label>
<input
@ -172,6 +173,7 @@ export const BookmarksForm = ({
/>
</InputGroup>
{/* CATEGORY */}
<InputGroup>
<label htmlFor="categoryId">Bookmark Category</label>
<select
@ -192,6 +194,7 @@ export const BookmarksForm = ({
</select>
</InputGroup>
{/* ICON */}
{!useCustomIcon ? (
// mdi
<InputGroup>
@ -227,7 +230,7 @@ export const BookmarksForm = ({
name="icon"
id="icon"
onChange={(e) => fileChangeHandler(e)}
accept=".jpg,.jpeg,.png,.svg"
accept=".jpg,.jpeg,.png,.svg,.ico"
/>
<span
onClick={() => {
@ -241,6 +244,7 @@ export const BookmarksForm = ({
</InputGroup>
)}
{/* VISIBILTY */}
<InputGroup>
<label htmlFor="isPublic">Bookmark visibility</label>
<select

2
client/src/components/Bookmarks/Form/CategoryForm.tsx
View file

@ -60,10 +60,10 @@ export const CategoryForm = ({
addCategory(formData);
} else {
updateCategory(category.id, formData);
modalHandler();
}
setFormData(newCategoryTemplate);
modalHandler();
};
return (

22
client/src/components/Bookmarks/Form/Form.tsx
View file

@ -1,22 +1,26 @@
// Typescript
import { Bookmark, Category } from '../../../interfaces';
import { ContentType } from '../Bookmarks';
// Utils
import { CategoryForm } from './CategoryForm';
import { BookmarksForm } from './BookmarksForm';
import { Fragment } from 'react';
import { useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bookmarkTemplate, categoryTemplate } from '../../../utility';
interface Props {
modalHandler: () => void;
contentType: ContentType;
inUpdate?: boolean;
category?: Category;
bookmark?: Bookmark;
}
export const Form = (props: Props): JSX.Element => {
const { modalHandler, contentType, inUpdate, category, bookmark } = props;
const { categoryInEdit, bookmarkInEdit } = useSelector(
(state: State) => state.bookmarks
);
const { modalHandler, contentType, inUpdate } = props;
return (
<Fragment>
@ -33,9 +37,15 @@ export const Form = (props: Props): JSX.Element => {
// form: update
<Fragment>
{contentType === ContentType.category ? (
<CategoryForm modalHandler={modalHandler} category={category} />
<CategoryForm
modalHandler={modalHandler}
category={categoryInEdit || categoryTemplate}
/>
) : (
<BookmarksForm modalHandler={modalHandler} bookmark={bookmark} />
<BookmarksForm
modalHandler={modalHandler}
bookmark={bookmarkInEdit || bookmarkTemplate}
/>
)}
</Fragment>
)}

195
client/src/components/Bookmarks/Table/BookmarksTable.tsx Normal file
View file

@ -0,0 +1,195 @@
import { useState, useEffect, Fragment } from 'react';
import {
DragDropContext,
Droppable,
Draggable,
DropResult,
} from 'react-beautiful-dnd';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { Bookmark, Category } from '../../../interfaces';
// CSS
import classes from './Table.module.css';
// UI
import { Table } from '../../UI';
import { TableActions } from '../../Actions/TableActions';
import { bookmarkTemplate } from '../../../utility';
interface Props {
openFormForUpdating: (data: Category | Bookmark) => void;
}
export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
const {
bookmarks: { categoryInEdit },
config: { config },
} = useSelector((state: State) => state);
const dispatch = useDispatch();
const {
deleteBookmark,
updateBookmark,
createNotification,
reorderBookmarks,
} = bindActionCreators(actionCreators, dispatch);
const [localBookmarks, setLocalBookmarks] = useState<Bookmark[]>([]);
// Copy bookmarks array
useEffect(() => {
if (categoryInEdit) {
setLocalBookmarks([...categoryInEdit.bookmarks]);
}
}, [categoryInEdit]);
// Drag and drop handler
const dragEndHanlder = (result: DropResult): void => {
if (config.useOrdering !== 'orderId') {
createNotification({
title: 'Error',
message: 'Custom order is disabled',
});
return;
}
if (!result.destination) {
return;
}
const tmpBookmarks = [...localBookmarks];
const [movedBookmark] = tmpBookmarks.splice(result.source.index, 1);
tmpBookmarks.splice(result.destination.index, 0, movedBookmark);
setLocalBookmarks(tmpBookmarks);
const categoryId = categoryInEdit?.id || -1;
reorderBookmarks(tmpBookmarks, categoryId);
};
// Action hanlders
const deleteBookmarkHandler = (id: number, name: string) => {
const categoryId = categoryInEdit?.id || -1;
const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
if (proceed) {
deleteBookmark(id, categoryId);
}
};
const updateBookmarkHandler = (id: number) => {
const bookmark =
categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
openFormForUpdating(bookmark);
};
const changeBookmarkVisibiltyHandler = (id: number) => {
const bookmark =
categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
const categoryId = categoryInEdit?.id || -1;
const [prev, curr] = [categoryId, categoryId];
updateBookmark(
id,
{ ...bookmark, isPublic: !bookmark.isPublic },
{ prev, curr }
);
};
return (
<Fragment>
{!categoryInEdit ? (
<div className={classes.Message}>
<p>
Switch to grid view and click on the name of category you want to
edit
</p>
</div>
) : (
<div className={classes.Message}>
<p>
Editing bookmarks from <span>{categoryInEdit.name}</span> category
</p>
</div>
)}
{categoryInEdit && (
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId="bookmarks">
{(provided) => (
<Table
headers={[
'Name',
'URL',
'Icon',
'Visibility',
'Category',
'Actions',
]}
innerRef={provided.innerRef}
>
{localBookmarks.map((bookmark, index): JSX.Element => {
return (
<Draggable
key={bookmark.id}
draggableId={bookmark.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' }}>{bookmark.name}</td>
<td style={{ width: '200px' }}>{bookmark.url}</td>
<td style={{ width: '200px' }}>{bookmark.icon}</td>
<td style={{ width: '200px' }}>
{bookmark.isPublic ? 'Visible' : 'Hidden'}
</td>
<td style={{ width: '200px' }}>
{categoryInEdit.name}
</td>
{!snapshot.isDragging && (
<TableActions
entity={bookmark}
deleteHandler={deleteBookmarkHandler}
updateHandler={updateBookmarkHandler}
changeVisibilty={changeBookmarkVisibiltyHandler}
showPin={false}
/>
)}
</tr>
);
}}
</Draggable>
);
})}
</Table>
)}
</Droppable>
</DragDropContext>
)}
</Fragment>
);
};

169
client/src/components/Bookmarks/Table/CategoryTable.tsx Normal file
View file

@ -0,0 +1,169 @@
import { useState, useEffect, Fragment } from 'react';
import {
DragDropContext,
Droppable,
Draggable,
DropResult,
} from 'react-beautiful-dnd';
import { Link } from 'react-router-dom';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { State } from '../../../store/reducers';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../store';
// Typescript
import { Bookmark, Category } from '../../../interfaces';
// CSS
import classes from './Table.module.css';
// UI
import { Table } from '../../UI';
import { TableActions } from '../../Actions/TableActions';
interface Props {
openFormForUpdating: (data: Category | Bookmark) => void;
}
export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
const {
config: { config },
bookmarks: { categories },
} = useSelector((state: State) => state);
const dispatch = useDispatch();
const {
pinCategory,
deleteCategory,
createNotification,
reorderCategories,
updateCategory,
} = bindActionCreators(actionCreators, dispatch);
const [localCategories, setLocalCategories] = useState<Category[]>([]);
// Copy categories array
useEffect(() => {
setLocalCategories([...categories]);
}, [categories]);
// Drag and drop handler
const dragEndHanlder = (result: DropResult): void => {
if (config.useOrdering !== 'orderId') {
createNotification({
title: 'Error',
message: 'Custom order is disabled',
});
return;
}
if (!result.destination) {
return;
}
const tmpCategories = [...localCategories];
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedCategory);
setLocalCategories(tmpCategories);
reorderCategories(tmpCategories);
};
// Action handlers
const deleteCategoryHandler = (id: number, name: string) => {
const proceed = window.confirm(
`Are you sure you want to delete ${name}? It will delete ALL assigned bookmarks`
);
if (proceed) {
deleteCategory(id);
}
};
const updateCategoryHandler = (id: number) => {
const category = categories.find((c) => c.id === id) as Category;
openFormForUpdating(category);
};
const pinCategoryHandler = (id: number) => {
const category = categories.find((c) => c.id === id) as Category;
pinCategory(category);
};
const changeCategoryVisibiltyHandler = (id: number) => {
const category = categories.find((c) => c.id === id) as Category;
updateCategory(id, { ...category, isPublic: !category.isPublic });
};
return (
<Fragment>
<div className={classes.Message}>
{config.useOrdering === 'orderId' ? (
<p>You can drag and drop single rows to reorder categories</p>
) : (
<p>
Custom order is disabled. You can change it in the{' '}
<Link to="/settings/interface">settings</Link>
</p>
)}
</div>
<DragDropContext onDragEnd={dragEndHanlder}>
<Droppable droppableId="categories">
{(provided) => (
<Table
headers={['Name', 'Visibility', 'Actions']}
innerRef={provided.innerRef}
>
{localCategories.map((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 style={{ width: '300px' }}>{category.name}</td>
<td style={{ width: '300px' }}>
{category.isPublic ? 'Visible' : 'Hidden'}
</td>
{!snapshot.isDragging && (
<TableActions
entity={category}
deleteHandler={deleteCategoryHandler}
updateHandler={updateCategoryHandler}
pinHanlder={pinCategoryHandler}
changeVisibilty={changeCategoryVisibiltyHandler}
/>
)}
</tr>
);
}}
</Draggable>
);
})}
</Table>
)}
</Droppable>
</DragDropContext>
</Fragment>
);
};

18
client/src/components/Bookmarks/BookmarkTable/BookmarkTable.module.css → client/src/components/Bookmarks/Table/Table.module.css
View file

@ -1,16 +1,3 @@
.TableActions {
display: flex;
align-items: center;
}
.TableAction {
width: 22px;
}
.TableAction:hover {
cursor: pointer;
}
.Message {
width: 100%;
display: flex;
@ -20,10 +7,11 @@
margin-bottom: 20px;
}
.Message a {
.Message a,
.Message span {
color: var(--color-accent);
}
.Message a:hover {
cursor: pointer;
}
}

20
client/src/components/Bookmarks/Table/Table.tsx Normal file
View file

@ -0,0 +1,20 @@
import { Category, Bookmark } from '../../../interfaces';
import { ContentType } from '../Bookmarks';
import { BookmarksTable } from './BookmarksTable';
import { CategoryTable } from './CategoryTable';
interface Props {
contentType: ContentType;
openFormForUpdating: (data: Category | Bookmark) => void;
}
export const Table = (props: Props): JSX.Element => {
const tableEl =
props.contentType === ContentType.category ? (
<CategoryTable openFormForUpdating={props.openFormForUpdating} />
) : (
<BookmarksTable openFormForUpdating={props.openFormForUpdating} />
);
return tableEl;
};

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

@ -11,7 +11,7 @@ import { actionCreators } from '../../store';
import { App, Category } from '../../interfaces';
// UI
import { Icon, Container, SectionHeadline, Spinner } from '../UI';
import { Icon, Container, SectionHeadline, Spinner, Message } from '../UI';
// CSS
import classes from './Home.module.css';
@ -30,6 +30,7 @@ export const Home = (): JSX.Element => {
apps: { apps, loading: appsLoading },
bookmarks: { categories, loading: bookmarksLoading },
config: { config },
auth: { isAuthenticated },
} = useSelector((state: State) => state);
const dispatch = useDispatch();
@ -100,7 +101,18 @@ export const Home = (): JSX.Element => {
<Header />
{!config.hideApps ? (
{!isAuthenticated &&
!apps.some((a) => a.isPinned) &&
!categories.some((c) => c.isPinned) ? (
<Message>
Welcome to Flame! Go to <Link to="/settings/app">/settings</Link>,
login and start customizing your new homepage
</Message>
) : (
<></>
)}
{!config.hideApps && (isAuthenticated || apps.some((a) => a.isPinned)) ? (
<Fragment>
<SectionHeadline title="Applications" link="/applications" />
{appsLoading ? (
@ -119,10 +131,11 @@ export const Home = (): JSX.Element => {
<div className={classes.HomeSpace}></div>
</Fragment>
) : (
<div></div>
<></>
)}
{!config.hideCategories ? (
{!config.hideCategories &&
(isAuthenticated || categories.some((c) => c.isPinned)) ? (
<Fragment>
<SectionHeadline title="Bookmarks" link="/bookmarks" />
{bookmarksLoading ? (
@ -138,11 +151,12 @@ export const Home = (): JSX.Element => {
}
totalCategories={categories.length}
searching={!!localSearch}
fromHomepage={true}
/>
)}
</Fragment>
) : (
<div></div>
<></>
)}
<Link to="/settings" className={classes.SettingsButton}>

9
client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx
View file

@ -1,4 +1,4 @@
import { FormEvent, Fragment, useEffect, useState } from 'react';
import { FormEvent, Fragment, useEffect, useState, useRef } from 'react';
// Redux
import { useSelector, useDispatch } from 'react-redux';
@ -23,6 +23,12 @@ export const AuthForm = (): JSX.Element => {
duration: '14d',
});
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
passwordInputRef.current?.focus();
}, []);
useEffect(() => {
if (token) {
const decoded = decodeToken(token);
@ -52,6 +58,7 @@ export const AuthForm = (): JSX.Element => {
name="password"
placeholder="••••••"
autoComplete="current-password"
ref={passwordInputRef}
value={formData.password}
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })

27
client/src/components/Settings/UISettings/UISettings.tsx
View file

@ -16,13 +16,14 @@ import { InputGroup, Button, SettingsHeadline } from '../../UI';
import { otherSettingsTemplate, inputHandler } from '../../../utility';
export const UISettings = (): JSX.Element => {
const { loading, config } = useSelector((state: State) => state.config);
const {
config: { loading, config },
bookmarks: { categories },
} = useSelector((state: State) => state);
const dispatch = useDispatch();
const { updateConfig, sortApps, sortCategories } = bindActionCreators(
actionCreators,
dispatch
);
const { updateConfig, sortApps, sortCategories, sortBookmarks } =
bindActionCreators(actionCreators, dispatch);
// Initial state
const [formData, setFormData] = useState<OtherSettingsForm>(
@ -46,9 +47,15 @@ export const UISettings = (): JSX.Element => {
// Update local page title
document.title = formData.customTitle;
// Sort apps and categories with new settings
sortApps();
sortCategories();
// Sort entities with new settings
if (formData.useOrdering !== config.useOrdering) {
sortApps();
sortCategories();
for (let { id } of categories) {
sortBookmarks(id);
}
}
};
// Input handler
@ -85,7 +92,9 @@ export const UISettings = (): JSX.Element => {
<SettingsHeadline text="Header" />
{/* HIDE HEADER */}
<InputGroup>
<label htmlFor="hideHeader">Hide greetings</label>
<label htmlFor="hideHeader">
Hide headline (greetings and weather)
</label>
<select
id="hideHeader"
name="hideHeader"

8
client/src/components/UI/Text/Message/Message.module.css Normal file
View file

@ -0,0 +1,8 @@
.message {
color: var(--color-primary);
}
.message a {
color: var(--color-accent);
font-weight: 600;
}

11
client/src/components/UI/Text/Message/Message.tsx Normal file
View file

@ -0,0 +1,11 @@
import { ReactNode } from 'react';
import classes from './Message.module.css';
interface Props {
children: ReactNode;
}
export const Message = ({ children }: Props): JSX.Element => {
return <p className={classes.message}>{children}</p>;
};

1
client/src/components/UI/index.ts
View file

@ -12,3 +12,4 @@ export * from './Forms/InputGroup/InputGroup';
export * from './Forms/ModalForm/ModalForm';
export * from './Buttons/ActionButton/ActionButton';
export * from './Buttons/Button/Button';
export * from './Text/Message/Message';

2
client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx
View file

@ -71,7 +71,7 @@ export const WeatherWidget = (): JSX.Element => {
{config.isCelsius ? (
<span>{weather.tempC}°C</span>
) : (
<span>{weather.tempF}°F</span>
<span>{Math.round(weather.tempF)}°F</span>
)}
{/* ADDITIONAL DATA */}

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

@ -8,4 +8,6 @@ export interface NewBookmark {
isPublic: boolean;
}
export interface Bookmark extends Model, NewBookmark {}
export interface Bookmark extends Model, NewBookmark {
orderId: number;
}

9
client/src/store/action-creators/app.ts
View file

@ -7,6 +7,7 @@ import {
GetAppsAction,
PinAppAction,
ReorderAppsAction,
SetEditAppAction,
SortAppsAction,
UpdateAppAction,
} from '../actions/app';
@ -196,3 +197,11 @@ export const sortApps = () => async (dispatch: Dispatch<SortAppsAction>) => {
console.log(err);
}
};
export const setEditApp =
(app: App | null) => (dispatch: Dispatch<SetEditAppAction>) => {
dispatch({
type: ActionType.setEditApp,
payload: app,
});
};

84
client/src/store/action-creators/bookmark.ts
View file

@ -1,5 +1,8 @@
import axios from 'axios';
import { Dispatch } from 'redux';
import { applyAuth } from '../../utility';
import { ActionType } from '../action-types';
import {
ApiResponse,
Bookmark,
@ -8,8 +11,7 @@ import {
NewBookmark,
NewCategory,
} from '../../interfaces';
import { applyAuth } from '../../utility';
import { ActionType } from '../action-types';
import {
AddBookmarkAction,
AddCategoryAction,
@ -17,7 +19,11 @@ import {
DeleteCategoryAction,
GetCategoriesAction,
PinCategoryAction,
ReorderBookmarksAction,
ReorderCategoriesAction,
SetEditBookmarkAction,
SetEditCategoryAction,
SortBookmarksAction,
SortCategoriesAction,
UpdateBookmarkAction,
UpdateCategoryAction,
@ -95,6 +101,8 @@ export const addBookmark =
type: ActionType.addBookmark,
payload: res.data.data,
});
dispatch<any>(sortBookmarks(res.data.data.categoryId));
} catch (err) {
console.log(err);
}
@ -266,6 +274,8 @@ export const updateBookmark =
payload: res.data.data,
});
}
dispatch<any>(sortBookmarks(res.data.data.categoryId));
} catch (err) {
console.log(err);
}
@ -319,3 +329,73 @@ export const reorderCategories =
console.log(err);
}
};
export const setEditCategory =
(category: Category | null) =>
(dispatch: Dispatch<SetEditCategoryAction>) => {
dispatch({
type: ActionType.setEditCategory,
payload: category,
});
};
export const setEditBookmark =
(bookmark: Bookmark | null) =>
(dispatch: Dispatch<SetEditBookmarkAction>) => {
dispatch({
type: ActionType.setEditBookmark,
payload: bookmark,
});
};
export const reorderBookmarks =
(bookmarks: Bookmark[], categoryId: number) =>
async (dispatch: Dispatch<ReorderBookmarksAction>) => {
interface ReorderQuery {
bookmarks: {
id: number;
orderId: number;
}[];
}
try {
const updateQuery: ReorderQuery = { bookmarks: [] };
bookmarks.forEach((bookmark, index) =>
updateQuery.bookmarks.push({
id: bookmark.id,
orderId: index + 1,
})
);
await axios.put<ApiResponse<{}>>(
'/api/bookmarks/0/reorder',
updateQuery,
{ headers: applyAuth() }
);
dispatch({
type: ActionType.reorderBookmarks,
payload: { bookmarks, categoryId },
});
} catch (err) {
console.log(err);
}
};
export const sortBookmarks =
(categoryId: number) => async (dispatch: Dispatch<SortBookmarksAction>) => {
try {
const res = await axios.get<ApiResponse<Config>>('/api/config');
dispatch({
type: ActionType.sortBookmarks,
payload: {
orderType: res.data.data.useOrdering,
categoryId,
},
});
} catch (err) {
console.log(err);
}
};

5
client/src/store/action-types/index.ts
View file

@ -23,6 +23,7 @@ export enum ActionType {
updateApp = 'UPDATE_APP',
reorderApps = 'REORDER_APPS',
sortApps = 'SORT_APPS',
setEditApp = 'SET_EDIT_APP',
// CATEGORES
getCategories = 'GET_CATEGORIES',
getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
@ -33,10 +34,14 @@ export enum ActionType {
updateCategory = 'UPDATE_CATEGORY',
sortCategories = 'SORT_CATEGORIES',
reorderCategories = 'REORDER_CATEGORIES',
setEditCategory = 'SET_EDIT_CATEGORY',
// BOOKMARKS
addBookmark = 'ADD_BOOKMARK',
deleteBookmark = 'DELETE_BOOKMARK',
updateBookmark = 'UPDATE_BOOKMARK',
setEditBookmark = 'SET_EDIT_BOOKMARK',
reorderBookmarks = 'REORDER_BOOKMARKS',
sortBookmarks = 'SORT_BOOKMARKS',
// AUTH
login = 'LOGIN',
logout = 'LOGOUT',

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

@ -36,3 +36,8 @@ export interface SortAppsAction {
type: ActionType.sortApps;
payload: string;
}
export interface SetEditAppAction {
type: ActionType.setEditApp;
payload: App | null;
}

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

@ -56,3 +56,29 @@ export interface ReorderCategoriesAction {
type: ActionType.reorderCategories;
payload: Category[];
}
export interface SetEditCategoryAction {
type: ActionType.setEditCategory;
payload: Category | null;
}
export interface SetEditBookmarkAction {
type: ActionType.setEditBookmark;
payload: Bookmark | null;
}
export interface ReorderBookmarksAction {
type: ActionType.reorderBookmarks;
payload: {
bookmarks: Bookmark[];
categoryId: number;
};
}
export interface SortBookmarksAction {
type: ActionType.sortBookmarks;
payload: {
orderType: string;
categoryId: number;
};
}

10
client/src/store/actions/index.ts
View file

@ -24,6 +24,7 @@ import {
UpdateAppAction,
ReorderAppsAction,
SortAppsAction,
SetEditAppAction,
} from './app';
import {
@ -37,6 +38,10 @@ import {
AddBookmarkAction,
DeleteBookmarkAction,
UpdateBookmarkAction,
SetEditCategoryAction,
SetEditBookmarkAction,
ReorderBookmarksAction,
SortBookmarksAction,
} from './bookmark';
import {
@ -67,6 +72,7 @@ export type Action =
| UpdateAppAction
| ReorderAppsAction
| SortAppsAction
| SetEditAppAction
// Categories
| GetCategoriesAction<any>
| AddCategoryAction
@ -75,10 +81,14 @@ export type Action =
| UpdateCategoryAction
| SortCategoriesAction
| ReorderCategoriesAction
| SetEditCategoryAction
// Bookmarks
| AddBookmarkAction
| DeleteBookmarkAction
| UpdateBookmarkAction
| SetEditBookmarkAction
| ReorderBookmarksAction
| SortBookmarksAction
// Auth
| LoginAction
| LogoutAction

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

@ -7,12 +7,14 @@ interface AppsState {
loading: boolean;
apps: App[];
errors: string | undefined;
appInUpdate: App | null;
}
const initialState: AppsState = {
loading: true,
apps: [],
errors: undefined,
appInUpdate: null,
};
export const appsReducer = (
@ -20,71 +22,86 @@ export const appsReducer = (
action: Action
): AppsState => {
switch (action.type) {
case ActionType.getApps:
case ActionType.getApps: {
return {
...state,
loading: true,
errors: undefined,
};
}
case ActionType.getAppsSuccess:
case ActionType.getAppsSuccess: {
return {
...state,
loading: false,
apps: action.payload || [],
};
}
case ActionType.pinApp:
const pinnedAppIdx = state.apps.findIndex(
case ActionType.pinApp: {
const appIdx = state.apps.findIndex(
(app) => app.id === action.payload.id
);
return {
...state,
apps: [
...state.apps.slice(0, pinnedAppIdx),
...state.apps.slice(0, appIdx),
action.payload,
...state.apps.slice(pinnedAppIdx + 1),
...state.apps.slice(appIdx + 1),
],
};
}
case ActionType.addAppSuccess:
case ActionType.addAppSuccess: {
return {
...state,
apps: [...state.apps, action.payload],
};
}
case ActionType.deleteApp:
case ActionType.deleteApp: {
return {
...state,
apps: [...state.apps].filter((app) => app.id !== action.payload),
};
}
case ActionType.updateApp:
const updatedAppIdx = state.apps.findIndex(
case ActionType.updateApp: {
const appIdx = state.apps.findIndex(
(app) => app.id === action.payload.id
);
return {
...state,
apps: [
...state.apps.slice(0, updatedAppIdx),
...state.apps.slice(0, appIdx),
action.payload,
...state.apps.slice(updatedAppIdx + 1),
...state.apps.slice(appIdx + 1),
],
};
}
case ActionType.reorderApps:
case ActionType.reorderApps: {
return {
...state,
apps: action.payload,
};
}
case ActionType.sortApps:
case ActionType.sortApps: {
return {
...state,
apps: sortData<App>(state.apps, action.payload),
};
}
case ActionType.setEditApp: {
return {
...state,
appInUpdate: action.payload,
};
}
default:
return state;

4
client/src/store/reducers/auth.ts
View file

@ -22,24 +22,28 @@ export const authReducer = (
token: action.payload,
isAuthenticated: true,
};
case ActionType.logout:
return {
...state,
token: null,
isAuthenticated: false,
};
case ActionType.autoLogin:
return {
...state,
token: action.payload,
isAuthenticated: true,
};
case ActionType.authError:
return {
...state,
token: null,
isAuthenticated: false,
};
default:
return state;
}

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

@ -1,4 +1,4 @@
import { Category } from '../../interfaces';
import { Bookmark, Category } from '../../interfaces';
import { sortData } from '../../utility';
import { ActionType } from '../action-types';
import { Action } from '../actions';
@ -7,12 +7,16 @@ interface BookmarksState {
loading: boolean;
errors: string | undefined;
categories: Category[];
categoryInEdit: Category | null;
bookmarkInEdit: Bookmark | null;
}
const initialState: BookmarksState = {
loading: true,
errors: undefined,
categories: [],
categoryInEdit: null,
bookmarkInEdit: null,
};
export const bookmarksReducer = (
@ -20,27 +24,181 @@ export const bookmarksReducer = (
action: Action
): BookmarksState => {
switch (action.type) {
case ActionType.getCategories:
case ActionType.getCategories: {
return {
...state,
loading: true,
errors: undefined,
};
}
case ActionType.getCategoriesSuccess:
case ActionType.getCategoriesSuccess: {
return {
...state,
loading: false,
categories: action.payload,
};
}
case ActionType.addCategory:
case ActionType.addCategory: {
return {
...state,
categories: [...state.categories, { ...action.payload, bookmarks: [] }],
};
}
case ActionType.addBookmark:
case ActionType.addBookmark: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
const targetCategory = {
...state.categories[categoryIdx],
bookmarks: [...state.categories[categoryIdx].bookmarks, action.payload],
};
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
targetCategory,
...state.categories.slice(categoryIdx + 1),
],
categoryInEdit: targetCategory,
};
}
case ActionType.pinCategory: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
{
...action.payload,
bookmarks: [...state.categories[categoryIdx].bookmarks],
},
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.deleteCategory: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.updateCategory: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
{
...action.payload,
bookmarks: [...state.categories[categoryIdx].bookmarks],
},
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.deleteBookmark: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
const targetCategory = {
...state.categories[categoryIdx],
bookmarks: state.categories[categoryIdx].bookmarks.filter(
(bookmark) => bookmark.id !== action.payload.bookmarkId
),
};
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
targetCategory,
...state.categories.slice(categoryIdx + 1),
],
categoryInEdit: targetCategory,
};
}
case ActionType.updateBookmark: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
const bookmarkIdx = state.categories[categoryIdx].bookmarks.findIndex(
(bookmark) => bookmark.id === action.payload.id
);
const targetCategory = {
...state.categories[categoryIdx],
bookmarks: [
...state.categories[categoryIdx].bookmarks.slice(0, bookmarkIdx),
action.payload,
...state.categories[categoryIdx].bookmarks.slice(bookmarkIdx + 1),
],
};
return {
...state,
categories: [
...state.categories.slice(0, categoryIdx),
targetCategory,
...state.categories.slice(categoryIdx + 1),
],
categoryInEdit: targetCategory,
};
}
case ActionType.sortCategories: {
return {
...state,
categories: sortData<Category>(state.categories, action.payload),
};
}
case ActionType.reorderCategories: {
return {
...state,
categories: action.payload,
};
}
case ActionType.setEditCategory: {
return {
...state,
categoryInEdit: action.payload,
};
}
case ActionType.setEditBookmark: {
return {
...state,
bookmarkInEdit: action.payload,
};
}
case ActionType.reorderBookmarks: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
@ -51,121 +209,36 @@ export const bookmarksReducer = (
...state.categories.slice(0, categoryIdx),
{
...state.categories[categoryIdx],
bookmarks: [
...state.categories[categoryIdx].bookmarks,
action.payload,
],
bookmarks: action.payload.bookmarks,
},
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.pinCategory:
const pinnedCategoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, pinnedCategoryIdx),
{
...action.payload,
bookmarks: [...state.categories[pinnedCategoryIdx].bookmarks],
},
...state.categories.slice(pinnedCategoryIdx + 1),
],
};
case ActionType.deleteCategory:
const deletedCategoryIdx = state.categories.findIndex(
(category) => category.id === action.payload
);
return {
...state,
categories: [
...state.categories.slice(0, deletedCategoryIdx),
...state.categories.slice(deletedCategoryIdx + 1),
],
};
case ActionType.updateCategory:
const updatedCategoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, updatedCategoryIdx),
{
...action.payload,
bookmarks: [...state.categories[updatedCategoryIdx].bookmarks],
},
...state.categories.slice(updatedCategoryIdx + 1),
],
};
case ActionType.deleteBookmark:
const categoryInUpdateIdx = state.categories.findIndex(
case ActionType.sortBookmarks: {
const categoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
);
return {
...state,
categories: [
...state.categories.slice(0, categoryInUpdateIdx),
{
...state.categories[categoryInUpdateIdx],
bookmarks: state.categories[categoryInUpdateIdx].bookmarks.filter(
(bookmark) => bookmark.id !== action.payload.bookmarkId
),
},
...state.categories.slice(categoryInUpdateIdx + 1),
],
};
case ActionType.updateBookmark:
const parentCategoryIdx = state.categories.findIndex(
(category) => category.id === action.payload.categoryId
const sortedBookmarks = sortData<Bookmark>(
state.categories[categoryIdx].bookmarks,
action.payload.orderType
);
const updatedBookmarkIdx = state.categories[
parentCategoryIdx
].bookmarks.findIndex((bookmark) => bookmark.id === action.payload.id);
return {
...state,
categories: [
...state.categories.slice(0, parentCategoryIdx),
...state.categories.slice(0, categoryIdx),
{
...state.categories[parentCategoryIdx],
bookmarks: [
...state.categories[parentCategoryIdx].bookmarks.slice(
0,
updatedBookmarkIdx
),
action.payload,
...state.categories[parentCategoryIdx].bookmarks.slice(
updatedBookmarkIdx + 1
),
],
...state.categories[categoryIdx],
bookmarks: sortedBookmarks,
},
...state.categories.slice(parentCategoryIdx + 1),
...state.categories.slice(categoryIdx + 1),
],
};
}
case ActionType.sortCategories:
return {
...state,
categories: sortData<Category>(state.categories, action.payload),
};
case ActionType.reorderCategories:
return {
...state,
categories: action.payload,
};
default:
return state;
}

5
client/src/store/reducers/config.ts
View file

@ -26,26 +26,31 @@ export const configReducer = (
loading: false,
config: action.payload,
};
case ActionType.updateConfig:
return {
...state,
config: action.payload,
};
case ActionType.fetchQueries:
return {
...state,
customQueries: action.payload,
};
case ActionType.addQuery:
return {
...state,
customQueries: [...state.customQueries, action.payload],
};
case ActionType.deleteQuery:
return {
...state,
customQueries: action.payload,
};
case ActionType.updateQuery:
return {
...state,

1
client/src/store/reducers/notification.ts
View file

@ -29,6 +29,7 @@ export const notificationReducer = (
],
idCounter: state.idCounter + 1,
};
case ActionType.clearNotification:
return {
...state,

1
client/src/store/reducers/theme.ts
View file

@ -24,6 +24,7 @@ export const themeReducer = (
switch (action.type) {
case ActionType.setTheme:
return { theme: action.payload };
default:
return state;
}

1
client/src/utility/templateObjects/bookmarkTemplate.ts
View file

@ -13,4 +13,5 @@ export const bookmarkTemplate: Bookmark = {
id: -1,
createdAt: new Date(),
updatedAt: new Date(),
orderId: 0,
};

2
client/src/utility/validators.ts
View file

@ -13,7 +13,7 @@ export const isUrl = (data: string): boolean => {
};
export const isImage = (data: string): boolean => {
const regex = /.(jpeg|jpg|png)$/i;
const regex = /.(jpeg|jpg|png|ico)$/i;
return regex.test(data);
};

20
controllers/apps/getAllApps.js
View file

@ -28,17 +28,15 @@ const getAllApps = asyncWrapper(async (req, res, next) => {
// apps visibility
const where = req.isAuthenticated ? {} : { isPublic: true };
if (orderType == 'name') {
apps = await App.findAll({
order: [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']],
where,
});
} else {
apps = await App.findAll({
order: [[orderType, 'ASC']],
where,
});
}
const order =
orderType == 'name'
? [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']]
: [[orderType, 'ASC']];
apps = await App.findAll({
order,
where,
});
if (process.env.NODE_ENV === 'production') {
// Set header to fetch containers info every time

10
controllers/bookmarks/getAllBookmarks.js
View file

@ -1,16 +1,24 @@
const asyncWrapper = require('../../middleware/asyncWrapper');
const Bookmark = require('../../models/Bookmark');
const { Sequelize } = require('sequelize');
const loadConfig = require('../../utils/loadConfig');
// @desc Get all bookmarks
// @route GET /api/bookmarks
// @access Public
const getAllBookmarks = asyncWrapper(async (req, res, next) => {
const { useOrdering: orderType } = await loadConfig();
// bookmarks visibility
const where = req.isAuthenticated ? {} : { isPublic: true };
const order =
orderType == 'name'
? [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']]
: [[orderType, 'ASC']];
const bookmarks = await Bookmark.findAll({
order: [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']],
order,
where,
});

1
controllers/bookmarks/index.js
View file

@ -4,4 +4,5 @@ module.exports = {
getSingleBookmark: require('./getSingleBookmark'),
updateBookmark: require('./updateBookmark'),
deleteBookmark: require('./deleteBookmark'),
reorderBookmarks: require('./reorderBookmarks'),
};

23
controllers/bookmarks/reorderBookmarks.js Normal file
View file

@ -0,0 +1,23 @@
const asyncWrapper = require('../../middleware/asyncWrapper');
const Bookmark = require('../../models/Bookmark');
// @desc Reorder bookmarks
// @route PUT /api/bookmarks/0/reorder
// @access Public
const reorderBookmarks = asyncWrapper(async (req, res, next) => {
req.body.bookmarks.forEach(async ({ id, orderId }) => {
await Bookmark.update(
{ orderId },
{
where: { id },
}
);
});
res.status(200).json({
success: true,
data: {},
});
});
module.exports = reorderBookmarks;

44
controllers/categories/getAllCategories.js
View file

@ -16,29 +16,27 @@ const getAllCategories = asyncWrapper(async (req, res, next) => {
// categories visibility
const where = req.isAuthenticated ? {} : { isPublic: true };
if (orderType == 'name') {
categories = await Category.findAll({
include: [
{
model: Bookmark,
as: 'bookmarks',
},
],
order: [[Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC']],
where,
});
} else {
categories = await Category.findAll({
include: [
{
model: Bookmark,
as: 'bookmarks',
},
],
order: [[orderType, 'ASC']],
where,
});
}
const order =
orderType == 'name'
? [
[Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC'],
[Sequelize.fn('lower', Sequelize.col('bookmarks.name')), 'ASC'],
]
: [
[orderType, 'ASC'],
[{ model: Bookmark, as: 'bookmarks' }, orderType, 'ASC'],
];
categories = categories = await Category.findAll({
include: [
{
model: Bookmark,
as: 'bookmarks',
},
],
order,
where,
});
if (req.isAuthenticated) {
output = categories;

10
controllers/categories/getSingleCategory.js
View file

@ -2,13 +2,22 @@ const asyncWrapper = require('../../middleware/asyncWrapper');
const ErrorResponse = require('../../utils/ErrorResponse');
const Category = require('../../models/Category');
const Bookmark = require('../../models/Bookmark');
const { Sequelize } = require('sequelize');
const loadConfig = require('../../utils/loadConfig');
// @desc Get single category
// @route GET /api/categories/:id
// @access Public
const getSingleCategory = asyncWrapper(async (req, res, next) => {
const { useOrdering: orderType } = await loadConfig();
const visibility = req.isAuthenticated ? {} : { isPublic: true };
const order =
orderType == 'name'
? [[Sequelize.fn('lower', Sequelize.col('bookmarks.name')), 'ASC']]
: [[{ model: Bookmark, as: 'bookmarks' }, orderType, 'ASC']];
const category = await Category.findOne({
where: { id: req.params.id, ...visibility },
include: [
@ -18,6 +27,7 @@ const getSingleCategory = asyncWrapper(async (req, res, next) => {
where: visibility,
},
],
order,
});
if (!category) {

1
controllers/categories/reorderCategories.js
View file

@ -1,5 +1,6 @@
const asyncWrapper = require('../../middleware/asyncWrapper');
const Category = require('../../models/Category');
// @desc Reorder categories
// @route PUT /api/categories/0/reorder
// @access Public

19
db/migrations/04_bookmarks-order.js Normal file
View file

@ -0,0 +1,19 @@
const { DataTypes } = require('sequelize');
const { INTEGER } = DataTypes;
const up = async (query) => {
await query.addColumn('bookmarks', 'orderId', {
type: INTEGER,
allowNull: true,
defaultValue: null,
});
};
const down = async (query) => {
await query.removeColumn('bookmarks', 'orderId');
};
module.exports = {
up,
down,
};

2
middleware/multer.js
View file

@ -14,7 +14,7 @@ const storage = multer.diskStorage({
},
});
const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];
const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml', 'x-icon'];
const fileFilter = (req, file, cb) => {
if (supportedTypes.includes(file.mimetype.split('/')[1])) {

5
models/Bookmark.js
View file

@ -25,6 +25,11 @@ const Bookmark = sequelize.define(
allowNull: true,
defaultValue: 1,
},
orderId: {
type: DataTypes.INTEGER,
allowNull: true,
defaultValue: null,
},
},
{
tableName: 'bookmarks',

3
routes/bookmark.js
View file

@ -10,6 +10,7 @@ const {
getSingleBookmark,
updateBookmark,
deleteBookmark,
reorderBookmarks,
} = require('../controllers/bookmarks');
router
@ -23,4 +24,6 @@ router
.put(auth, requireAuth, upload, updateBookmark)
.delete(auth, requireAuth, deleteBookmark);
router.route('/0/reorder').put(auth, requireAuth, reorderBookmarks);
module.exports = router;