{iconEl}
-
- (false);
const [customIcon, setCustomIcon] = useState(null);
- const [formData, setFormData] = useState({
+ const [categoryData, setCategoryData] = useState({
+ name: '',
+ type: 'apps'
+ })
+
+ const [appData, setAppData] = useState({
name: '',
url: '',
+ categoryId: -1,
icon: '',
});
+ // Load category data if provided for editing
+ useEffect(() => {
+ if (props.category) {
+ setCategoryData({ name: props.category.name, type: props.category.type });
+ } else {
+ setCategoryData({ name: '', type: "apps" });
+ }
+ }, [props.category]);
+
+ // Load app data if provided for editing
useEffect(() => {
if (props.app) {
- setFormData({
+ setAppData({
name: props.app.name,
url: props.app.url,
+ categoryId: props.app.categoryId,
icon: props.app.icon,
});
} else {
- setFormData({
+ setAppData({
name: '',
url: '',
+ categoryId: -1,
icon: '',
});
}
}, [props.app]);
- const inputChangeHandler = (e: ChangeEvent): void => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value,
- });
- };
-
- const fileChangeHandler = (e: ChangeEvent): void => {
- if (e.target.files) {
- setCustomIcon(e.target.files[0]);
- }
- };
-
const formSubmitHandler = (e: SyntheticEvent): void => {
e.preventDefault();
@@ -63,132 +81,241 @@ const AppForm = (props: ComponentProps): JSX.Element => {
if (customIcon) {
data.append('icon', customIcon);
}
- data.append('name', formData.name);
- data.append('url', formData.url);
+ data.append('name', appData.name);
+ data.append('url', appData.url);
+ data.append('categoryId', appData.categoryId.toString());
return data;
};
- if (!props.app) {
- if (customIcon) {
- const data = createFormData();
- props.addApp(data);
- } else {
- props.addApp(formData);
+ if (!props.category && !props.app) {
+ // Add new
+ if (props.contentType === ContentType.category) {
+ // Add category
+ props.addAppCategory(categoryData);
+ setCategoryData({ name: '', type: 'apps' });
+ } else if (props.contentType === ContentType.app) {
+ // Add app
+ if (appData.categoryId === -1) {
+ props.createNotification({
+ title: 'Error',
+ message: 'Please select category'
+ })
+ return;
+ }
+ if (customIcon) {
+ const data = createFormData();
+ props.addApp(data);
+ } else {
+ props.addApp(appData);
+ }
+ setAppData({
+ name: '',
+ url: '',
+ categoryId: appData.categoryId,
+ icon: ''
+ })
}
} else {
- if (customIcon) {
- const data = createFormData();
- props.updateApp(props.app.id, data);
- } else {
- props.updateApp(props.app.id, formData);
- props.modalHandler();
+ // Update
+ if (props.contentType === ContentType.category && props.category) {
+ // Update category
+ props.updateAppCategory(props.category.id, categoryData);
+ setCategoryData({ name: '', type: 'apps' });
+ } else if (props.contentType === ContentType.app && props.app) {
+ // Update app
+ if (customIcon) {
+ const data = createFormData();
+ props.updateApp(props.app.id, data, props.app.categoryId);
+ } else {
+ props.updateApp(props.app.id, appData, props.app.categoryId);
+ props.modalHandler();
+ }
}
- }
- setFormData({
- name: '',
- url: '',
- icon: '',
- });
- };
+ setAppData({
+ name: '',
+ url: '',
+ categoryId: -1,
+ icon: ''
+ });
+
+ setCustomIcon(null);
+ }
+ }
+
+ const inputChangeHandler = (e: ChangeEvent, setDataFunction: Dispatch>, data: any): void => {
+ setDataFunction({
+ ...data,
+ [e.target.name]: e.target.value
+ })
+ }
+
+ const fileChangeHandler = (e: ChangeEvent): void => {
+ if (e.target.files) {
+ setCustomIcon(e.target.files[0]);
+ }
+ }
+
+ let button =
+
+ if (!props.category && !props.app) {
+ if (props.contentType === ContentType.category) {
+ button = ;
+ } else {
+ button = ;
+ }
+ } else if (props.category) {
+ button =
+ } else if (props.app) {
+ button =
+ }
return (
-
-
- inputChangeHandler(e)}
- />
-
-
-
- inputChangeHandler(e)}
- />
-
-
- {' '}
- Check supported URL formats
-
-
-
- {!useCustomIcon ? (
- // use mdi icon
-
-
- inputChangeHandler(e)}
- />
-
- Use icon name from MDI.
-
- {' '}
- Click here for reference
-
-
- toggleUseCustomIcon(!useCustomIcon)}
- className={classes.Switch}
- >
- Switch to custom icon upload
-
-
- ) : (
- // upload custom icon
-
-
- fileChangeHandler(e)}
- accept=".jpg,.jpeg,.png,.svg"
- />
- {
- setCustomIcon(null);
- toggleUseCustomIcon(!useCustomIcon);
- }}
- className={classes.Switch}
- >
- Switch to MDI
-
-
- )}
- {!props.app ? (
-
- ) : (
-
- )}
+ {props.contentType === ContentType.category
+ ? (
+
+
+
+ inputChangeHandler(e, setCategoryData, categoryData)}
+ />
+
+
+ )
+ : (
+
+
+
+ inputChangeHandler(e, setAppData, appData)}
+ />
+
+
+
+ inputChangeHandler(e, setAppData, appData)}
+ />
+
+
+ {' '}Check supported URL formats
+
+
+
+
+
+
+
+ {!useCustomIcon
+ // use mdi icon
+ ? (
+
+ inputChangeHandler(e, setAppData, appData)}
+ />
+
+ Use icon name from MDI.
+
+ {' '}Click here for reference
+
+
+ toggleUseCustomIcon(!useCustomIcon)}
+ className={classes.Switch}>
+ Switch to custom icon upload
+
+ )
+ // upload custom icon
+ : (
+
+ fileChangeHandler(e)}
+ accept=".jpg,.jpeg,.png,.svg"
+ />
+ toggleUseCustomIcon(!useCustomIcon)}
+ className={classes.Switch}>
+ Switch to MDI
+
+ )
+ }
+
+ )
+ }
+ {button}
);
};
-export default connect(null, { addApp, updateApp })(AppForm);
+const mapStateToProps = (state: GlobalState) => {
+ return {
+ categories: state.app.categories
+ }
+}
+
+const dispatchMap = {
+ getAppCategories,
+ addAppCategory,
+ addApp,
+ updateAppCategory,
+ updateApp,
+ createNotification
+}
+
+export default connect(mapStateToProps, dispatchMap)(AppForm);
diff --git a/client/src/components/Apps/AppGrid/AppGrid.tsx b/client/src/components/Apps/AppGrid/AppGrid.tsx
index 30d5c8c..a29adad 100644
--- a/client/src/components/Apps/AppGrid/AppGrid.tsx
+++ b/client/src/components/Apps/AppGrid/AppGrid.tsx
@@ -1,28 +1,29 @@
-import classes from './AppGrid.module.css';
import { Link } from 'react-router-dom';
-import { App } from '../../../interfaces/App';
+import { App, Category } from '../../../interfaces';
import AppCard from '../AppCard/AppCard';
+import classes from './AppGrid.module.css';
interface ComponentProps {
- apps: App[];
- totalApps?: number;
+ categories: Category[];
+ apps: App[]
+ totalCategories?: number;
searching: boolean;
}
const AppGrid = (props: ComponentProps): JSX.Element => {
let apps: JSX.Element;
- if (props.apps.length > 0) {
+ if (props.categories.length > 0) {
apps = (
([]);
const [localApps, setLocalApps] = useState([]);
const [isCustomOrder, setIsCustomOrder] = useState(false);
+ // Copy categories array
+ useEffect(() => {
+ setLocalCategories([...props.categories]);
+ }, [props.categories]);
+
// Copy apps array
useEffect(() => {
setLocalApps([...props.apps]);
- }, [props.apps])
+ }, [props.apps]);
// Check ordering
useEffect(() => {
- const order = searchConfig('useOrdering', '');
+ const order = searchConfig("useOrdering", "");
- if (order === 'orderId') {
+ if (order === "orderId") {
setIsCustomOrder(true);
}
- }, [])
+ }, []);
+
+ const deleteCategoryHandler = (category: Category): void => {
+ const proceed = window.confirm(
+ `Are you sure you want to delete ${category.name}? It will delete ALL assigned apps`
+ );
+
+ if (proceed) {
+ props.deleteAppCategory(category.id);
+ }
+ };
const deleteAppHandler = (app: App): void => {
- const proceed = window.confirm(`Are you sure you want to delete ${app.name} at ${app.url} ?`);
+ const proceed = window.confirm(
+ `Are you sure you want to delete ${app.name} at ${app.url} ?`
+ );
if (proceed) {
props.deleteApp(app.id);
}
- }
+ };
// Support keyboard navigation for actions
- const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => {
- if (e.key === 'Enter') {
- handler(app);
+ const keyboardActionHandler = (
+ e: KeyboardEvent,
+ object: any,
+ handler: Function
+ ) => {
+ if (e.key === "Enter") {
+ handler(object);
}
- }
+ };
- const dragEndHanlder = (result: DropResult): void => {
+ const dragEndHandler = (result: DropResult): void => {
if (!isCustomOrder) {
props.createNotification({
- title: 'Error',
- message: 'Custom order is disabled'
- })
+ title: "Error",
+ message: "Custom order is disabled",
+ });
return;
}
@@ -75,106 +103,251 @@ const AppTable = (props: ComponentProps): JSX.Element => {
return;
}
- const tmpApps = [...localApps];
- const [movedApp] = tmpApps.splice(result.source.index, 1);
- tmpApps.splice(result.destination.index, 0, movedApp);
+ if (props.contentType === ContentType.app) {
+ const tmpApps = [...localApps];
+ const [movedApp] = tmpApps.splice(result.source.index, 1);
+ tmpApps.splice(result.destination.index, 0, movedApp);
- setLocalApps(tmpApps);
- props.reorderApps(tmpApps);
- }
+ setLocalApps(tmpApps);
+ props.reorderApps(tmpApps);
+ } else if (props.contentType === ContentType.category) {
+ const tmpCategories = [...localCategories];
+ const [movedCategory] = tmpCategories.splice(result.source.index, 1);
+ tmpCategories.splice(result.destination.index, 0, movedCategory);
- return (
-
-
-
- {(provided) => (
-
- {localApps.map((app: App, index): JSX.Element => {
- return (
-
+ setLocalCategories(tmpCategories);
+ props.reorderAppCategories(tmpCategories);
+ }
+ };
+
+ if (props.contentType === ContentType.category) {
+ return (
+
+
+
+ {(provided) => (
+
+ {localCategories.map(
+ (category: Category, index): JSX.Element => {
+ return (
+
+ )}
+
+
+
+ );
+ } else {
+ return (
+
+
+
+ {(provided) => (
+
+ {localApps.map((app: App, index): JSX.Element => {
+ return (
+
+ )}
+
+
+
+ );
}
-}
+};
const actions = {
+ pinAppCategory,
+ deleteAppCategory,
+ reorderAppCategories,
pinApp,
deleteApp,
reorderApps,
updateConfig,
- createNotification
-}
+ createNotification,
+};
-export default connect(mapStateToProps, actions)(AppTable);
\ No newline at end of file
+export default connect(null, actions)(AppTable);
diff --git a/client/src/components/Apps/Apps.tsx b/client/src/components/Apps/Apps.tsx
index 751a196..f2049e4 100644
--- a/client/src/components/Apps/Apps.tsx
+++ b/client/src/components/Apps/Apps.tsx
@@ -1,45 +1,63 @@
import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
-// Redux
-import { connect } from 'react-redux';
-import { getApps } from '../../store/actions';
-
-// Typescript
-import { App, GlobalState } from '../../interfaces';
-
-// CSS
-import classes from './Apps.module.css';
-
-// UI
-import { Container } from '../UI/Layout/Layout';
-import Headline from '../UI/Headlines/Headline/Headline';
-import Spinner from '../UI/Spinner/Spinner';
+import { App, Category, GlobalState } from '../../interfaces';
+import { getAppCategories, getApps } from '../../store/actions';
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
+import Headline from '../UI/Headlines/Headline/Headline';
+import { Container } from '../UI/Layout/Layout';
import Modal from '../UI/Modal/Modal';
-
-// Subcomponents
-import AppGrid from './AppGrid/AppGrid';
+import Spinner from '../UI/Spinner/Spinner';
import AppForm from './AppForm/AppForm';
+import AppGrid from './AppGrid/AppGrid';
+import classes from './Apps.module.css';
import AppTable from './AppTable/AppTable';
-interface ComponentProps {
- getApps: Function;
- apps: App[];
+interface ComponentProps {
loading: boolean;
+ categories: Category[];
+ getAppCategories: () => void;
+ apps: App[];
+ getApps: () => void;
searching: boolean;
}
+export enum ContentType {
+ category,
+ app
+}
+
const Apps = (props: ComponentProps): JSX.Element => {
- const { getApps, apps, loading, searching = false } = props;
+ const {
+ apps,
+ getApps,
+ getAppCategories,
+ categories,
+ loading,
+ searching = false
+ } = props;
const [modalIsOpen, setModalIsOpen] = useState(false);
+ const [formContentType, setFormContentType] = useState(ContentType.category);
const [isInEdit, setIsInEdit] = useState(false);
+ const [tableContentType, setTableContentType] = useState(ContentType.category);
const [isInUpdate, setIsInUpdate] = useState(false);
+ const [categoryInUpdate, setCategoryInUpdate] = useState({
+ name: "",
+ id: -1,
+ isPinned: false,
+ orderId: 0,
+ type: "apps",
+ bookmarks: [],
+ createdAt: new Date(),
+ updatedAt: new Date()
+ })
const [appInUpdate, setAppInUpdate] = useState({
- name: 'string',
- url: 'string',
- icon: 'string',
+ name: "string",
+ url: "string",
+ categoryId: -1,
+ icon: "string",
isPinned: false,
orderId: 0,
id: 0,
@@ -53,60 +71,93 @@ const Apps = (props: ComponentProps): JSX.Element => {
}
}, [getApps]);
+ useEffect(() => {
+ if (categories.length === 0) {
+ getAppCategories();
+ }
+ }, [getAppCategories])
+
const toggleModal = (): void => {
setModalIsOpen(!modalIsOpen);
- setIsInUpdate(false);
- };
+ // setIsInUpdate(false);
+ }
- const toggleEdit = (): void => {
- setIsInEdit(!isInEdit);
+ const addActionHandler = (contentType: ContentType) => {
+ setFormContentType(contentType);
setIsInUpdate(false);
- };
+ toggleModal();
+ }
- const toggleUpdate = (app: App): void => {
- setAppInUpdate(app);
+ const editActionHandler = (contentType: ContentType) => {
+ // We"re in the edit mode and the same button was clicked - go back to list
+ if (isInEdit && contentType === tableContentType) {
+ setIsInEdit(false);
+ } else {
+ setIsInEdit(true);
+ setTableContentType(contentType);
+ }
+ }
+
+ const instanceOfCategory = (object: any): object is Category => {
+ return "apps" in object;
+ }
+
+ const goToUpdateMode = (data: Category | App): void => {
setIsInUpdate(true);
- setModalIsOpen(true);
- };
+ if (instanceOfCategory(data)) {
+ setFormContentType(ContentType.category);
+ setCategoryInUpdate(data);
+ } else {
+ setFormContentType(ContentType.app);
+ setAppInUpdate(data);
+ }
+ toggleModal();
+ }
return (
-
+
{!isInUpdate ? (
-
Go back}
+ subtitle={(Go back)}
/>
);
};
const mapStateToProps = (state: GlobalState) => {
return {
- apps: state.app.apps,
loading: state.app.loading,
- };
-};
+ categories: state.app.categories,
+ apps: state.app.apps,
+ }
+}
-export default connect(mapStateToProps, { getApps })(Apps);
+export default connect(mapStateToProps, { getApps, getAppCategories })(Apps);
diff --git a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
index 5162c89..2cc51c6 100644
--- a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
+++ b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
@@ -1,40 +1,19 @@
-// React
-import {
- useState,
- SyntheticEvent,
- Fragment,
- ChangeEvent,
- useEffect,
-} from 'react';
-
-// Redux
+import { ChangeEvent, Dispatch, Fragment, SetStateAction, SyntheticEvent, useEffect, useState } from 'react';
import { connect } from 'react-redux';
+
+import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
import {
- getCategories,
- addCategory,
addBookmark,
- updateCategory,
- updateBookmark,
+ addBookmarkCategory,
createNotification,
+ getBookmarkCategories,
+ updateBookmark,
+ updateBookmarkCategory,
} from '../../../store/actions';
-
-// Typescript
-import {
- Bookmark,
- Category,
- GlobalState,
- NewBookmark,
- NewCategory,
- NewNotification,
-} from '../../../interfaces';
-import { ContentType } from '../Bookmarks';
-
-// UI
-import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
-import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
import Button from '../../UI/Buttons/Button/Button';
-
-// CSS
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
+import { ContentType } from '../Bookmarks';
import classes from './BookmarkForm.module.css';
interface ComponentProps {
@@ -43,28 +22,28 @@ interface ComponentProps {
categories: Category[];
category?: Category;
bookmark?: Bookmark;
- addCategory: (formData: NewCategory) => void;
+ addBookmarkCategory: (formData: NewCategory) => void;
addBookmark: (formData: NewBookmark | FormData) => void;
- updateCategory: (id: number, formData: NewCategory) => void;
+ updateBookmarkCategory: (id: number, formData: NewCategory) => void;
updateBookmark: (
- id: number,
- formData: NewBookmark | FormData,
+ id: number,
+ formData: NewBookmark | FormData,
category: {
- prev: number;
- curr: number;
- }
- ) => void;
+ prev: number,
+ curr: number
+ }) => void;
createNotification: (notification: NewNotification) => void;
}
const BookmarkForm = (props: ComponentProps): JSX.Element => {
- const [useCustomIcon, toggleUseCustomIcon] = useState(false);
+ const [useCustomIcon, setUseCustomIcon] = useState(false);
const [customIcon, setCustomIcon] = useState(null);
- const [categoryName, setCategoryName] = useState({
+ const [categoryData, setCategoryData] = useState({
name: '',
- });
+ type: 'bookmarks'
+ })
- const [formData, setFormData] = useState({
+ const [bookmarkData, setBookmarkData] = useState({
name: '',
url: '',
categoryId: -1,
@@ -74,23 +53,23 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Load category data if provided for editing
useEffect(() => {
if (props.category) {
- setCategoryName({ name: props.category.name });
+ setCategoryData({ name: props.category.name, type: props.category.type });
} else {
- setCategoryName({ name: '' });
+ setCategoryData({ name: '', type: "bookmarks" });
}
}, [props.category]);
// Load bookmark data if provided for editing
useEffect(() => {
if (props.bookmark) {
- setFormData({
+ setBookmarkData({
name: props.bookmark.name,
url: props.bookmark.url,
categoryId: props.bookmark.categoryId,
icon: props.bookmark.icon,
});
} else {
- setFormData({
+ setBookmarkData({
name: '',
url: '',
categoryId: -1,
@@ -107,9 +86,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
if (customIcon) {
data.append('icon', customIcon);
}
- data.append('name', formData.name);
- data.append('url', formData.url);
- data.append('categoryId', `${formData.categoryId}`);
+ data.append('name', bookmarkData.name);
+ data.append('url', bookmarkData.url);
+ data.append('categoryId', `${bookmarkData.categoryId}`);
return data;
};
@@ -118,11 +97,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Add new
if (props.contentType === ContentType.category) {
// Add category
- props.addCategory(categoryName);
- setCategoryName({ name: '' });
+ props.addBookmarkCategory(categoryData);
+ setCategoryData({ name: '', type: 'bookmarks' });
} else if (props.contentType === ContentType.bookmark) {
// Add bookmark
- if (formData.categoryId === -1) {
+ if (bookmarkData.categoryId === -1) {
props.createNotification({
title: 'Error',
message: 'Please select category',
@@ -134,14 +113,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const data = createFormData();
props.addBookmark(data);
} else {
- props.addBookmark(formData);
+ props.addBookmark(bookmarkData);
}
-
- setFormData({
+
+ setBookmarkData({
name: '',
url: '',
- categoryId: formData.categoryId,
- icon: '',
+ categoryId: bookmarkData.categoryId,
+ icon: ''
});
// setCustomIcon(null);
@@ -150,24 +129,32 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
// Update
if (props.contentType === ContentType.category && props.category) {
// Update category
- props.updateCategory(props.category.id, categoryName);
- setCategoryName({ name: '' });
+ props.updateBookmarkCategory(props.category.id, categoryData);
+ setCategoryData({ name: '', type: 'bookmarks' });
} else if (props.contentType === ContentType.bookmark && props.bookmark) {
// Update bookmark
if (customIcon) {
const data = createFormData();
- props.updateBookmark(props.bookmark.id, data, {
- prev: props.bookmark.categoryId,
- curr: formData.categoryId,
- });
+ props.updateBookmark(
+ props.bookmark.id,
+ data,
+ {
+ prev: props.bookmark.categoryId,
+ curr: bookmarkData.categoryId
+ }
+ )
} else {
- props.updateBookmark(props.bookmark.id, formData, {
- prev: props.bookmark.categoryId,
- curr: formData.categoryId,
- });
+ props.updateBookmark(
+ props.bookmark.id,
+ bookmarkData,
+ {
+ prev: props.bookmark.categoryId,
+ curr: bookmarkData.categoryId
+ }
+ );
}
- setFormData({
+ setBookmarkData({
name: '',
url: '',
categoryId: -1,
@@ -181,18 +168,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
}
};
- const inputChangeHandler = (e: ChangeEvent): void => {
- setFormData({
- ...formData,
- [e.target.name]: e.target.value,
+ const inputChangeHandler = (e: ChangeEvent, setDataFunction: Dispatch>, data: any): void => {
+ setDataFunction({
+ ...data,
+ [e.target.name]: e.target.value
});
};
- const selectChangeHandler = (e: ChangeEvent): void => {
- setFormData({
- ...formData,
- categoryId: parseInt(e.target.value),
- });
+ const toggleUseCustomIcon = (): void => {
+ setUseCustomIcon(!useCustomIcon);
+ setCustomIcon(null);
};
const fileChangeHandler = (e: ChangeEvent): void => {
@@ -230,8 +215,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="categoryName"
placeholder="Social Media"
required
- value={categoryName.name}
- onChange={(e) => setCategoryName({ name: e.target.value })}
+ value={categoryData.name}
+ onChange={(e) => inputChangeHandler(e, setCategoryData, categoryData)}
/>
@@ -245,8 +230,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="name"
placeholder="Reddit"
required
- value={formData.name}
- onChange={(e) => inputChangeHandler(e)}
+ value={bookmarkData.name}
+ onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/>
@@ -257,8 +242,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
id="url"
placeholder="reddit.com"
required
- value={formData.url}
- onChange={(e) => inputChangeHandler(e)}
+ value={bookmarkData.url}
+ onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/>
{
name="categoryId"
id="categoryId"
required
- onChange={(e) => selectChangeHandler(e)}
- value={formData.categoryId}
+ value={bookmarkData.categoryId}
+ onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
>
{props.categories.map((category: Category): JSX.Element => {
@@ -295,12 +280,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
inputChangeHandler(e)}
+ type='text'
+ name='icon'
+ id='icon'
+ placeholder='book-open-outline'
+ value={bookmarkData.icon}
+ onChange={(e) => inputChangeHandler(e, setBookmarkData, bookmarkData)}
/>
Use icon name from MDI.
@@ -310,7 +295,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
toggleUseCustomIcon(!useCustomIcon)}
+ onClick={() => toggleUseCustomIcon()}
className={classes.Switch}
>
Switch to custom icon upload
@@ -328,10 +313,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
accept=".jpg,.jpeg,.png,.svg"
/>
{
- setCustomIcon(null);
- toggleUseCustomIcon(!useCustomIcon);
- }}
+ onClick={() => toggleUseCustomIcon()}
className={classes.Switch}
>
Switch to MDI
@@ -352,10 +334,10 @@ const mapStateToProps = (state: GlobalState) => {
};
const dispatchMap = {
- getCategories,
- addCategory,
+ getBookmarkCategories,
+ addBookmarkCategory,
addBookmark,
- updateCategory,
+ updateBookmarkCategory,
updateBookmark,
createNotification,
};
diff --git a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
index bf17c81..8a7db3b 100644
--- a/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
+++ b/client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx
@@ -1,10 +1,8 @@
import { Link } from 'react-router-dom';
-import classes from './BookmarkGrid.module.css';
-
import { Category } from '../../../interfaces';
-
import BookmarkCard from '../BookmarkCard/BookmarkCard';
+import classes from './BookmarkGrid.module.css';
interface ComponentProps {
categories: Category[];
@@ -37,7 +35,7 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
if (props.totalCategories) {
bookmarks = (
-
+
+
{(provided) => (
-
- {localCategories.map((category: Category, index): JSX.Element => {
- return (
-
{props.app.name}
- {displayUrl} +
+
+ )
+}
export default AppCard;
diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx
index d44418e..83dca72 100644
--- a/client/src/components/Apps/AppForm/AppForm.tsx
+++ b/client/src/components/Apps/AppForm/AppForm.tsx
@@ -1,59 +1,77 @@
-import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
+import { ChangeEvent, Dispatch, Fragment, SetStateAction, SyntheticEvent, useEffect, useState } from 'react';
import { connect } from 'react-redux';
-import { addApp, updateApp } from '../../../store/actions';
-import { App, NewApp } from '../../../interfaces';
-import classes from './AppForm.module.css';
-
-import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
-import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import { App, Category, GlobalState, NewApp, NewCategory, NewNotification } from '../../../interfaces';
+import {
+ addApp,
+ addAppCategory,
+ createNotification,
+ getAppCategories,
+ updateApp,
+ updateAppCategory,
+} from '../../../store/actions';
import Button from '../../UI/Buttons/Button/Button';
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
+import { ContentType } from '../Apps';
+import classes from './AppForm.module.css';
interface ComponentProps {
modalHandler: () => void;
- addApp: (formData: NewApp | FormData) => any;
- updateApp: (id: number, formData: NewApp | FormData) => any;
+ contentType: ContentType;
+ categories: Category[];
+ category?: Category;
app?: App;
+ addAppCategory: (formData: NewCategory) => void;
+ addApp: (formData: NewApp | FormData) => void;
+ updateAppCategory: (id: number, formData: NewCategory) => void;
+ updateApp: (id: number, formData: NewApp | FormData, previousCategoryId: number) => void;
+ createNotification: (notification: NewNotification) => void;
}
const AppForm = (props: ComponentProps): JSX.Element => {
const [useCustomIcon, toggleUseCustomIcon] = useState{props.category.name}
+
+ {props.apps.map((app: App) => {
+ const [displayUrl, redirectUrl] = urlParser(app.url);
+
+ let iconEl: JSX.Element;
+ const { icon } = app;
+
+ if (/.(jpeg|jpg|png)$/i.test(icon)) {
+ iconEl = (
+ 
+ );
+ } else if (/.(svg)$/i.test(icon)) {
+ iconEl = (
+
-
- );
-};
+
+ );
+ } else if (/.(svg)$/i.test(icon)) {
+ iconEl = (
+
+
+
+ );
+ } else {
+ iconEl = {iconEl}
+
+
+
+ )
+ })}
{app.name}
+ {displayUrl} +
- {props.apps.map((app: App): JSX.Element => {
- return app.categoryId === category.id)} />
})}
);
} else {
- if (props.totalApps) {
+ if (props.totalCategories) {
if (props.searching) {
apps = (
@@ -32,7 +33,7 @@ const AppGrid = (props: ComponentProps): JSX.Element => { } else { apps = (
- There are no pinned applications. You can pin them from the{' '} + There are no pinned application categories. You can pin them from the{' '} /applications menu
); @@ -40,7 +41,7 @@ const AppGrid = (props: ComponentProps): JSX.Element => { } else { apps = (- You don't have any applications. You can add a new one from{' '} + You don't have any applications. You can add a new one from the{' '} /applications menu
); diff --git a/client/src/components/Apps/AppTable/AppTable.tsx b/client/src/components/Apps/AppTable/AppTable.tsx index 6ef6e6c..eb97b84 100644 --- a/client/src/components/Apps/AppTable/AppTable.tsx +++ b/client/src/components/Apps/AppTable/AppTable.tsx @@ -1,73 +1,101 @@ -import { Fragment, KeyboardEvent, useState, useEffect } from 'react'; -import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; +import { Fragment, KeyboardEvent, useEffect, useState } from 'react'; +import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'; +import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; -// Redux -import { connect } from 'react-redux'; -import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions'; - -// Typescript -import { App, GlobalState, NewNotification } from '../../../interfaces'; - -// CSS -import classes from './AppTable.module.css'; - -// UI +import { App, Category, NewNotification } from '../../../interfaces'; +import { + createNotification, + deleteApp, + deleteAppCategory, + pinApp, + pinAppCategory, + reorderAppCategories, + reorderApps, + updateConfig, +} from '../../../store/actions'; +import { searchConfig } from '../../../utility'; import Icon from '../../UI/Icons/Icon/Icon'; import Table from '../../UI/Table/Table'; - -// Utils -import { searchConfig } from '../../../utility'; +import { ContentType } from '../Apps'; +import classes from './AppTable.module.css'; interface ComponentProps { + contentType: ContentType; + categories: Category[]; apps: App[]; + pinAppCategory: (category: Category) => void; + deleteAppCategory: (id: number) => void; + reorderAppCategories: (categories: Category[]) => void; + updateHandler: (data: Category | App) => void; pinApp: (app: App) => void; deleteApp: (id: number) => void; - updateAppHandler: (app: App) => void; reorderApps: (apps: App[]) => void; updateConfig: (formData: any) => void; createNotification: (notification: NewNotification) => void; } const AppTable = (props: ComponentProps): JSX.Element => { + const [localCategories, setLocalCategories] = useState
- {isCustomOrder
- ?
- You can drag and drop single rows to reorder application
- :Custom order is disabled. You can change it in settings
- } -| {app.name} | -{app.url} | -{app.icon} | - {!snapshot.isDragging && ( -
- deleteAppHandler(app)}
- onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
- tabIndex={0}>
-
- props.updateAppHandler(app)}
- onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
- tabIndex={0}>
-
- props.pinApp(app)}
- onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
- tabIndex={0}>
- {app.isPinned
- ?
- |
- )}
-
+ {isCustomOrder ? (
+
+ You can drag and drop single rows to reorder categories
+ ) : ( ++ Custom order is disabled. You can change it in{" "} + settings +
)} - - - - ) -} +| {category.name} | + {!snapshot.isDragging && ( +
+
+ deleteCategoryHandler(category)
+ }
+ onKeyDown={(e) =>
+ keyboardActionHandler(
+ e,
+ category,
+ deleteCategoryHandler
+ )
+ }
+ tabIndex={0}
+ >
+
+
+ props.updateHandler(category)
+ }
+ tabIndex={0}
+ >
+
+ props.pinAppCategory(category)}
+ onKeyDown={(e) =>
+ keyboardActionHandler(
+ e,
+ category,
+ props.pinAppCategory
+ )
+ }
+ tabIndex={0}
+ >
+ {category.isPinned ? (
+
+ |
+ )}
+
+ {isCustomOrder ? (
+
+ You can drag and drop single rows to reorder application
+ ) : ( ++ Custom order is disabled. You can change it in{" "} + settings +
+ )} +| {app.name} | +{app.url} | +{app.icon} | +{categoryName} | + {!snapshot.isDragging && ( +
+ deleteAppHandler(app)}
+ onKeyDown={(e) =>
+ keyboardActionHandler(
+ e,
+ app,
+ deleteAppHandler
+ )
+ }
+ tabIndex={0}
+ >
+
+ props.updateHandler(app)}
+ onKeyDown={(e) =>
+ keyboardActionHandler(
+ e,
+ app,
+ props.updateHandler
+ )
+ }
+ tabIndex={0}
+ >
+
+ props.pinApp(app)}
+ onKeyDown={(e) =>
+ keyboardActionHandler(e, app, props.pinApp)
+ }
+ tabIndex={0}
+ >
+ {app.isPinned ? (
+
+ |
+ )}
+
- addActionHandler(ContentType.category)} />
+ addActionHandler(ContentType.app)} />
+ editActionHandler(ContentType.category)} />
+ editActionHandler(ContentType.app)} />
-
- {loading ? (
-
+ {loading ? (
+ - There are no pinned categories. You can pin them from the{' '} + There are no pinned bookmark categories. You can pin them from the{' '} /bookmarks menu
); diff --git a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx index 02779d5..577b33f 100644 --- a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx +++ b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx @@ -1,34 +1,31 @@ -import { KeyboardEvent, useState, useEffect, Fragment } from 'react'; -import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; +import { Fragment, KeyboardEvent, useEffect, useState } from 'react'; +import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'; +import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; -// Redux -import { connect } from 'react-redux'; -import { pinCategory, deleteCategory, deleteBookmark, createNotification, reorderCategories } from '../../../store/actions'; - -// Typescript import { Bookmark, Category, NewNotification } from '../../../interfaces'; -import { ContentType } from '../Bookmarks'; - -// CSS -import classes from './BookmarkTable.module.css'; - -// UI -import Table from '../../UI/Table/Table'; -import Icon from '../../UI/Icons/Icon/Icon'; - -// Utils +import { + createNotification, + deleteBookmark, + deleteBookmarkCategory, + pinBookmarkCategory, + reorderBookmarkCategories, +} from '../../../store/actions'; import { searchConfig } from '../../../utility'; +import Icon from '../../UI/Icons/Icon/Icon'; +import Table from '../../UI/Table/Table'; +import { ContentType } from '../Bookmarks'; +import classes from './BookmarkTable.module.css'; interface ComponentProps { contentType: ContentType; categories: Category[]; - pinCategory: (category: Category) => void; - deleteCategory: (id: number) => void; + pinBookmarkCategory: (category: Category) => void; + deleteBookmarkCategory: (id: number) => void; updateHandler: (data: Category | Bookmark) => void; deleteBookmark: (bookmarkId: number, categoryId: number) => void; createNotification: (notification: NewNotification) => void; - reorderCategories: (categories: Category[]) => void; + reorderBookmarkCategories: (categories: Category[]) => void; } const BookmarkTable = (props: ComponentProps): JSX.Element => { @@ -38,45 +35,53 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => { // Copy categories array useEffect(() => { setLocalCategories([...props.categories]); - }, [props.categories]) + }, [props.categories]); // Check ordering useEffect(() => { - const order = searchConfig('useOrdering', ''); + const order = searchConfig("useOrdering", ""); - if (order === 'orderId') { + if (order === "orderId") { setIsCustomOrder(true); } - }) + }, []); const deleteCategoryHandler = (category: Category): void => { - const proceed = window.confirm(`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`); + const proceed = window.confirm( + `Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks` + ); if (proceed) { - props.deleteCategory(category.id); + props.deleteBookmarkCategory(category.id); } - } + }; const deleteBookmarkHandler = (bookmark: Bookmark): void => { - const proceed = window.confirm(`Are you sure you want to delete ${bookmark.name}?`); + const proceed = window.confirm( + `Are you sure you want to delete ${bookmark.name}?` + ); if (proceed) { props.deleteBookmark(bookmark.id, bookmark.categoryId); } - } + }; - const keyboardActionHandler = (e: KeyboardEvent, category: Category, handler: Function) => { - if (e.key === 'Enter') { + const keyboardActionHandler = ( + e: KeyboardEvent, + category: Category, + handler: Function + ) => { + if (e.key === "Enter") { handler(category); } - } + }; - const dragEndHanlder = (result: DropResult): void => { + const dragEndHandler = (result: DropResult): void => { if (!isCustomOrder) { props.createNotification({ - title: 'Error', - message: 'Custom order is disabled' - }) + title: "Error", + message: "Custom order is disabled", + }); return; } @@ -85,141 +90,170 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => { } const tmpCategories = [...localCategories]; - const [movedApp] = tmpCategories.splice(result.source.index, 1); - tmpCategories.splice(result.destination.index, 0, movedApp); + const [movedCategory] = tmpCategories.splice(result.source.index, 1); + tmpCategories.splice(result.destination.index, 0, movedCategory); setLocalCategories(tmpCategories); - props.reorderCategories(tmpCategories); - } + props.reorderBookmarkCategories(tmpCategories); + }; if (props.contentType === ContentType.category) { return (
- {isCustomOrder
- ?
- You can drag and drop single rows to reorder categories
- :Custom order is disabled. You can change it in settings
- } + {isCustomOrder ? ( +You can drag and drop single rows to reorder categories
+ ) : ( ++ Custom order is disabled. You can change it in{" "} + settings +
+ )}| {category.name} | - {!snapshot.isDragging && ( -
- deleteCategoryHandler(category)}
- onKeyDown={(e) => keyboardActionHandler(e, category, deleteCategoryHandler)}
- tabIndex={0}>
-
- props.updateHandler(category)}
- tabIndex={0}>
-
- props.pinCategory(category)}
- onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)}
- tabIndex={0}>
- {category.isPinned
- ?
- |
- )}
-
| {category.name} | + {!snapshot.isDragging && ( +
+
+ deleteCategoryHandler(category)
+ }
+ onKeyDown={(e) =>
+ keyboardActionHandler(
+ e,
+ category,
+ deleteCategoryHandler
+ )
+ }
+ tabIndex={0}
+ >
+
+
+ props.updateHandler(category)
+ }
+ tabIndex={0}
+ >
+
+ props.pinBookmarkCategory(category)}
+ onKeyDown={(e) =>
+ keyboardActionHandler(
+ e,
+ category,
+ props.pinBookmarkCategory
+ )
+ }
+ tabIndex={0}
+ >
+ {category.isPinned ? (
+
+ |
+ )}
+
| {bookmark.bookmark.name} | -{bookmark.bookmark.url} | -{bookmark.bookmark.icon} | -{bookmark.categoryName} | -
- deleteBookmarkHandler(bookmark.bookmark)}
- tabIndex={0}>
-
- props.updateHandler(bookmark.bookmark)}
- tabIndex={0}>
-
- |
-
| {bookmark.bookmark.name} | +{bookmark.bookmark.url} | +{bookmark.bookmark.icon} | +{bookmark.categoryName} | +
+ deleteBookmarkHandler(bookmark.bookmark)}
+ tabIndex={0}
+ >
+
+ props.updateHandler(bookmark.bookmark)}
+ tabIndex={0}
+ >
+
+ |
+