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

Components: refactored rest of the components to use new state. Minor changes to exports, imports and props

Browse source
This commit is contained in:
Paweł Malak 2021-11-09 14:33:51 +01:00
parent 89d935e27f
commit 969bdb7d24
29 changed files with 462 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

77
client/src/components/Bookmarks/Bookmarks.tsx
View file

@ -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);