diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d81511..9384559 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ### v1.7.0 (TBA) +- Fixed bug related to creating new apps/bookmarks with custom icon ([#83](https://github.com/pawelmalak/flame/issues/83)) - URL can now be assigned to notifications. Clicking on "New version is available" popup will now redirect to changelog ([#86](https://github.com/pawelmalak/flame/issues/86)) ### v1.6.7 (2021-10-04) diff --git a/client/src/components/Apps/AppForm/AppForm.tsx b/client/src/components/Apps/AppForm/AppForm.tsx index 5d05f0a..d44418e 100644 --- a/client/src/components/Apps/AppForm/AppForm.tsx +++ b/client/src/components/Apps/AppForm/AppForm.tsx @@ -22,7 +22,7 @@ const AppForm = (props: ComponentProps): JSX.Element => { const [formData, setFormData] = useState({ name: '', url: '', - icon: '' + icon: '', }); useEffect(() => { @@ -30,13 +30,13 @@ const AppForm = (props: ComponentProps): JSX.Element => { setFormData({ name: props.app.name, url: props.app.url, - icon: props.app.icon + icon: props.app.icon, }); } else { setFormData({ name: '', url: '', - icon: '' + icon: '', }); } }, [props.app]); @@ -44,7 +44,7 @@ const AppForm = (props: ComponentProps): JSX.Element => { const inputChangeHandler = (e: ChangeEvent): void => { setFormData({ ...formData, - [e.target.name]: e.target.value + [e.target.name]: e.target.value, }); }; @@ -59,6 +59,7 @@ const AppForm = (props: ComponentProps): JSX.Element => { const createFormData = (): FormData => { const data = new FormData(); + if (customIcon) { data.append('icon', customIcon); } @@ -88,10 +89,8 @@ const AppForm = (props: ComponentProps): JSX.Element => { setFormData({ name: '', url: '', - icon: '' + icon: '', }); - - setCustomIcon(null); }; return ( @@ -100,33 +99,33 @@ const AppForm = (props: ComponentProps): JSX.Element => { formHandler={formSubmitHandler} > - + inputChangeHandler(e)} + onChange={(e) => inputChangeHandler(e)} /> - + inputChangeHandler(e)} + onChange={(e) => inputChangeHandler(e)} /> {' '} Check supported URL formats @@ -136,19 +135,19 @@ const AppForm = (props: ComponentProps): JSX.Element => { {!useCustomIcon ? ( // use mdi icon - + inputChangeHandler(e)} + onChange={(e) => inputChangeHandler(e)} /> Use icon name from MDI. - + {' '} Click here for reference @@ -163,17 +162,20 @@ const AppForm = (props: ComponentProps): JSX.Element => { ) : ( // upload custom icon - + fileChangeHandler(e)} - accept='.jpg,.jpeg,.png,.svg' + onChange={(e) => fileChangeHandler(e)} + accept=".jpg,.jpeg,.png,.svg" /> toggleUseCustomIcon(!useCustomIcon)} + onClick={() => { + setCustomIcon(null); + toggleUseCustomIcon(!useCustomIcon); + }} className={classes.Switch} > Switch to MDI diff --git a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx index 10d6de2..5162c89 100644 --- a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx +++ b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx @@ -1,32 +1,40 @@ +// React import { useState, SyntheticEvent, Fragment, ChangeEvent, - useEffect + useEffect, } from 'react'; -import { connect } from 'react-redux'; -import ModalForm from '../../UI/Forms/ModalForm/ModalForm'; -import InputGroup from '../../UI/Forms/InputGroup/InputGroup'; -import { - Bookmark, - Category, - GlobalState, - NewBookmark, - NewCategory, - NewNotification -} from '../../../interfaces'; -import { ContentType } from '../Bookmarks'; +// Redux +import { connect } from 'react-redux'; import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, - createNotification + createNotification, } 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 classes from './BookmarkForm.module.css'; interface ComponentProps { @@ -53,14 +61,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { const [useCustomIcon, toggleUseCustomIcon] = useState(false); const [customIcon, setCustomIcon] = useState(null); const [categoryName, setCategoryName] = useState({ - name: '' + name: '', }); const [formData, setFormData] = useState({ name: '', url: '', categoryId: -1, - icon: '' + icon: '', }); // Load category data if provided for editing @@ -79,14 +87,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { name: props.bookmark.name, url: props.bookmark.url, categoryId: props.bookmark.categoryId, - icon: props.bookmark.icon + icon: props.bookmark.icon, }); } else { setFormData({ name: '', url: '', categoryId: -1, - icon: '' + icon: '', }); } }, [props.bookmark]); @@ -117,7 +125,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { if (formData.categoryId === -1) { props.createNotification({ title: 'Error', - message: 'Please select category' + message: 'Please select category', }); return; } @@ -133,10 +141,10 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { name: '', url: '', categoryId: formData.categoryId, - icon: '' + icon: '', }); - setCustomIcon(null); + // setCustomIcon(null); } } else { // Update @@ -150,12 +158,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { const data = createFormData(); props.updateBookmark(props.bookmark.id, data, { prev: props.bookmark.categoryId, - curr: formData.categoryId + curr: formData.categoryId, }); } else { props.updateBookmark(props.bookmark.id, formData, { prev: props.bookmark.categoryId, - curr: formData.categoryId + curr: formData.categoryId, }); } @@ -163,7 +171,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { name: '', url: '', categoryId: -1, - icon: '' + icon: '', }); setCustomIcon(null); @@ -176,14 +184,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { const inputChangeHandler = (e: ChangeEvent): void => { setFormData({ ...formData, - [e.target.name]: e.target.value + [e.target.name]: e.target.value, }); }; const selectChangeHandler = (e: ChangeEvent): void => { setFormData({ ...formData, - categoryId: parseInt(e.target.value) + categoryId: parseInt(e.target.value), }); }; @@ -215,48 +223,48 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { {props.contentType === ContentType.category ? ( - + setCategoryName({ name: e.target.value })} + onChange={(e) => setCategoryName({ name: e.target.value })} /> ) : ( - + inputChangeHandler(e)} + onChange={(e) => inputChangeHandler(e)} /> - + inputChangeHandler(e)} + onChange={(e) => inputChangeHandler(e)} /> {' '} Check supported URL formats @@ -264,12 +272,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { - + inputChangeHandler(e)} + onChange={(e) => inputChangeHandler(e)} /> Use icon name from MDI. - + {' '} Click here for reference @@ -311,16 +319,19 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { ) : ( // custom - + fileChangeHandler(e)} - accept='.jpg,.jpeg,.png,.svg' + type="file" + name="icon" + id="icon" + onChange={(e) => fileChangeHandler(e)} + accept=".jpg,.jpeg,.png,.svg" /> toggleUseCustomIcon(!useCustomIcon)} + onClick={() => { + setCustomIcon(null); + toggleUseCustomIcon(!useCustomIcon); + }} className={classes.Switch} > Switch to MDI @@ -336,7 +347,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { const mapStateToProps = (state: GlobalState) => { return { - categories: state.bookmark.categories + categories: state.bookmark.categories, }; }; @@ -346,7 +357,7 @@ const dispatchMap = { addBookmark, updateCategory, updateBookmark, - createNotification + createNotification, }; export default connect(mapStateToProps, dispatchMap)(BookmarkForm);