mirror of
https://github.com/pawelmalak/flame.git
synced 2025-08-05 02:45:18 +02:00
Components: refactored rest of the components to use new state. Minor changes to exports, imports and props
This commit is contained in:
Paweł Malak
parent
89d935e27f
commit
969bdb7d24
29 changed files with 462 additions and 733 deletions
|
|
@ -1,17 +1,23 @@
|
|||
import { Bookmark, Category, Config, GlobalState } from '../../../interfaces';
|
||||
import { Fragment } from 'react';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
import { State } from '../../../store/reducers';
|
||||
|
||||
import { Bookmark, Category } from '../../../interfaces';
|
||||
|
||||
import classes from './BookmarkCard.module.css';
|
||||
|
||||
import Icon from '../../UI/Icons/Icon/Icon';
|
||||
import { iconParser, urlParser } from '../../../utility';
|
||||
import { Fragment } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Icon } from '../../UI';
|
||||
|
||||
interface ComponentProps {
|
||||
import { iconParser, urlParser } from '../../../utility';
|
||||
|
||||
interface Props {
|
||||
category: Category;
|
||||
config: Config;
|
||||
}
|
||||
|
||||
const BookmarkCard = (props: ComponentProps): JSX.Element => {
|
||||
export const BookmarkCard = (props: Props): JSX.Element => {
|
||||
const { config } = useSelector((state: State) => state.config);
|
||||
|
||||
return (
|
||||
<div className={classes.BookmarkCard}>
|
||||
<h3>{props.category.name}</h3>
|
||||
|
|
@ -56,7 +62,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
|
|||
return (
|
||||
<a
|
||||
href={redirectUrl}
|
||||
target={props.config.bookmarksSameTab ? '' : '_blank'}
|
||||
target={config.bookmarksSameTab ? '' : '_blank'}
|
||||
rel="noreferrer"
|
||||
key={`bookmark-${bookmark.id}`}
|
||||
>
|
||||
|
|
@ -69,11 +75,3 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
config: state.config.config,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(BookmarkCard);
|
||||
|
|
|
|||
|
|
@ -8,94 +8,68 @@ import {
|
|||
} from 'react';
|
||||
|
||||
// Redux
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
getCategories,
|
||||
addCategory,
|
||||
addBookmark,
|
||||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification,
|
||||
} from '../../../store/actions';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
// 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 { ModalForm, InputGroup, Button } from '../../UI';
|
||||
|
||||
// CSS
|
||||
import classes from './BookmarkForm.module.css';
|
||||
import { newBookmarkTemplate, newCategoryTemplate } from '../../../utility';
|
||||
import { State } from '../../../store/reducers';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { actionCreators } from '../../../store';
|
||||
|
||||
interface ComponentProps {
|
||||
interface Props {
|
||||
modalHandler: () => void;
|
||||
contentType: ContentType;
|
||||
categories: Category[];
|
||||
category?: Category;
|
||||
bookmark?: Bookmark;
|
||||
addCategory: (formData: NewCategory) => void;
|
||||
addBookmark: (formData: NewBookmark | FormData) => void;
|
||||
updateCategory: (id: number, formData: NewCategory) => void;
|
||||
updateBookmark: (
|
||||
id: number,
|
||||
formData: NewBookmark | FormData,
|
||||
category: {
|
||||
prev: number;
|
||||
curr: number;
|
||||
}
|
||||
) => void;
|
||||
createNotification: (notification: NewNotification) => void;
|
||||
}
|
||||
|
||||
const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
||||
export const BookmarkForm = (props: Props): JSX.Element => {
|
||||
const { categories } = useSelector((state: State) => state.bookmarks);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
addCategory,
|
||||
addBookmark,
|
||||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification,
|
||||
} = bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
|
||||
const [customIcon, setCustomIcon] = useState<File | null>(null);
|
||||
const [categoryName, setCategoryName] = useState<NewCategory>({
|
||||
name: '',
|
||||
});
|
||||
const [categoryName, setCategoryName] =
|
||||
useState<NewCategory>(newCategoryTemplate);
|
||||
|
||||
const [formData, setFormData] = useState<NewBookmark>({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: '',
|
||||
});
|
||||
const [formData, setFormData] = useState<NewBookmark>(newBookmarkTemplate);
|
||||
|
||||
// Load category data if provided for editing
|
||||
useEffect(() => {
|
||||
if (props.category) {
|
||||
setCategoryName({ name: props.category.name });
|
||||
setCategoryName({ ...props.category });
|
||||
} else {
|
||||
setCategoryName({ name: '' });
|
||||
setCategoryName(newCategoryTemplate);
|
||||
}
|
||||
}, [props.category]);
|
||||
|
||||
// Load bookmark data if provided for editing
|
||||
useEffect(() => {
|
||||
if (props.bookmark) {
|
||||
setFormData({
|
||||
name: props.bookmark.name,
|
||||
url: props.bookmark.url,
|
||||
categoryId: props.bookmark.categoryId,
|
||||
icon: props.bookmark.icon,
|
||||
});
|
||||
setFormData({ ...props.bookmark });
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: '',
|
||||
});
|
||||
setFormData(newBookmarkTemplate);
|
||||
}
|
||||
}, [props.bookmark]);
|
||||
|
||||
|
|
@ -118,12 +92,12 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
// Add new
|
||||
if (props.contentType === ContentType.category) {
|
||||
// Add category
|
||||
props.addCategory(categoryName);
|
||||
setCategoryName({ name: '' });
|
||||
addCategory(categoryName);
|
||||
setCategoryName(newCategoryTemplate);
|
||||
} else if (props.contentType === ContentType.bookmark) {
|
||||
// Add bookmark
|
||||
if (formData.categoryId === -1) {
|
||||
props.createNotification({
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Please select category',
|
||||
});
|
||||
|
|
@ -132,16 +106,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
props.addBookmark(data);
|
||||
addBookmark(data);
|
||||
} else {
|
||||
props.addBookmark(formData);
|
||||
addBookmark(formData);
|
||||
}
|
||||
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
...newBookmarkTemplate,
|
||||
categoryId: formData.categoryId,
|
||||
icon: '',
|
||||
});
|
||||
|
||||
// setCustomIcon(null);
|
||||
|
|
@ -150,29 +122,24 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
// Update
|
||||
if (props.contentType === ContentType.category && props.category) {
|
||||
// Update category
|
||||
props.updateCategory(props.category.id, categoryName);
|
||||
setCategoryName({ name: '' });
|
||||
updateCategory(props.category.id, categoryName);
|
||||
setCategoryName(newCategoryTemplate);
|
||||
} else if (props.contentType === ContentType.bookmark && props.bookmark) {
|
||||
// Update bookmark
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
props.updateBookmark(props.bookmark.id, data, {
|
||||
updateBookmark(props.bookmark.id, data, {
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId,
|
||||
});
|
||||
} else {
|
||||
props.updateBookmark(props.bookmark.id, formData, {
|
||||
updateBookmark(props.bookmark.id, formData, {
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId,
|
||||
});
|
||||
}
|
||||
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: '',
|
||||
});
|
||||
setFormData(newBookmarkTemplate);
|
||||
|
||||
setCustomIcon(null);
|
||||
}
|
||||
|
|
@ -231,7 +198,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
placeholder="Social Media"
|
||||
required
|
||||
value={categoryName.name}
|
||||
onChange={(e) => setCategoryName({ name: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setCategoryName({ name: e.target.value, isPublic: !!!!!false })
|
||||
}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Fragment>
|
||||
|
|
@ -249,6 +218,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<label htmlFor="url">Bookmark URL</label>
|
||||
<input
|
||||
|
|
@ -271,6 +241,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<label htmlFor="categoryId">Bookmark Category</label>
|
||||
<select
|
||||
|
|
@ -281,7 +252,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
value={formData.categoryId}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
{categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
|
|
@ -290,6 +261,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
})}
|
||||
</select>
|
||||
</InputGroup>
|
||||
|
||||
{!useCustomIcon ? (
|
||||
// mdi
|
||||
<InputGroup>
|
||||
|
|
@ -344,20 +316,3 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
</ModalForm>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
categories: state.bookmark.categories,
|
||||
};
|
||||
};
|
||||
|
||||
const dispatchMap = {
|
||||
getCategories,
|
||||
addCategory,
|
||||
addBookmark,
|
||||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification,
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, dispatchMap)(BookmarkForm);
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ import classes from './BookmarkGrid.module.css';
|
|||
|
||||
import { Category } from '../../../interfaces';
|
||||
|
||||
import BookmarkCard from '../BookmarkCard/BookmarkCard';
|
||||
import { BookmarkCard } from '../BookmarkCard/BookmarkCard';
|
||||
|
||||
interface ComponentProps {
|
||||
interface Props {
|
||||
categories: Category[];
|
||||
totalCategories?: number;
|
||||
searching: boolean;
|
||||
}
|
||||
|
||||
const BookmarkGrid = (props: ComponentProps): JSX.Element => {
|
||||
export const BookmarkGrid = (props: Props): JSX.Element => {
|
||||
let bookmarks: JSX.Element;
|
||||
|
||||
if (props.categories.length > 0) {
|
||||
|
|
@ -53,5 +53,3 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
|
|||
|
||||
return bookmarks;
|
||||
};
|
||||
|
||||
export default BookmarkGrid;
|
||||
|
|
|
|||
|
|
@ -8,45 +8,39 @@ import {
|
|||
import { Link } from 'react-router-dom';
|
||||
|
||||
// Redux
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
pinCategory,
|
||||
deleteCategory,
|
||||
deleteBookmark,
|
||||
createNotification,
|
||||
reorderCategories,
|
||||
} from '../../../store/actions';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { State } from '../../../store/reducers';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { actionCreators } from '../../../store';
|
||||
|
||||
// Typescript
|
||||
import {
|
||||
Bookmark,
|
||||
Category,
|
||||
Config,
|
||||
GlobalState,
|
||||
NewNotification,
|
||||
} from '../../../interfaces';
|
||||
import { Bookmark, Category } 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';
|
||||
import { Table, Icon } from '../../UI';
|
||||
|
||||
interface ComponentProps {
|
||||
interface Props {
|
||||
contentType: ContentType;
|
||||
categories: Category[];
|
||||
config: Config;
|
||||
pinCategory: (category: Category) => void;
|
||||
deleteCategory: (id: number) => void;
|
||||
updateHandler: (data: Category | Bookmark) => void;
|
||||
deleteBookmark: (bookmarkId: number, categoryId: number) => void;
|
||||
createNotification: (notification: NewNotification) => void;
|
||||
reorderCategories: (categories: Category[]) => void;
|
||||
}
|
||||
|
||||
const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
||||
export const BookmarkTable = (props: Props): JSX.Element => {
|
||||
const { config } = useSelector((state: State) => state.config);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
pinCategory,
|
||||
deleteCategory,
|
||||
deleteBookmark,
|
||||
createNotification,
|
||||
reorderCategories,
|
||||
} = bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
const [localCategories, setLocalCategories] = useState<Category[]>([]);
|
||||
const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
|
||||
|
||||
|
|
@ -57,7 +51,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
|
||||
// Check ordering
|
||||
useEffect(() => {
|
||||
const order = props.config.useOrdering;
|
||||
const order = config.useOrdering;
|
||||
|
||||
if (order === 'orderId') {
|
||||
setIsCustomOrder(true);
|
||||
|
|
@ -70,7 +64,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
);
|
||||
|
||||
if (proceed) {
|
||||
props.deleteCategory(category.id);
|
||||
deleteCategory(category.id);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +74,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
);
|
||||
|
||||
if (proceed) {
|
||||
props.deleteBookmark(bookmark.id, bookmark.categoryId);
|
||||
deleteBookmark(bookmark.id, bookmark.categoryId);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -96,7 +90,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
|
||||
const dragEndHanlder = (result: DropResult): void => {
|
||||
if (!isCustomOrder) {
|
||||
props.createNotification({
|
||||
createNotification({
|
||||
title: 'Error',
|
||||
message: 'Custom order is disabled',
|
||||
});
|
||||
|
|
@ -112,7 +106,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
tmpCategories.splice(result.destination.index, 0, movedApp);
|
||||
|
||||
setLocalCategories(tmpCategories);
|
||||
props.reorderCategories(tmpCategories);
|
||||
reorderCategories(tmpCategories);
|
||||
};
|
||||
|
||||
if (props.contentType === ContentType.category) {
|
||||
|
|
@ -186,12 +180,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
</div>
|
||||
<div
|
||||
className={classes.TableAction}
|
||||
onClick={() => props.pinCategory(category)}
|
||||
onClick={() => pinCategory(category)}
|
||||
onKeyDown={(e) =>
|
||||
keyboardActionHandler(
|
||||
e,
|
||||
category,
|
||||
props.pinCategory
|
||||
pinCategory
|
||||
)
|
||||
}
|
||||
tabIndex={0}
|
||||
|
|
@ -265,19 +259,3 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
|
|||
);
|
||||
}
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
config: state.config.config,
|
||||
};
|
||||
};
|
||||
|
||||
const actions = {
|
||||
pinCategory,
|
||||
deleteCategory,
|
||||
deleteBookmark,
|
||||
createNotification,
|
||||
reorderCategories,
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, actions)(BookmarkTable);
|
||||
|
|
|
|||
|
|
@ -1,25 +1,30 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import { getCategories } from '../../store/actions';
|
||||
|
||||
// Redux
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { State } from '../../store/reducers';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { actionCreators } from '../../store';
|
||||
|
||||
// Typescript
|
||||
import { Category, Bookmark } from '../../interfaces';
|
||||
|
||||
// CSS
|
||||
import classes from './Bookmarks.module.css';
|
||||
|
||||
import { Container } from '../UI/Layout/Layout';
|
||||
import Headline from '../UI/Headlines/Headline/Headline';
|
||||
import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
|
||||
// UI
|
||||
import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
|
||||
|
||||
import BookmarkGrid from './BookmarkGrid/BookmarkGrid';
|
||||
import { Category, GlobalState, Bookmark } from '../../interfaces';
|
||||
import Spinner from '../UI/Spinner/Spinner';
|
||||
import Modal from '../UI/Modal/Modal';
|
||||
import BookmarkForm from './BookmarkForm/BookmarkForm';
|
||||
import BookmarkTable from './BookmarkTable/BookmarkTable';
|
||||
// Components
|
||||
import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
|
||||
import { BookmarkForm } from './BookmarkForm/BookmarkForm';
|
||||
import { BookmarkTable } from './BookmarkTable/BookmarkTable';
|
||||
|
||||
interface ComponentProps {
|
||||
loading: boolean;
|
||||
categories: Category[];
|
||||
getCategories: () => void;
|
||||
// Utils
|
||||
import { bookmarkTemplate, categoryTemplate } from '../../utility';
|
||||
|
||||
interface Props {
|
||||
searching: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -28,8 +33,15 @@ export enum ContentType {
|
|||
bookmark,
|
||||
}
|
||||
|
||||
const Bookmarks = (props: ComponentProps): JSX.Element => {
|
||||
const { getCategories, categories, loading, searching = false } = props;
|
||||
export const Bookmarks = (props: Props): JSX.Element => {
|
||||
const { loading, categories } = useSelector(
|
||||
(state: State) => state.bookmarks
|
||||
);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { getCategories } = bindActionCreators(actionCreators, dispatch);
|
||||
|
||||
const { searching = false } = props;
|
||||
|
||||
const [modalIsOpen, setModalIsOpen] = useState(false);
|
||||
const [formContentType, setFormContentType] = useState(ContentType.category);
|
||||
|
|
@ -38,24 +50,10 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
|
|||
ContentType.category
|
||||
);
|
||||
const [isInUpdate, setIsInUpdate] = useState(false);
|
||||
const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
|
||||
name: '',
|
||||
id: -1,
|
||||
isPinned: false,
|
||||
orderId: 0,
|
||||
bookmarks: [],
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
const [bookmarkInUpdate, setBookmarkInUpdate] = useState<Bookmark>({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: '',
|
||||
id: -1,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
});
|
||||
const [categoryInUpdate, setCategoryInUpdate] =
|
||||
useState<Category>(categoryTemplate);
|
||||
const [bookmarkInUpdate, setBookmarkInUpdate] =
|
||||
useState<Bookmark>(bookmarkTemplate);
|
||||
|
||||
useEffect(() => {
|
||||
if (categories.length === 0) {
|
||||
|
|
@ -161,12 +159,3 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
|
|||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
loading: state.bookmark.loading,
|
||||
categories: state.bookmark.categories,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, { getCategories })(Bookmarks);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue