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

Bugfix for #83

Browse source
This commit is contained in:
unknown 2021-10-05 17:08:37 +02:00
parent bf1aa9e85c
commit 084218027c
3 changed files with 117 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -1,4 +1,5 @@
### v1.7.0 (TBA) ### 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)) - 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) ### v1.6.7 (2021-10-04)

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

@ -22,7 +22,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
const [formData, setFormData] = useState<NewApp>({ const [formData, setFormData] = useState<NewApp>({
name: '', name: '',
url: '', url: '',
icon: '' icon: '',
}); });
useEffect(() => { useEffect(() => {
@ -30,13 +30,13 @@ const AppForm = (props: ComponentProps): JSX.Element => {
setFormData({ setFormData({
name: props.app.name, name: props.app.name,
url: props.app.url, url: props.app.url,
icon: props.app.icon icon: props.app.icon,
}); });
} else { } else {
setFormData({ setFormData({
name: '', name: '',
url: '', url: '',
icon: '' icon: '',
}); });
} }
}, [props.app]); }, [props.app]);
@ -44,7 +44,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
setFormData({ setFormData({
...formData, ...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 createFormData = (): FormData => {
const data = new FormData(); const data = new FormData();
if (customIcon) { if (customIcon) {
data.append('icon', customIcon); data.append('icon', customIcon);
} }
@ -88,10 +89,8 @@ const AppForm = (props: ComponentProps): JSX.Element => {
setFormData({ setFormData({
name: '', name: '',
url: '', url: '',
icon: '' icon: '',
}); });
setCustomIcon(null);
}; };
return ( return (
@ -100,33 +99,33 @@ const AppForm = (props: ComponentProps): JSX.Element => {
formHandler={formSubmitHandler} formHandler={formSubmitHandler}
> >
<InputGroup> <InputGroup>
<label htmlFor='name'>App Name</label> <label htmlFor="name">App Name</label>
<input <input
type='text' type="text"
name='name' name="name"
id='name' id="name"
placeholder='Bookstack' placeholder="Bookstack"
required required
value={formData.name} value={formData.name}
onChange={e => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e)}
/> />
</InputGroup> </InputGroup>
<InputGroup> <InputGroup>
<label htmlFor='url'>App URL</label> <label htmlFor="url">App URL</label>
<input <input
type='text' type="text"
name='url' name="url"
id='url' id="url"
placeholder='bookstack.example.com' placeholder="bookstack.example.com"
required required
value={formData.url} value={formData.url}
onChange={e => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e)}
/> />
<span> <span>
<a <a
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks' href="https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks"
target='_blank' target="_blank"
rel='noreferrer' rel="noreferrer"
> >
{' '} {' '}
Check supported URL formats Check supported URL formats
@ -136,19 +135,19 @@ const AppForm = (props: ComponentProps): JSX.Element => {
{!useCustomIcon ? ( {!useCustomIcon ? (
// use mdi icon // use mdi icon
<InputGroup> <InputGroup>
<label htmlFor='icon'>App Icon</label> <label htmlFor="icon">App Icon</label>
<input <input
type='text' type="text"
name='icon' name="icon"
id='icon' id="icon"
placeholder='book-open-outline' placeholder="book-open-outline"
required required
value={formData.icon} value={formData.icon}
onChange={e => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e)}
/> />
<span> <span>
Use icon name from MDI. Use icon name from MDI.
<a href='https://materialdesignicons.com/' target='blank'> <a href="https://materialdesignicons.com/" target="blank">
{' '} {' '}
Click here for reference Click here for reference
</a> </a>
@ -163,17 +162,20 @@ const AppForm = (props: ComponentProps): JSX.Element => {
) : ( ) : (
// upload custom icon // upload custom icon
<InputGroup> <InputGroup>
<label htmlFor='icon'>App Icon</label> <label htmlFor="icon">App Icon</label>
<input <input
type='file' type="file"
name='icon' name="icon"
id='icon' id="icon"
required required
onChange={e => fileChangeHandler(e)} onChange={(e) => fileChangeHandler(e)}
accept='.jpg,.jpeg,.png,.svg' accept=".jpg,.jpeg,.png,.svg"
/> />
<span <span
onClick={() => toggleUseCustomIcon(!useCustomIcon)} onClick={() => {
setCustomIcon(null);
toggleUseCustomIcon(!useCustomIcon);
}}
className={classes.Switch} className={classes.Switch}
> >
Switch to MDI Switch to MDI

145
client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx
View file

@ -1,32 +1,40 @@
// React
import { import {
useState, useState,
SyntheticEvent, SyntheticEvent,
Fragment, Fragment,
ChangeEvent, ChangeEvent,
useEffect useEffect,
} from 'react'; } from 'react';
import { connect } from 'react-redux';
import ModalForm from '../../UI/Forms/ModalForm/ModalForm'; // Redux
import InputGroup from '../../UI/Forms/InputGroup/InputGroup'; import { connect } from 'react-redux';
import {
Bookmark,
Category,
GlobalState,
NewBookmark,
NewCategory,
NewNotification
} from '../../../interfaces';
import { ContentType } from '../Bookmarks';
import { import {
getCategories, getCategories,
addCategory, addCategory,
addBookmark, addBookmark,
updateCategory, updateCategory,
updateBookmark, updateBookmark,
createNotification createNotification,
} from '../../../store/actions'; } 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'; import Button from '../../UI/Buttons/Button/Button';
// CSS
import classes from './BookmarkForm.module.css'; import classes from './BookmarkForm.module.css';
interface ComponentProps { interface ComponentProps {
@ -53,14 +61,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false); const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
const [customIcon, setCustomIcon] = useState<File | null>(null); const [customIcon, setCustomIcon] = useState<File | null>(null);
const [categoryName, setCategoryName] = useState<NewCategory>({ const [categoryName, setCategoryName] = useState<NewCategory>({
name: '' name: '',
}); });
const [formData, setFormData] = useState<NewBookmark>({ const [formData, setFormData] = useState<NewBookmark>({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
icon: '' icon: '',
}); });
// Load category data if provided for editing // Load category data if provided for editing
@ -79,14 +87,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
name: props.bookmark.name, name: props.bookmark.name,
url: props.bookmark.url, url: props.bookmark.url,
categoryId: props.bookmark.categoryId, categoryId: props.bookmark.categoryId,
icon: props.bookmark.icon icon: props.bookmark.icon,
}); });
} else { } else {
setFormData({ setFormData({
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
icon: '' icon: '',
}); });
} }
}, [props.bookmark]); }, [props.bookmark]);
@ -117,7 +125,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
if (formData.categoryId === -1) { if (formData.categoryId === -1) {
props.createNotification({ props.createNotification({
title: 'Error', title: 'Error',
message: 'Please select category' message: 'Please select category',
}); });
return; return;
} }
@ -133,10 +141,10 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
name: '', name: '',
url: '', url: '',
categoryId: formData.categoryId, categoryId: formData.categoryId,
icon: '' icon: '',
}); });
setCustomIcon(null); // setCustomIcon(null);
} }
} else { } else {
// Update // Update
@ -150,12 +158,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const data = createFormData(); const data = createFormData();
props.updateBookmark(props.bookmark.id, data, { props.updateBookmark(props.bookmark.id, data, {
prev: props.bookmark.categoryId, prev: props.bookmark.categoryId,
curr: formData.categoryId curr: formData.categoryId,
}); });
} else { } else {
props.updateBookmark(props.bookmark.id, formData, { props.updateBookmark(props.bookmark.id, formData, {
prev: props.bookmark.categoryId, prev: props.bookmark.categoryId,
curr: formData.categoryId curr: formData.categoryId,
}); });
} }
@ -163,7 +171,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
name: '', name: '',
url: '', url: '',
categoryId: -1, categoryId: -1,
icon: '' icon: '',
}); });
setCustomIcon(null); setCustomIcon(null);
@ -176,14 +184,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => { const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
setFormData({ setFormData({
...formData, ...formData,
[e.target.name]: e.target.value [e.target.name]: e.target.value,
}); });
}; };
const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => { const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
setFormData({ setFormData({
...formData, ...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 ? ( {props.contentType === ContentType.category ? (
<Fragment> <Fragment>
<InputGroup> <InputGroup>
<label htmlFor='categoryName'>Category Name</label> <label htmlFor="categoryName">Category Name</label>
<input <input
type='text' type="text"
name='categoryName' name="categoryName"
id='categoryName' id="categoryName"
placeholder='Social Media' placeholder="Social Media"
required required
value={categoryName.name} value={categoryName.name}
onChange={e => setCategoryName({ name: e.target.value })} onChange={(e) => setCategoryName({ name: e.target.value })}
/> />
</InputGroup> </InputGroup>
</Fragment> </Fragment>
) : ( ) : (
<Fragment> <Fragment>
<InputGroup> <InputGroup>
<label htmlFor='name'>Bookmark Name</label> <label htmlFor="name">Bookmark Name</label>
<input <input
type='text' type="text"
name='name' name="name"
id='name' id="name"
placeholder='Reddit' placeholder="Reddit"
required required
value={formData.name} value={formData.name}
onChange={e => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e)}
/> />
</InputGroup> </InputGroup>
<InputGroup> <InputGroup>
<label htmlFor='url'>Bookmark URL</label> <label htmlFor="url">Bookmark URL</label>
<input <input
type='text' type="text"
name='url' name="url"
id='url' id="url"
placeholder='reddit.com' placeholder="reddit.com"
required required
value={formData.url} value={formData.url}
onChange={e => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e)}
/> />
<span> <span>
<a <a
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks' href="https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks"
target='_blank' target="_blank"
rel='noreferrer' rel="noreferrer"
> >
{' '} {' '}
Check supported URL formats Check supported URL formats
@ -264,12 +272,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
</span> </span>
</InputGroup> </InputGroup>
<InputGroup> <InputGroup>
<label htmlFor='categoryId'>Bookmark Category</label> <label htmlFor="categoryId">Bookmark Category</label>
<select <select
name='categoryId' name="categoryId"
id='categoryId' id="categoryId"
required required
onChange={e => selectChangeHandler(e)} onChange={(e) => selectChangeHandler(e)}
value={formData.categoryId} value={formData.categoryId}
> >
<option value={-1}>Select category</option> <option value={-1}>Select category</option>
@ -285,18 +293,18 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
{!useCustomIcon ? ( {!useCustomIcon ? (
// mdi // mdi
<InputGroup> <InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label> <label htmlFor="icon">Bookmark Icon (optional)</label>
<input <input
type='text' type="text"
name='icon' name="icon"
id='icon' id="icon"
placeholder='book-open-outline' placeholder="book-open-outline"
value={formData.icon} value={formData.icon}
onChange={e => inputChangeHandler(e)} onChange={(e) => inputChangeHandler(e)}
/> />
<span> <span>
Use icon name from MDI. Use icon name from MDI.
<a href='https://materialdesignicons.com/' target='blank'> <a href="https://materialdesignicons.com/" target="blank">
{' '} {' '}
Click here for reference Click here for reference
</a> </a>
@ -311,16 +319,19 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
) : ( ) : (
// custom // custom
<InputGroup> <InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label> <label htmlFor="icon">Bookmark Icon (optional)</label>
<input <input
type='file' type="file"
name='icon' name="icon"
id='icon' id="icon"
onChange={e => fileChangeHandler(e)} onChange={(e) => fileChangeHandler(e)}
accept='.jpg,.jpeg,.png,.svg' accept=".jpg,.jpeg,.png,.svg"
/> />
<span <span
onClick={() => toggleUseCustomIcon(!useCustomIcon)} onClick={() => {
setCustomIcon(null);
toggleUseCustomIcon(!useCustomIcon);
}}
className={classes.Switch} className={classes.Switch}
> >
Switch to MDI Switch to MDI
@ -336,7 +347,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const mapStateToProps = (state: GlobalState) => { const mapStateToProps = (state: GlobalState) => {
return { return {
categories: state.bookmark.categories categories: state.bookmark.categories,
}; };
}; };
@ -346,7 +357,7 @@ const dispatchMap = {
addBookmark, addBookmark,
updateCategory, updateCategory,
updateBookmark, updateBookmark,
createNotification createNotification,
}; };
export default connect(mapStateToProps, dispatchMap)(BookmarkForm); export default connect(mapStateToProps, dispatchMap)(BookmarkForm);