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

Custom icons for bookmarks

Browse source
This commit is contained in:
unknown 2021-07-28 12:36:03 +02:00
parent 1fbe0746a4
commit a5d6cf04cf
9 changed files with 169 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -1,3 +1,7 @@
### v1.6.1 (2021-07-28)
- Added option to upload custom icons for bookmarks ([#52](https://github.com/pawelmalak/flame/issues/52))
- Fixed custom icons not updating ([#58](https://github.com/pawelmalak/flame/issues/58))
### v1.6 (2021-07-17)
- Added support for Steam URLs ([#62](https://github.com/pawelmalak/flame/issues/62))
- Fixed bug with custom CSS not persisting ([#64](https://github.com/pawelmalak/flame/issues/64))

2
client/.env
View file

@ -1 +1 @@
REACT_APP_VERSION=1.6.0
REACT_APP_VERSION=1.6.1

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

@ -1,4 +1,4 @@
import { useState, useEffect, useRef, ChangeEvent, SyntheticEvent } from 'react';
import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
import { connect } from 'react-redux';
import { addApp, updateApp } from '../../../store/actions';
import { App, NewApp } from '../../../interfaces';
@ -25,14 +25,6 @@ const AppForm = (props: ComponentProps): JSX.Element => {
icon: ''
});
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, [inputRef])
useEffect(() => {
if (props.app) {
setFormData({
@ -98,6 +90,8 @@ const AppForm = (props: ComponentProps): JSX.Element => {
url: '',
icon: ''
})
setCustomIcon(null);
}
return (
@ -115,7 +109,6 @@ const AppForm = (props: ComponentProps): JSX.Element => {
required
value={formData.name}
onChange={(e) => inputChangeHandler(e)}
ref={inputRef}
/>
</InputGroup>
<InputGroup>

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

@ -24,7 +24,14 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
key={`bookmark-${bookmark.id}`}>
{bookmark.icon && (
<div className={classes.BookmarkIcon}>
<Icon icon={iconParser(bookmark.icon)} />
{(/.(jpeg|jpg|png)$/i).test(bookmark.icon)
? <img
src={`/uploads/${bookmark.icon}`}
alt={`${bookmark.name} icon`}
className={classes.CustomIcon}
/>
: <Icon icon={iconParser(bookmark.icon)} />
}
</div>
)}
{bookmark.name}

7
client/src/components/Bookmarks/BookmarkForm/BookmarkForm.module.css Normal file
View file

@ -0,0 +1,7 @@
.Switch {
text-decoration: underline;
}
.Switch:hover {
cursor: pointer;
}

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

@ -7,6 +7,7 @@ import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotificat
import { ContentType } from '../Bookmarks';
import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions';
import Button from '../../UI/Buttons/Button/Button';
import classes from './BookmarkForm.module.css';
interface ComponentProps {
modalHandler: () => void;
@ -15,13 +16,22 @@ interface ComponentProps {
category?: Category;
bookmark?: Bookmark;
addCategory: (formData: NewCategory) => void;
addBookmark: (formData: NewBookmark) => void;
addBookmark: (formData: NewBookmark | FormData) => void;
updateCategory: (id: number, formData: NewCategory) => void;
updateBookmark: (id: number, formData: NewBookmark, previousCategoryId: number) => void;
updateBookmark: (
id: number,
formData: NewBookmark | FormData,
category: {
prev: number,
curr: number
}
) => void;
createNotification: (notification: NewNotification) => void;
}
const BookmarkForm = (props: ComponentProps): JSX.Element => {
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
const [customIcon, setCustomIcon] = useState<File | null>(null);
const [categoryName, setCategoryName] = useState<NewCategory>({
name: ''
})
@ -64,6 +74,18 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
e.preventDefault();
const createFormData = (): FormData => {
const data = new FormData();
if (customIcon) {
data.append('icon', customIcon);
}
data.append('name', formData.name);
data.append('url', formData.url);
data.append('categoryId', `${formData.categoryId}`);
return data;
}
if (!props.category && !props.bookmark) {
// Add new
if (props.contentType === ContentType.category) {
@ -80,13 +102,21 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
return;
}
props.addBookmark(formData);
if (customIcon) {
const data = createFormData();
props.addBookmark(data);
} else {
props.addBookmark(formData);
}
setFormData({
name: '',
url: '',
categoryId: formData.categoryId,
icon: ''
})
setCustomIcon(null)
}
} else {
// Update
@ -96,13 +126,35 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
setCategoryName({ name: '' });
} else if (props.contentType === ContentType.bookmark && props.bookmark) {
// Update bookmark
props.updateBookmark(props.bookmark.id, formData, props.bookmark.categoryId);
if (customIcon) {
const data = createFormData();
props.updateBookmark(
props.bookmark.id,
data,
{
prev: props.bookmark.categoryId,
curr: formData.categoryId
}
)
} else {
props.updateBookmark(
props.bookmark.id,
formData,
{
prev: props.bookmark.categoryId,
curr: formData.categoryId
}
);
}
setFormData({
name: '',
url: '',
categoryId: -1,
icon: ''
})
setCustomIcon(null)
}
props.modalHandler();
@ -123,6 +175,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
})
}
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
if (e.target.files) {
setCustomIcon(e.target.files[0]);
}
}
let button = <Button>Submit</Button>
if (!props.category && !props.bookmark) {
@ -216,25 +274,49 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
})}
</select>
</InputGroup>
<InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label>
<input
type='text'
name='icon'
id='icon'
placeholder='book-open-outline'
value={formData.icon}
onChange={(e) => inputChangeHandler(e)}
/>
<span>
Use icon name from MDI.
<a
href='https://materialdesignicons.com/'
target='blank'>
{' '}Click here for reference
</a>
</span>
</InputGroup>
{!useCustomIcon
// mdi
? (<InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label>
<input
type='text'
name='icon'
id='icon'
placeholder='book-open-outline'
value={formData.icon}
onChange={(e) => inputChangeHandler(e)}
/>
<span>
Use icon name from MDI.
<a
href='https://materialdesignicons.com/'
target='blank'>
{' '}Click here for reference
</a>
</span>
<span
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}>
Switch to custom icon upload
</span>
</InputGroup>)
// custom
: (<InputGroup>
<label htmlFor='icon'>Bookmark Icon (optional)</label>
<input
type='file'
name='icon'
id='icon'
onChange={(e) => fileChangeHandler(e)}
accept='.jpg,.jpeg,.png'
/>
<span
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
className={classes.Switch}>
Switch to MDI
</span>
</InputGroup>)
}
</Fragment>
)
}

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

@ -69,15 +69,15 @@ export interface AddBookmarkAction {
payload: Bookmark
}
export const addBookmark = (formData: NewBookmark) => async (dispatch: Dispatch) => {
export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch: Dispatch) => {
try {
const res = await axios.post<ApiResponse<Bookmark>>('/api/bookmarks', formData);
console.log(res.data.data)
dispatch<CreateNotificationAction>({
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Bookmark ${formData.name} created`
message: `Bookmark created`
}
})
@ -225,7 +225,14 @@ export interface UpdateBookmarkAction {
payload: Bookmark
}
export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previousCategoryId: number) => async (dispatch: Dispatch) => {
export const updateBookmark = (
bookmarkId: number,
formData: NewBookmark | FormData,
category: {
prev: number,
curr: number
}
) => async (dispatch: Dispatch) => {
try {
const res = await axios.put<ApiResponse<Bookmark>>(`/api/bookmarks/${bookmarkId}`, formData);
@ -233,12 +240,12 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
type: ActionTypes.createNotification,
payload: {
title: 'Success',
message: `Bookmark ${formData.name} updated`
message: `Bookmark updated`
}
})
// Check if category was changed
const categoryWasChanged = formData.categoryId !== previousCategoryId;
const categoryWasChanged = category.curr !== category.prev;
if (categoryWasChanged) {
// Delete bookmark from old category
@ -246,7 +253,7 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
type: ActionTypes.deleteBookmark,
payload: {
bookmarkId,
categoryId: previousCategoryId
categoryId: category.prev
}
})
@ -256,7 +263,7 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
payload: res.data.data
})
} else {
// Else update only name/url
// Else update only name/url/icon
dispatch<UpdateBookmarkAction>({
type: ActionTypes.updateBookmark,
payload: res.data.data

24
controllers/bookmark.js
View file

@ -7,7 +7,18 @@ const { Sequelize } = require('sequelize');
// @route POST /api/bookmarks
// @access Public
exports.createBookmark = asyncWrapper(async (req, res, next) => {
const bookmark = await Bookmark.create(req.body);
let bookmark;
let _body = {
...req.body,
categoryId: parseInt(req.body.categoryId)
};
if (req.file) {
_body.icon = req.file.filename;
}
bookmark = await Bookmark.create(_body);
res.status(201).json({
success: true,
@ -59,7 +70,16 @@ exports.updateBookmark = asyncWrapper(async (req, res, next) => {
return next(new ErrorResponse(`Bookmark with id of ${req.params.id} was not found`, 404));
}
bookmark = await bookmark.update({ ...req.body });
let _body = {
...req.body,
categoryId: parseInt(req.body.categoryId)
};
if (req.file) {
_body.icon = req.file.filename;
}
bookmark = await bookmark.update(_body);
res.status(200).json({
success: true,

5
routes/bookmark.js
View file

@ -1,5 +1,6 @@
const express = require('express');
const router = express.Router();
const upload = require('../middleware/multer');
const {
createBookmark,
@ -11,13 +12,13 @@ const {
router
.route('/')
.post(createBookmark)
.post(upload, createBookmark)
.get(getBookmarks);
router
.route('/:id')
.get(getBookmark)
.put(updateBookmark)
.put(upload, updateBookmark)
.delete(deleteBookmark);
module.exports = router;