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

add bookmark sorting (#3)

Browse source
This commit is contained in:
François Darveau 2021-06-26 16:22:54 -04:00 • committed by François Darveau
parent 31cf2bc5ad
commit 2c659d1e51
21 changed files with 1021 additions and 437 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import classes from './AppGrid.module.css';
interface ComponentProps {
categories: Category[];
apps: App[]
apps: App[];
totalCategories?: number;
searching: boolean;
}

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

@ -29,7 +29,7 @@ interface ComponentProps {
reorderAppCategories: (categories: Category[]) => void;
updateHandler: (data: Category | App) => void;
pinApp: (app: App) => void;
deleteApp: (id: number) => void;
deleteApp: (id: number, categoryId: number) => void;
reorderApps: (apps: App[]) => void;
updateConfig: (formData: any) => void;
createNotification: (notification: NewNotification) => void;
@ -75,7 +75,7 @@ const AppTable = (props: ComponentProps): JSX.Element => {
);
if (proceed) {
props.deleteApp(app.id);
props.deleteApp(app.id, app.categoryId);
}
};

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

@ -25,23 +25,18 @@ interface ComponentProps {
export enum ContentType {
category,
app
app,
}
const Apps = (props: ComponentProps): JSX.Element => {
const {
apps,
getApps,
getAppCategories,
categories,
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 [tableContentType, setTableContentType] = useState(
ContentType.category
);
const [isInUpdate, setIsInUpdate] = useState(false);
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
name: "",
@ -49,10 +44,11 @@ const Apps = (props: ComponentProps): JSX.Element => {
isPinned: false,
orderId: 0,
type: "apps",
apps: [],
bookmarks: [],
createdAt: new Date(),
updatedAt: new Date()
})
updatedAt: new Date(),
});
const [appInUpdate, setAppInUpdate] = useState<App>({
name: "string",
url: "string",
@ -75,18 +71,17 @@ const Apps = (props: ComponentProps): JSX.Element => {
if (categories.length === 0) {
getAppCategories();
}
}, [getAppCategories])
}, [getAppCategories]);
const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen);
// setIsInUpdate(false);
}
};
const addActionHandler = (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
@ -96,11 +91,11 @@ const Apps = (props: ComponentProps): JSX.Element => {
setIsInEdit(true);
setTableContentType(contentType);
}
}
};
const instanceOfCategory = (object: any): object is Category => {
return "apps" in object;
}
};
const goToUpdateMode = (data: Category | App): void => {
setIsInUpdate(true);
@ -112,7 +107,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
setAppInUpdate(data);
}
toggleModal();
}
};
return (
<Container>
@ -157,7 +152,7 @@ const mapStateToProps = (state: GlobalState) => {
loading: state.app.loading,
categories: state.app.categories,
apps: state.app.apps,
}
}
};
};
export default connect(mapStateToProps, { getApps, getAppCategories })(Apps);

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

@ -1,12 +1,14 @@
import { Bookmark, Category } from '../../../interfaces';
import classes from './BookmarkCard.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
import { iconParser, urlParser, searchConfig } from '../../../utility';
import { Fragment } from 'react';
import { Bookmark, Category } from '../../../interfaces';
import { iconParser, searchConfig, urlParser } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon';
import classes from './BookmarkCard.module.css';
interface ComponentProps {
category: Category;
bookmarks: Bookmark[]
pinHandler?: Function;
}
const BookmarkCard = (props: ComponentProps): JSX.Element => {
@ -14,7 +16,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
<div className={classes.BookmarkCard}>
<h3>{props.category.name}</h3>
<div className={classes.Bookmarks}>
{props.category.bookmarks.map((bookmark: Bookmark) => {
{props.bookmarks.map((bookmark: Bookmark) => {
const redirectUrl = urlParser(bookmark.url)[1];
let iconEl: JSX.Element = <Fragment></Fragment>;

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

@ -1,11 +1,12 @@
import { Link } from 'react-router-dom';
import { Category } from '../../../interfaces';
import { Bookmark, Category } from '../../../interfaces';
import BookmarkCard from '../BookmarkCard/BookmarkCard';
import classes from './BookmarkGrid.module.css';
interface ComponentProps {
categories: Category[];
bookmarks: Bookmark[];
totalCategories?: number;
searching: boolean;
}
@ -25,7 +26,7 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
<div className={classes.BookmarkGrid}>
{props.categories.map(
(category: Category): JSX.Element => (
<BookmarkCard category={category} key={category.id} />
<BookmarkCard key={category.id} category={category} bookmarks={props.bookmarks.filter( (bookmark: Bookmark) => bookmark.categoryId === category.id)} />
)
)}
</div>

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

@ -8,8 +8,11 @@ import {
createNotification,
deleteBookmark,
deleteBookmarkCategory,
pinBookmark,
pinBookmarkCategory,
reorderBookmarkCategories,
reorderBookmarks,
updateConfig,
} from '../../../store/actions';
import { searchConfig } from '../../../utility';
import Icon from '../../UI/Icons/Icon/Icon';
@ -20,16 +23,21 @@ import classes from './BookmarkTable.module.css';
interface ComponentProps {
contentType: ContentType;
categories: Category[];
bookmarks: Bookmark[];
pinBookmarkCategory: (category: Category) => void;
deleteBookmarkCategory: (id: number) => void;
updateHandler: (data: Category | Bookmark) => void;
deleteBookmark: (bookmarkId: number, categoryId: number) => void;
createNotification: (notification: NewNotification) => void;
reorderBookmarkCategories: (categories: Category[]) => void;
updateHandler: (data: Category | Bookmark) => void;
pinBookmark: (bookmark: Bookmark) => void;
deleteBookmark: (id: number, categoryId: number) => void;
reorderBookmarks: (bookmarks: Bookmark[]) => void;
updateConfig: (formData: any) => void;
createNotification: (notification: NewNotification) => void;
}
const BookmarkTable = (props: ComponentProps): JSX.Element => {
const [localCategories, setLocalCategories] = useState<Category[]>([]);
const [localBookmarks, setLocalBookmarks] = useState<Bookmark[]>([]);
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
// Copy categories array
@ -37,6 +45,11 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
setLocalCategories([...props.categories]);
}, [props.categories]);
// Copy bookmarks array
useEffect(() => {
setLocalBookmarks([...props.bookmarks]);
}, [props.bookmarks]);
// Check ordering
useEffect(() => {
const order = searchConfig("useOrdering", "");
@ -66,13 +79,14 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
}
};
// Support keyboard navigation for actions
const keyboardActionHandler = (
e: KeyboardEvent,
category: Category,
object: any,
handler: Function
) => {
if (e.key === "Enter") {
handler(category);
handler(object);
}
};
@ -89,12 +103,21 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
return;
}
if (props.contentType === ContentType.bookmark) {
const tmpBookmarks = [...localBookmarks];
const [movedBookmark] = tmpBookmarks.splice(result.source.index, 1);
tmpBookmarks.splice(result.destination.index, 0, movedBookmark);
setLocalBookmarks(tmpBookmarks);
props.reorderBookmarks(tmpBookmarks);
} else if (props.contentType === ContentType.category) {
const tmpCategories = [...localCategories];
const [movedCategory] = tmpCategories.splice(result.source.index, 1);
tmpCategories.splice(result.destination.index, 0, movedCategory);
setLocalCategories(tmpCategories);
props.reorderBookmarkCategories(tmpCategories);
}
};
if (props.contentType === ContentType.category) {
@ -168,7 +191,9 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
</div>
<div
className={classes.TableAction}
onClick={() => props.pinBookmarkCategory(category)}
onClick={() =>
props.pinBookmarkCategory(category)
}
onKeyDown={(e) =>
keyboardActionHandler(
e,
@ -203,47 +228,132 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
</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 (
<Fragment>
<div className={classes.Message}>
{isCustomOrder ? (
<p>You can drag and drop single rows to reorder bookmarklication</p>
) : (
<p>
Custom order is disabled. You can change it in{" "}
<Link to="/settings/other">settings</Link>
</p>
)}
</div>
<DragDropContext onDragEnd={dragEndHandler}>
<Droppable droppableId="bookmarks">
{(provided) => (
<Table
headers={["Name", "URL", "Icon", "Category", "Actions"]}
innerRef={provided.innerRef}
>
{localBookmarks.map(
(bookmark: 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,
};
const category = localCategories.find(
(category: Category) =>
category.id === bookmark.categoryId
);
const 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>
<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" }}>{categoryName}</td>
{!snapshot.isDragging && (
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
onClick={() =>
deleteBookmarkHandler(bookmark)
}
onKeyDown={(e) =>
keyboardActionHandler(
e,
bookmark,
deleteBookmarkHandler
)
}
tabIndex={0}
>
<Icon icon="mdiDelete" />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateHandler(bookmark.bookmark)}
onClick={() =>
props.updateHandler(bookmark)
}
onKeyDown={(e) =>
keyboardActionHandler(
e,
bookmark,
props.updateHandler
)
}
tabIndex={0}
>
<Icon icon="mdiPencil" />
</div>
<div
className={classes.TableAction}
onClick={() => props.pinBookmark(bookmark)}
onKeyDown={(e) =>
keyboardActionHandler(
e,
bookmark,
props.pinBookmark
)
}
tabIndex={0}
>
{bookmark.isPinned ? (
<Icon
icon="mdiPinOff"
color="var(--color-accent)"
/>
) : (
<Icon icon="mdiPin" />
)}
</div>
</td>
)}
</tr>
);
}}
</Draggable>
);
}
)}
</Table>
)}
</Droppable>
</DragDropContext>
</Fragment>
);
}
};
@ -251,9 +361,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
const actions = {
pinBookmarkCategory,
deleteBookmarkCategory,
deleteBookmark,
createNotification,
reorderBookmarkCategories,
pinBookmark,
deleteBookmark,
reorderBookmarks,
updateConfig,
createNotification,
};
export default connect(null, actions)(BookmarkTable);

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

@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Bookmark, Category, GlobalState } from '../../interfaces';
import { getBookmarkCategories } from '../../store/actions';
import { getBookmarkCategories, getBookmarks } from '../../store/actions';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
import Headline from '../UI/Headlines/Headline/Headline';
import { Container } from '../UI/Layout/Layout';
@ -18,6 +18,8 @@ interface ComponentProps {
loading: boolean;
categories: Category[];
getBookmarkCategories: () => void;
bookmarks: Bookmark[];
getBookmarks: () => void;
searching: boolean;
}
@ -27,7 +29,7 @@ export enum ContentType {
}
const Bookmarks = (props: ComponentProps): JSX.Element => {
const { getBookmarkCategories, categories, loading, searching = false } = props;
const { bookmarks, getBookmarks, getBookmarkCategories, categories, loading, searching = false } = props;
const [modalIsOpen, setModalIsOpen] = useState(false);
const [formContentType, setFormContentType] = useState(ContentType.category);
@ -37,25 +39,34 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
);
const [isInUpdate, setIsInUpdate] = useState(false);
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
name: '',
name: "",
id: -1,
isPinned: false,
orderId: 0,
type: 'bookmarks',
type: "bookmarks",
apps: [],
bookmarks: [],
createdAt: new Date(),
updatedAt: new Date(),
});
const [bookmarkInUpdate, setBookmarkInUpdate] = useState<Bookmark>({
name: '',
url: '',
name: "",
url: "",
categoryId: -1,
icon: '',
id: -1,
icon: "",
isPinned: false,
orderId: 0,
id: 0,
createdAt: new Date(),
updatedAt: new Date(),
});
useEffect(() => {
if (bookmarks.length === 0) {
getBookmarks();
}
}, [getBookmarks]);
useEffect(() => {
if (categories.length === 0) {
getBookmarkCategories();
@ -83,7 +94,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
};
const instanceOfCategory = (object: any): object is Category => {
return 'bookmarks' in object;
return "bookmarks" in object;
};
const goToUpdateMode = (data: Category | Bookmark): void => {
@ -149,11 +160,12 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
{loading ? (
<Spinner />
) : !isInEdit ? (
<BookmarkGrid categories={categories} searching />
<BookmarkGrid categories={categories} bookmarks={bookmarks} searching />
) : (
<BookmarkTable
contentType={tableContentType}
categories={categories}
bookmarks={bookmarks}
updateHandler={goToUpdateMode}
/>
)}
@ -168,4 +180,4 @@ const mapStateToProps = (state: GlobalState) => {
};
};
export default connect(mapStateToProps, { getBookmarkCategories })(Bookmarks);
export default connect(mapStateToProps, { getBookmarks, getBookmarkCategories })(Bookmarks);

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

@ -2,9 +2,8 @@ import { Fragment, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { App, Bookmark, Category } from '../../interfaces';
import { GlobalState } from '../../interfaces/GlobalState';
import { getAppCategories, getApps, getBookmarkCategories } from '../../store/actions';
import { App, Bookmark, Category, GlobalState } from '../../interfaces';
import { getAppCategories, getApps, getBookmarkCategories, getBookmarks } from '../../store/actions';
import { searchConfig } from '../../utility';
import AppGrid from '../Apps/AppGrid/AppGrid';
import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
@ -21,12 +20,14 @@ import classes from './Home.module.css';
interface ComponentProps {
getApps: () => void;
getAppCategories: () => void;
getBookmarks: () => void;
getBookmarkCategories: () => void;
appsLoading: boolean;
bookmarkCategoriesLoading: boolean;
appCategories: Category[];
apps: App[];
bookmarkCategories: Category[];
bookmarks: Bookmark[];
}
const Home = (props: ComponentProps): JSX.Element => {
@ -34,9 +35,11 @@ const Home = (props: ComponentProps): JSX.Element => {
getAppCategories,
getApps,
getBookmarkCategories,
getBookmarks,
appCategories,
apps,
bookmarkCategories,
bookmarks,
appsLoading,
bookmarkCategoriesLoading,
} = props;
@ -70,12 +73,19 @@ const Home = (props: ComponentProps): JSX.Element => {
}
}, [getBookmarkCategories]);
// Load bookmarks
useEffect(() => {
if (bookmarks.length === 0) {
getBookmarks();
}
}, [getBookmarks]);
// Refresh greeter and time
useEffect(() => {
let interval: any;
// Start interval only when hideHeader is false
if (searchConfig('hideHeader', 0) !== 1) {
if (searchConfig("hideHeader", 0) !== 1) {
interval = setInterval(() => {
setHeader({
dateTime: dateTime(),
@ -87,12 +97,16 @@ const Home = (props: ComponentProps): JSX.Element => {
return () => clearInterval(interval);
}, []);
// Search bookmarks
const searchBookmarks = (query: string, categoriesToSearch: Category[]): Category[] => {
// Search categories
const searchInCategories = (query: string, categoriesToSearch: Category[]): Category[] => {
const category: Category = {
name: "Search Results",
type: categoriesToSearch[0].type,
isPinned: true,
apps: categoriesToSearch
.map((c: Category) => c.apps)
.flat()
.filter((app: App) => new RegExp(query, 'i').test(app.name)),
bookmarks: categoriesToSearch
.map((c: Category) => c.bookmarks)
.flat()
@ -136,7 +150,11 @@ const Home = (props: ComponentProps): JSX.Element => {
<Spinner />
) : (
<AppGrid
categories={appCategories.filter((category: Category) => category.isPinned)}
categories={
!localSearch
? appCategories.filter((category: Category) => category.isPinned)
: searchInCategories(localSearch, appCategories)
}
apps={
!localSearch
? apps.filter((app: App) => app.isPinned)
@ -154,7 +172,7 @@ const Home = (props: ComponentProps): JSX.Element => {
<div></div>
)}
{searchConfig('hideCategories', 0) !== 1 ? (
{searchConfig('hideBookmarks', 0) !== 1 ? (
<Fragment>
<SectionHeadline title="Bookmarks" link="/bookmarks" />
{bookmarkCategoriesLoading ? (
@ -164,7 +182,14 @@ const Home = (props: ComponentProps): JSX.Element => {
categories={
!localSearch
? bookmarkCategories.filter((category: Category) => category.isPinned)
: searchBookmarks(localSearch, bookmarkCategories)
: searchInCategories(localSearch, bookmarkCategories)
}
bookmarks={
!localSearch
? bookmarks.filter((bookmark: Bookmark) => bookmark.isPinned)
: bookmarks.filter((bookmark: Bookmark) =>
new RegExp(localSearch, 'i').test(bookmark.name)
)
}
totalCategories={bookmarkCategories.length}
searching={!!localSearch}
@ -189,7 +214,8 @@ const mapStateToProps = (state: GlobalState) => {
apps: state.app.apps,
bookmarkCategoriesLoading: state.bookmark.loading,
bookmarkCategories: state.bookmark.categories,
bookmarks: state.bookmark.bookmarks,
}
}
export default connect(mapStateToProps, { getApps, getAppCategories, getBookmarkCategories })(Home);
export default connect(mapStateToProps, { getApps, getAppCategories, getBookmarks, getBookmarkCategories })(Home);

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

@ -28,10 +28,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
const [formData, setFormData] = useState<SettingsForm>({
customTitle: document.title,
pinAppsByDefault: 1,
pinBookmarksByDefault: 1,
pinCategoriesByDefault: 1,
hideHeader: 0,
hideApps: 0,
hideCategories: 0,
hideBookmarks: 0,
useOrdering: 'createdAt',
appsSameTab: 0,
bookmarksSameTab: 0,
@ -46,10 +47,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
setFormData({
customTitle: searchConfig('customTitle', 'Flame'),
pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
pinBookmarksByDefault: searchConfig('pinBookmarksByDefault', 1),
pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
hideHeader: searchConfig('hideHeader', 0),
hideApps: searchConfig('hideApps', 0),
hideCategories: searchConfig('hideCategories', 0),
hideBookmarks: searchConfig('hideBookmarks', 0),
useOrdering: searchConfig('useOrdering', 'createdAt'),
appsSameTab: searchConfig('appsSameTab', 0),
bookmarksSameTab: searchConfig('bookmarksSameTab', 0),
@ -125,6 +127,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
<option value={0}>False</option>
</select>
</InputGroup>
<InputGroup>
<label htmlFor="pinBookmarksByDefault">Pin new bookmarks by default</label>
<select
id="pinBookmarksByDefault"
name="pinBookmarksByDefault"
value={formData.pinBookmarksByDefault}
onChange={(e) => inputChangeHandler(e, true)}
>
<option value={1}>True</option>
<option value={0}>False</option>
</select>
</InputGroup>
<InputGroup>
<label htmlFor="pinCategoriesByDefault">
Pin new categories by default
@ -204,11 +218,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
</select>
</InputGroup>
<InputGroup>
<label htmlFor="hideCategories">Hide categories</label>
<label htmlFor="hideBookmarks">Hide bookmarks</label>
<select
id="hideCategories"
name="hideCategories"
value={formData.hideCategories}
id="hideBookmarks"
name="hideBookmarks"
value={formData.hideBookmarks}
onChange={(e) => inputChangeHandler(e, true)}
>
<option value={1}>True</option>

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

@ -5,6 +5,8 @@ export interface Bookmark extends Model {
url: string;
categoryId: number;
icon: string;
isPinned: boolean;
orderId: number;
}
export interface NewBookmark {

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

@ -1,10 +1,11 @@
import { Bookmark, Model } from '.';
import { App, Bookmark, Model } from '.';
export interface Category extends Model {
name: string;
type: string;
isPinned: boolean;
orderId: number;
apps: App[];
bookmarks: Bookmark[];
}

3
client/src/interfaces/Forms.ts
View file

@ -14,10 +14,11 @@ export interface SearchForm {
export interface SettingsForm {
customTitle: string;
pinAppsByDefault: number;
pinBookmarksByDefault: number;
pinCategoriesByDefault: number;
hideHeader: number;
hideApps: number;
hideCategories: number;
hideBookmarks: number;
// hideSearch: number;
// defaultSearchProvider: string;
useOrdering: string;

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

@ -12,17 +12,21 @@ import {
GetAppCategoriesAction,
GetAppsAction,
GetBookmarkCategoriesAction,
GetBookmarksAction,
GetConfigAction,
PinAppAction,
PinAppCategoryAction,
PinBookmarkAction,
PinBookmarkCategoryAction,
ReorderAppCategoriesAction,
ReorderAppsAction,
ReorderBookmarkCategoriesAction,
ReorderBookmarksAction,
SetThemeAction,
SortAppCategoriesAction,
SortAppsAction,
SortBookmarkCategoriesAction,
SortBookmarksAction,
UpdateAppAction,
UpdateAppCategoryAction,
UpdateBookmarkAction,
@ -66,9 +70,16 @@ export enum ActionTypes {
sortBookmarkCategories = 'SORT_BOOKMARK_CATEGORIES',
reorderBookmarkCategories = 'REORDER_BOOKMARK_CATEGORIES',
// Bookmarks
getBookmarks = 'GET_BOOKMARKS',
getBookmarksSuccess = 'GET_BOOKMARKS_SUCCESS',
getBookmarksError = 'GET_BOOKMARKS_ERROR',
pinBookmark = 'PIN_BOOKMARK',
addBookmark = 'ADD_BOOKMARK',
addBookmarkSuccess = 'ADD_BOOKMARK_SUCCESS',
deleteBookmark = 'DELETE_BOOKMARK',
updateBookmark = 'UPDATE_BOOKMARK',
reorderBookmarks = 'REORDER_BOOKMARKS',
sortBookmarks = 'SORT_BOOKMARKS',
// Notifications
createNotification = 'CREATE_NOTIFICATION',
clearNotification = 'CLEAR_NOTIFICATION',
@ -109,9 +120,13 @@ export type Action =
| SortBookmarkCategoriesAction
| ReorderBookmarkCategoriesAction
// Bookmarks
| GetBookmarksAction<any>
| PinBookmarkAction
| AddBookmarkAction
| DeleteBookmarkAction
| UpdateBookmarkAction
| ReorderBookmarksAction
| SortBookmarksAction
// Notifications
| CreateNotificationAction
| ClearNotificationAction

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

@ -31,11 +31,14 @@ export const getApps = () => async (dispatch: Dispatch) => {
}
};
/**
* GET CATEGORIES
*/
export interface GetAppCategoriesAction<T> {
type:
| ActionTypes.getAppCategories
| ActionTypes.getAppCategoriesSuccess
| ActionTypes.getAppCategoriesSuccess;
| ActionTypes.getAppCategoriesError;
payload: T;
}
@ -59,6 +62,9 @@ export const getAppCategories = () => async (dispatch: Dispatch) => {
}
};
/**
* ADD CATEGORY
*/
export interface AddAppCategoryAction {
type: ActionTypes.addAppCategory;
payload: Category;
@ -124,6 +130,9 @@ export const pinApp = (app: App) => async (dispatch: Dispatch) => {
}
};
/**
* ADD APP
*/
export interface AddAppAction {
type: ActionTypes.addAppSuccess;
payload: App;
@ -255,14 +264,21 @@ export const updateAppCategory =
}
};
/**
* DELETE APP
*/
export interface DeleteAppAction {
type: ActionTypes.deleteApp;
payload: number;
payload: {
appId: number;
categoryId: number;
};
}
export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
export const deleteApp =
(appId: number, categoryId: number) => async (dispatch: Dispatch) => {
try {
await axios.delete<ApiResponse<{}>>(`/api/apps/${id}`);
await axios.delete<ApiResponse<{}>>(`/api/apps/${appId}`);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
@ -274,22 +290,28 @@ export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
dispatch<DeleteAppAction>({
type: ActionTypes.deleteApp,
payload: id,
payload: {
appId,
categoryId,
},
});
} catch (err) {
console.log(err);
}
};
/**
* UPDATE APP
*/
export interface UpdateAppAction {
type: ActionTypes.updateApp;
payload: App;
}
export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
export const updateApp = (appId: number, formData: NewApp | FormData, previousCategoryId: number) => async (dispatch: Dispatch) => {
try {
const res = await axios.put<ApiResponse<App>>(
`/api/apps/${id}`,
`/api/apps/${appId}`,
formData
);
@ -301,13 +323,31 @@ export const updateApp = (id: number, formData: NewApp | FormData) => async (di
},
});
await dispatch<UpdateAppAction>({
// Check if category was changed
const categoryWasChanged = res.data.data.categoryId !== previousCategoryId;
if (categoryWasChanged) {
// Delete app from old category
dispatch<DeleteAppAction>({
type: ActionTypes.deleteApp,
payload: {
appId,
categoryId: previousCategoryId,
},
});
// Add app to the new category
dispatch<AddAppAction>({
type: ActionTypes.addAppSuccess,
payload: res.data.data,
});
} else {
// Else update only name/url
dispatch<UpdateAppAction>({
type: ActionTypes.updateApp,
payload: res.data.data,
});
// Sort apps
dispatch<any>(sortApps());
}
} catch (err) {
console.log(err);
}

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

@ -5,69 +5,140 @@ import { ApiResponse, Bookmark, Category, Config, NewBookmark, NewCategory } fro
import { ActionTypes } from './actionTypes';
import { CreateNotificationAction } from './notification';
export interface GetBookmarksAction<T> {
type:
| ActionTypes.getBookmarks
| ActionTypes.getBookmarksSuccess
| ActionTypes.getBookmarksError;
payload: T;
}
export const getBookmarks = () => async (dispatch: Dispatch) => {
dispatch<GetBookmarksAction<undefined>>({
type: ActionTypes.getBookmarks,
payload: undefined,
});
try {
const res = await axios.get<ApiResponse<Bookmark[]>>("/api/bookmarks");
dispatch<GetBookmarksAction<Bookmark[]>>({
type: ActionTypes.getBookmarksSuccess,
payload: res.data.data,
});
} catch (err) {
console.log(err);
}
};
/**
* GET CATEGORIES
*/
export interface GetBookmarkCategoriesAction<T> {
type: ActionTypes.getBookmarkCategories | ActionTypes.getBookmarkCategoriesSuccess | ActionTypes.getBookmarkCategoriesError;
type:
| ActionTypes.getBookmarkCategories
| ActionTypes.getBookmarkCategoriesSuccess
| ActionTypes.getBookmarkCategoriesError;
payload: T;
}
export const getBookmarkCategories = () => async (dispatch: Dispatch) => {
dispatch<GetBookmarkCategoriesAction<undefined>>({
type: ActionTypes.getBookmarkCategories,
payload: undefined
})
payload: undefined,
});
try {
const res = await axios.get<ApiResponse<Category[]>>('/api/categories');
const res = await axios.get<ApiResponse<Category[]>>("/api/categories");
dispatch<GetBookmarkCategoriesAction<Category[]>>({
type: ActionTypes.getBookmarkCategoriesSuccess,
payload: res.data.data.filter((category: Category) => category.type === 'bookmarks'),
})
payload: res.data.data.filter(
(category: Category) => category.type === "bookmarks"
),
});
} catch (err) {
console.log(err);
}
}
};
/**
* ADD CATEGORY
*/
export interface AddBookmarkCategoryAction {
type: ActionTypes.addBookmarkCategory,
payload: Category
type: ActionTypes.addBookmarkCategory;
payload: Category;
}
export const addBookmarkCategory = (formData: NewCategory) => async (dispatch: Dispatch) => {
export const addBookmarkCategory =
(formData: NewCategory) => async (dispatch: Dispatch) => {
try {
const res = await axios.post<ApiResponse<Category>>('/api/categories', formData);
const res = await axios.post<ApiResponse<Category>>(
"/api/categories",
formData
);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Category ${formData.name} created`
}
})
title: "Success",
message: `Category ${formData.name} created`,
},
});
dispatch<AddBookmarkCategoryAction>({
type: ActionTypes.addBookmarkCategory,
payload: res.data.data
})
payload: res.data.data,
});
dispatch<any>(sortBookmarkCategories());
} catch (err) {
console.log(err);
}
};
export interface PinBookmarkAction {
type: ActionTypes.pinBookmark;
payload: Bookmark;
}
export const pinBookmark =
(bookmark: Bookmark) => async (dispatch: Dispatch) => {
try {
const { id, isPinned, name } = bookmark;
const res = await axios.put<ApiResponse<Bookmark>>(
`/api/bookmarks/${id}`,
{
isPinned: !isPinned,
}
);
const status = isPinned
? "unpinned from Homescreen"
: "pinned to Homescreen";
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: "Success",
message: `Bookmark ${name} ${status}`,
},
});
dispatch<PinBookmarkAction>({
type: ActionTypes.pinBookmark,
payload: res.data.data,
});
} catch (err) {
console.log(err);
}
};
/**
* ADD BOOKMARK
*/
export interface AddBookmarkAction {
type: ActionTypes.addBookmark,
payload: Bookmark
*/ export interface AddBookmarkAction {
type: ActionTypes.addBookmarkSuccess;
payload: Bookmark;
}
export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch: Dispatch) => {
@ -78,175 +149,188 @@ export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Bookmark created`
message: `Bookmark ${res.data.data.name} created`,
}
})
dispatch<AddBookmarkAction>({
type: ActionTypes.addBookmark,
payload: res.data.data
})
await dispatch<AddBookmarkAction>({
type: ActionTypes.addBookmarkSuccess,
payload: res.data.data,
});
// Sort bookmarks
dispatch<any>(sortBookmarks());
} catch (err) {
console.log(err);
}
}
};
/**
* PIN CATEGORY
*/
export interface PinBookmarkCategoryAction {
type: ActionTypes.pinBookmarkCategory,
payload: Category
type: ActionTypes.pinBookmarkCategory;
payload: Category;
}
export const pinBookmarkCategory = (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 });
const res = await axios.put<ApiResponse<Category>>(
`/api/categories/${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: `Category ${name} ${status}`
}
})
title: "Success",
message: `Category ${name} ${status}`,
},
});
dispatch<PinBookmarkCategoryAction>({
type: ActionTypes.pinBookmarkCategory,
payload: res.data.data
})
payload: res.data.data,
});
} catch (err) {
console.log(err);
}
}
};
/**
* DELETE CATEGORY
*/
export interface DeleteBookmarkCategoryAction {
type: ActionTypes.deleteBookmarkCategory,
payload: number
type: ActionTypes.deleteBookmarkCategory;
payload: number;
}
export const deleteBookmarkCategory = (id: number) => async (dispatch: Dispatch) => {
export const deleteBookmarkCategory =
(id: number) => async (dispatch: Dispatch) => {
try {
await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Category deleted`
}
})
title: "Success",
message: `Category deleted`,
},
});
dispatch<DeleteBookmarkCategoryAction>({
type: ActionTypes.deleteBookmarkCategory,
payload: id
})
payload: id,
});
} catch (err) {
console.log(err);
}
}
};
/**
* UPDATE CATEGORY
*/
export interface UpdateBookmarkCategoryAction {
type: ActionTypes.updateBookmarkCategory,
payload: Category
type: ActionTypes.updateBookmarkCategory;
payload: Category;
}
export const updateBookmarkCategory = (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);
const res = await axios.put<ApiResponse<Category>>(
`/api/categories/${id}`,
formData
);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Category ${formData.name} updated`
}
})
title: "Success",
message: `Category ${formData.name} updated`,
},
});
dispatch<UpdateBookmarkCategoryAction>({
type: ActionTypes.updateBookmarkCategory,
payload: res.data.data
})
payload: res.data.data,
});
dispatch<any>(sortBookmarkCategories());
} catch (err) {
console.log(err);
}
}
};
/**
* DELETE BOOKMARK
*/
export interface DeleteBookmarkAction {
type: ActionTypes.deleteBookmark,
type: ActionTypes.deleteBookmark;
payload: {
bookmarkId: number,
categoryId: number
}
bookmarkId: number;
categoryId: number;
};
}
export const deleteBookmark = (bookmarkId: number, categoryId: number) => async (dispatch: Dispatch) => {
export const deleteBookmark =
(bookmarkId: number, categoryId: number) => async (dispatch: Dispatch) => {
try {
await axios.delete<ApiResponse<{}>>(`/api/bookmarks/${bookmarkId}`);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: 'Bookmark deleted'
}
})
title: "Success",
message: "Bookmark deleted",
},
});
dispatch<DeleteBookmarkAction>({
type: ActionTypes.deleteBookmark,
payload: {
bookmarkId,
categoryId
}
})
categoryId,
},
});
} catch (err) {
console.log(err);
}
}
};
/**
* UPDATE BOOKMARK
*/
export interface UpdateBookmarkAction {
type: ActionTypes.updateBookmark,
payload: Bookmark
type: ActionTypes.updateBookmark;
payload: Bookmark;
}
export const updateBookmark = (
bookmarkId: number,
formData: NewBookmark | FormData,
category: {
prev: number,
curr: number
}
) => async (dispatch: Dispatch) => {
export const updateBookmark =
(bookmarkId: number, formData: NewBookmark | FormData, previousCategoryId: number) =>
async (dispatch: Dispatch) => {
try {
const res = await axios.put<ApiResponse<Bookmark>>(`/api/bookmarks/${bookmarkId}`, formData);
const res = await axios.put<ApiResponse<Bookmark>>(
`/api/bookmarks/${bookmarkId}`,
formData
);
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Bookmark updated`
}
})
title: "Success",
message: `Bookmark ${res.data.data.name} updated`,
},
});
// Check if category was changed
const categoryWasChanged = category.curr !== category.prev;
const categoryWasChanged = res.data.data.categoryId !== previousCategoryId;
if (categoryWasChanged) {
// Delete bookmark from old category
@ -254,27 +338,81 @@ export const updateBookmark = (
type: ActionTypes.deleteBookmark,
payload: {
bookmarkId,
categoryId: category.prev
}
})
categoryId: previousCategoryId,
},
});
// Add bookmark to the new category
dispatch<AddBookmarkAction>({
type: ActionTypes.addBookmark,
payload: res.data.data
})
type: ActionTypes.addBookmarkSuccess,
payload: res.data.data,
});
} else {
// Else update only name/url/icon
// Else update only name/url
dispatch<UpdateBookmarkAction>({
type: ActionTypes.updateBookmark,
payload: res.data.data
})
payload: res.data.data,
});
}
} catch (err) {
console.log(err);
}
};
export interface ReorderBookmarksAction {
type: ActionTypes.reorderBookmarks;
payload: Bookmark[];
}
interface ReorderBookmarksQuery {
bookmarks: {
id: number;
orderId: number;
}[];
}
export const reorderBookmarks =
(bookmarks: Bookmark[]) => async (dispatch: Dispatch) => {
try {
const updateQuery: ReorderBookmarksQuery = { bookmarks: [] };
bookmarks.forEach((bookmark, index) => {
updateQuery.bookmarks.push({
id: bookmark.id,
orderId: index + 1,
});
bookmark.orderId = index + 1;
});
await axios.put<ApiResponse<{}>>("/api/bookmarks/0/reorder", updateQuery);
dispatch<ReorderBookmarksAction>({
type: ActionTypes.reorderBookmarks,
payload: bookmarks,
});
} catch (err) {
console.log(err);
}
};
export interface SortBookmarksAction {
type: ActionTypes.sortBookmarks;
payload: string;
}
export const sortBookmarks = () => async (dispatch: Dispatch) => {
try {
const res = await axios.get<ApiResponse<Config>>("/api/config/useOrdering");
dispatch<SortBookmarksAction>({
type: ActionTypes.sortBookmarks,
payload: res.data.data.value,
});
} catch (err) {
console.log(err);
}
};
/**
* SORT CATEGORIES
*/
@ -285,16 +423,16 @@ export interface SortBookmarkCategoriesAction {
export const sortBookmarkCategories = () => 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<SortBookmarkCategoriesAction>({
type: ActionTypes.sortBookmarkCategories,
payload: res.data.data.value
})
payload: res.data.data.value,
});
} catch (err) {
console.log(err);
}
}
};
/**
* REORDER CATEGORIES
@ -304,29 +442,35 @@ export interface ReorderBookmarkCategoriesAction {
payload: Category[];
}
interface ReorderQuery {
interface ReorderReorderCategoriesQueryuery {
categories: {
id: number;
orderId: number;
}[]
}[];
}
export const reorderBookmarkCategories = (categories: Category[]) => async (dispatch: Dispatch) => {
export const reorderBookmarkCategories =
(categories: Category[]) => async (dispatch: Dispatch) => {
try {
const updateQuery: ReorderQuery = { categories: [] }
const updateQuery: ReorderReorderCategoriesQueryuery = { categories: [] };
categories.forEach((category, index) => updateQuery.categories.push({
categories.forEach((category, index) =>
updateQuery.categories.push({
id: category.id,
orderId: index + 1
}))
orderId: index + 1,
})
);
await axios.put<ApiResponse<{}>>('/api/categories/0/reorder', updateQuery);
await axios.put<ApiResponse<{}>>(
"/api/categories/0/reorder",
updateQuery
);
dispatch<ReorderBookmarkCategoriesAction>({
type: ActionTypes.reorderBookmarkCategories,
payload: categories
})
payload: categories,
});
} catch (err) {
console.log(err);
}
}
};

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

@ -88,7 +88,9 @@ const pinCategory = (state: State, action: Action): State => {
const pinApp = (state: State, action: Action): State => {
const tmpApps = [...state.apps];
const changedApp = tmpApps.find((app: App) => app.id === action.payload.id);
const changedApp = tmpApps.find(
(app: App) => app.id === action.payload.id
);
if (changedApp) {
changedApp.isPinned = action.payload.isPinned;
@ -101,8 +103,25 @@ const pinApp = (state: State, action: Action): State => {
};
const addAppSuccess = (state: State, action: Action): State => {
const categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload.categoryId
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIndex),
{
...state.categories[categoryIndex],
apps: [
...state.categories[categoryIndex].apps,
{
...action.payload,
},
],
},
...state.categories.slice(categoryIndex + 1),
],
apps: [...state.apps, action.payload],
};
};
@ -139,18 +158,33 @@ const updateCategory = (state: State, action: Action): State => {
const deleteApp = (state: State, action: Action): State => {
const tmpApps = [...state.apps].filter(
(app: App) => app.id !== action.payload
(app: App) => app.id !== action.payload.appId
);
const tmpCategories = [...state.categories];
const categoryInUpdate = tmpCategories.find(
(category: Category) => category.id === action.payload.categoryId
);
if (categoryInUpdate) {
categoryInUpdate.apps = categoryInUpdate.apps.filter(
(app: App) => app.id !== action.payload.appId
);
}
return {
...state,
categories: tmpCategories,
apps: tmpApps,
};
};
const updateApp = (state: State, action: Action): State => {
// Update global apps collection
const tmpApps = [...state.apps];
const appInUpdate = tmpApps.find((app: App) => app.id === action.payload.id);
const appInUpdate = tmpApps.find(
(app: App) => app.id === action.payload.id
);
if (appInUpdate) {
appInUpdate.name = action.payload.name;
@ -159,8 +193,30 @@ const updateApp = (state: State, action: Action): State => {
appInUpdate.categoryId = action.payload.categoryId;
}
//update category apps collection
let categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload.categoryId
);
let appIndex = state.categories[categoryIndex].apps.findIndex(
(app: App) => app.id === action.payload.id
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIndex),
{
...state.categories[categoryIndex],
apps: [
...state.categories[categoryIndex].apps.slice(0, appIndex),
{
...action.payload,
},
...state.categories[categoryIndex].apps.slice(appIndex + 1),
],
},
...state.categories.slice(categoryIndex + 1),
],
apps: tmpApps,
};
};
@ -189,16 +245,6 @@ const reorderApps = (state: State, action: Action): State => {
};
const sortApps = (state: State, action: Action): State => {
// const tmpCategories = [...state.categories];
// tmpCategories.forEach((category: Category) => {
// category.apps = sortData<App>(category.apps, action.payload);
// });
// return {
// ...state,
// categories: tmpCategories,
// };
const sortedApps = sortData<App>(state.apps, action.payload);
return {

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

@ -6,29 +6,55 @@ export interface State {
loading: boolean;
errors: string | undefined;
categories: Category[];
bookmarks: Bookmark[];
}
const initialState: State = {
loading: true,
errors: undefined,
categories: []
}
categories: [],
bookmarks: [],
};
const getBookmarks = (state: State, action: Action): State => {
return {
...state,
loading: true,
errors: undefined,
};
};
const getBookmarksSuccess = (state: State, action: Action): State => {
return {
...state,
loading: false,
bookmarks: action.payload,
};
};
const getBookmarksError = (state: State, action: Action): State => {
return {
...state,
loading: false,
errors: action.payload,
};
};
const getCategories = (state: State, action: Action): State => {
return {
...state,
loading: true,
errors: undefined
}
}
errors: undefined,
};
};
const getCategoriesSuccess = (state: State, action: Action): State => {
return {
...state,
loading: false,
categories: action.payload
}
}
categories: action.payload,
};
};
const addCategory = (state: State, action: Action): State => {
return {
@ -37,15 +63,49 @@ const addCategory = (state: State, action: Action): State => {
...state.categories,
{
...action.payload,
type: 'bookmarks',
bookmarks: []
}
]
}
type: "bookmarks",
bookmarks: [],
},
],
};
};
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;
}
const addBookmark = (state: State, action: Action): State => {
const categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload.categoryId);
return {
...state,
categories: tmpCategories,
};
};
const pinBookmark = (state: State, action: Action): State => {
const tmpBookmarks = [...state.bookmarks];
const changedBookmark = tmpBookmarks.find(
(bookmark: Bookmark) => bookmark.id === action.payload.id
);
if (changedBookmark) {
changedBookmark.isPinned = action.payload.isPinned;
}
return {
...state,
bookmarks: tmpBookmarks,
};
};
const addBookmarkSuccess = (state: State, action: Action): State => {
const categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload.categoryId
);
return {
...state,
@ -56,44 +116,35 @@ const addBookmark = (state: State, action: Action): State => {
bookmarks: [
...state.categories[categoryIndex].bookmarks,
{
...action.payload
}
]
...action.payload,
},
...state.categories.slice(categoryIndex + 1)
]
}
}
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
}
}
],
},
...state.categories.slice(categoryIndex + 1),
],
bookmarks: [...state.bookmarks, action.payload],
};
};
const deleteCategory = (state: State, action: Action): State => {
const categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload);
const categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload
);
return {
...state,
categories: [
...state.categories.slice(0, categoryIndex),
...state.categories.slice(categoryIndex + 1)
]
}
}
...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);
const categoryInUpdate = tmpCategories.find(
(category: Category) => category.id === action.payload.id
);
if (categoryInUpdate) {
categoryInUpdate.name = action.payload.name;
@ -101,28 +152,54 @@ const updateCategory = (state: State, action: Action): State => {
return {
...state,
categories: tmpCategories
}
}
categories: tmpCategories,
};
};
const deleteBookmark = (state: State, action: Action): State => {
const tmpBookmarks = [...state.bookmarks].filter(
(bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId
);
const tmpCategories = [...state.categories];
const categoryInUpdate = tmpCategories.find((category: Category) => category.id === action.payload.categoryId);
const categoryInUpdate = tmpCategories.find(
(category: Category) => category.id === action.payload.categoryId
);
if (categoryInUpdate) {
categoryInUpdate.bookmarks = categoryInUpdate.bookmarks.filter((bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId);
categoryInUpdate.bookmarks = categoryInUpdate.bookmarks.filter(
(bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId
);
}
return {
...state,
categories: tmpCategories
}
}
categories: tmpCategories,
bookmarks: tmpBookmarks,
};
};
const updateBookmark = (state: State, action: Action): State => {
let categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload.categoryId);
let bookmarkIndex = state.categories[categoryIndex].bookmarks.findIndex((bookmark: Bookmark) => bookmark.id === action.payload.id);
// Update global bookmarks collection
const tmpBookmarks = [...state.bookmarks];
const bookmarkInUpdate = tmpBookmarks.find(
(bookmark: Bookmark) => bookmark.id === action.payload.id
);
if (bookmarkInUpdate) {
bookmarkInUpdate.name = action.payload.name;
bookmarkInUpdate.url = action.payload.url;
bookmarkInUpdate.icon = action.payload.icon;
bookmarkInUpdate.categoryId = action.payload.categoryId;
}
//update category bookmarks collection
let categoryIndex = state.categories.findIndex(
(category: Category) => category.id === action.payload.categoryId
);
let bookmarkIndex = state.categories[categoryIndex].bookmarks.findIndex(
(bookmark: Bookmark) => bookmark.id === action.payload.id
);
return {
...state,
@ -133,47 +210,88 @@ const updateBookmark = (state: State, action: Action): State => {
bookmarks: [
...state.categories[categoryIndex].bookmarks.slice(0, bookmarkIndex),
{
...action.payload
...action.payload,
},
...state.categories[categoryIndex].bookmarks.slice(bookmarkIndex + 1)
]
...state.categories[categoryIndex].bookmarks.slice(bookmarkIndex + 1),
],
},
...state.categories.slice(categoryIndex + 1)
]
}
}
...state.categories.slice(categoryIndex + 1),
],
bookmarks: tmpBookmarks,
};
};
const sortBookmarkCategories = (state: State, action: Action): State => {
const sortedCategories = sortData<Category>(state.categories, action.payload);
return {
...state,
categories: sortedCategories
}
}
categories: sortedCategories,
};
};
const reorderCategories = (state: State, action: Action): State => {
return {
...state,
categories: action.payload
}
}
categories: action.payload,
};
};
const reorderBookmarks = (state: State, action: Action): State => {
return {
...state,
bookmarks: action.payload,
};
};
const sortBookmarks = (state: State, action: Action): State => {
const sortedBookmarks = sortData<Bookmark>(state.bookmarks, action.payload);
return {
...state,
bookmarks: sortedBookmarks,
};
};
const bookmarkReducer = (state = initialState, action: Action) => {
switch (action.type) {
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.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.sortBookmarkCategories: return sortBookmarkCategories(state, action);
case ActionTypes.reorderBookmarkCategories: return reorderCategories(state, action);
default: return state;
}
case ActionTypes.getBookmarkCategories:
return getCategories(state, action);
case ActionTypes.getBookmarkCategoriesSuccess:
return getCategoriesSuccess(state, action);
case ActionTypes.getBookmarks:
return getBookmarks(state, action);
case ActionTypes.getBookmarksSuccess:
return getBookmarksSuccess(state, action);
case ActionTypes.getBookmarksError:
return getBookmarksError(state, action);
case ActionTypes.addBookmarkCategory:
return addCategory(state, action);
case ActionTypes.addBookmarkSuccess:
return addBookmarkSuccess(state, action);
case ActionTypes.pinBookmarkCategory:
return pinCategory(state, action);
case ActionTypes.pinBookmark:
return pinBookmark(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.sortBookmarkCategories:
return sortBookmarkCategories(state, action);
case ActionTypes.reorderBookmarkCategories:
return reorderCategories(state, action);
case ActionTypes.sortBookmarks:
return sortBookmarks(state, action);
case ActionTypes.reorderBookmarks:
return reorderBookmarks(state, action);
default:
return state;
}
};
export default bookmarkReducer;

44
controllers/bookmark.js
View file

@ -1,17 +1,23 @@
const asyncWrapper = require('../middleware/asyncWrapper');
const ErrorResponse = require('../utils/ErrorResponse');
const Bookmark = require('../models/Bookmark');
const Config = require('../models/Config');
const { Sequelize } = require('sequelize');
// @desc Create new bookmark
// @route POST /api/bookmarks
// @access Public
exports.createBookmark = asyncWrapper(async (req, res, next) => {
const pinBookmarks = await Config.findOne({
where: { key: 'pinBookmarksByDefault' }
});
let bookmark;
let _body = {
...req.body,
categoryId: parseInt(req.body.categoryId),
isPinned = (pinBookmarks && parseInt(pinBookmarks.value)),
};
if (req.file) {
@ -30,10 +36,24 @@ exports.createBookmark = asyncWrapper(async (req, res, next) => {
// @route GET /api/bookmarks
// @access Public
exports.getBookmarks = asyncWrapper(async (req, res, next) => {
const bookmarks = await Bookmark.findAll({
order: [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']],
// Get config from database
const useOrdering = await Config.findOne({
where: { key: 'useOrdering' }
});
const orderType = useOrdering ? useOrdering.value : 'createdAt';
let bookmarks;
if (orderType == 'name') {
bookmarks = await Bookmark.findAll({
order: [[ Sequelize.fn('lower', Sequelize.col('name')), 'ASC' ]]
});
} else {
bookmarks = await Bookmark.findAll({
order: [[ orderType, 'ASC' ]]
});
}
res.status(200).json({
success: true,
data: bookmarks,
@ -102,8 +122,24 @@ exports.updateBookmark = asyncWrapper(async (req, res, next) => {
// @access Public
exports.deleteBookmark = asyncWrapper(async (req, res, next) => {
await Bookmark.destroy({
where: { id: req.params.id },
});
where: { id: req.params.id }
})
res.status(200).json({
success: true,
data: {}
})
})
// @desc Reorder bookmarks
// @route PUT /api/bookmarks/0/reorder
// @access Public
exports.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,

9
models/Bookmark.js
View file

@ -17,6 +17,15 @@ const Bookmark = sequelize.define('Bookmark', {
icon: {
type: DataTypes.STRING,
defaultValue: ''
},
isPinned: {
type: DataTypes.BOOLEAN,
defaultValue: false
},
orderId: {
type: DataTypes.INTEGER,
allowNull: true,
defaultValue: null
}
}, {
tableName: 'bookmarks'

7
routes/bookmark.js
View file

@ -7,7 +7,8 @@ const {
getBookmarks,
getBookmark,
updateBookmark,
deleteBookmark
deleteBookmark,
reorderBookmarks
} = require('../controllers/bookmark');
router
@ -21,4 +22,8 @@ router
.put(upload, updateBookmark)
.delete(deleteBookmark);
router
.route('/0/reorder')
.put(reorderBookmarks);
module.exports = router;

6
utils/init/initialConfig.json
View file

@ -24,6 +24,10 @@
"key": "pinAppsByDefault",
"value": true
},
{
"key": "pinBookmarksByDefault",
"value": true
},
{
"key": "pinCategoriesByDefault",
"value": true
@ -53,7 +57,7 @@
"value": false
},
{
"key": "hideCategories",
"key": "hideBookmarks",
"value": false
},
{