+
{this.props.notifications.map((n, i) => (
{n}
@@ -98,6 +91,7 @@ class App extends React.Component {
+
@@ -111,12 +105,7 @@ class App extends React.Component {
- {loginModalVisible && (
-
- )}
- {registerModalVisible && (
-
- )}
+ {modal && modal}
@@ -126,7 +115,8 @@ class App extends React.Component
{
export default connect(
(state: StoreState) => ({
- notifications: state.notifications
+ notifications: state.notifications,
+ modal: state.modal
}),
dispatch => ({
setUser: (userData: UserType) => {
diff --git a/src/components/Character/Character.sass b/src/pages/Character/Character.sass
old mode 100644
new mode 100755
similarity index 98%
rename from src/components/Character/Character.sass
rename to src/pages/Character/Character.sass
index eb40391..c114753
--- a/src/components/Character/Character.sass
+++ b/src/pages/Character/Character.sass
@@ -1,4 +1,4 @@
-@import '../Constants'
+@import '../../Constants'
.Character
.Character__Main
diff --git a/src/components/Character/Character.tsx b/src/pages/Character/Character.tsx
old mode 100644
new mode 100755
similarity index 95%
rename from src/components/Character/Character.tsx
rename to src/pages/Character/Character.tsx
index 4d10ae2..6ce5ba2
--- a/src/components/Character/Character.tsx
+++ b/src/pages/Character/Character.tsx
@@ -3,8 +3,8 @@ import {fetchChar, fetchCharNovels} from "../../api/characters";
import './Character.sass'
// @ts-ignore
import parser from 'bbcode-to-react';
-import NovelItem from "../NovelItem/NovelItem";
-import Loading from "../Loading";
+import NovelItem from "../../ui/NovelItem/NovelItem";
+import Loading from "../../ui/Loading";
import NotFoundError from "../NotFoundError";
type Props = {
diff --git a/src/components/Comment/Comments.sass b/src/pages/Comments/Comments.sass
old mode 100644
new mode 100755
similarity index 93%
rename from src/components/Comment/Comments.sass
rename to src/pages/Comments/Comments.sass
index 7f1ae3d..5e8c4ec
--- a/src/components/Comment/Comments.sass
+++ b/src/pages/Comments/Comments.sass
@@ -1,46 +1,46 @@
-@import '../Constants'
-
-.Comments
- margin-top: 1rem
- padding: $primaryPadding
- background-color: var(--sec-bg-color)
- border-radius: $borderRadius
-
- form
- width: 100%
- margin-bottom: .5rem
-
- .Comments_BBCodes
- font-size: 1.3rem
- margin-bottom: .2rem
-
- svg
- cursor: pointer
-
- svg:first-child
- padding-right: .5rem
-
- svg:last-child
- padding-left: .5rem
-
- svg:not(:first-child):not(:last-child)
- padding: 0 .5rem
-
- .Comments_TextArea
- width: 100%
- background-color: var(--block-color)
- font-size: 1rem
- padding: .25rem
- border: none
- border-radius: .2rem
- box-sizing: border-box
- min-height: 4rem
- resize: none
- margin-bottom: .5rem
-
- .Comments_Submit
- background-color: var(--block-color) !important
- border-radius: .2rem
- border: none
- font-size: 1rem
+@import '../../Constants'
+
+.Comments
+ margin-top: 1rem
+ padding: $primaryPadding
+ background-color: var(--sec-bg-color)
+ border-radius: $borderRadius
+
+ form
+ width: 100%
+ margin-bottom: .5rem
+
+ .Comments_BBCodes
+ font-size: 1.3rem
+ margin-bottom: .2rem
+
+ svg
+ cursor: pointer
+
+ svg:first-child
+ padding-right: .5rem
+
+ svg:last-child
+ padding-left: .5rem
+
+ svg:not(:first-child):not(:last-child)
+ padding: 0 .5rem
+
+ .Comments_TextArea
+ width: 100%
+ background-color: var(--block-color)
+ font-size: 1rem
+ padding: .25rem
+ border: none
+ border-radius: .2rem
+ box-sizing: border-box
+ min-height: 4rem
+ resize: none
+ margin-bottom: .5rem
+
+ .Comments_Submit
+ background-color: var(--block-color) !important
+ border-radius: .2rem
+ border: none
+ font-size: 1rem
padding: .5rem
\ No newline at end of file
diff --git a/src/components/Comment/Comments.tsx b/src/pages/Comments/Comments.tsx
old mode 100644
new mode 100755
similarity index 88%
rename from src/components/Comment/Comments.tsx
rename to src/pages/Comments/Comments.tsx
index af2544f..961394b
--- a/src/components/Comment/Comments.tsx
+++ b/src/pages/Comments/Comments.tsx
@@ -1,132 +1,133 @@
-import React from 'react';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBold, faExclamationTriangle, faItalic, faStrikethrough, faUnderline, faTint } from "@fortawesome/free-solid-svg-icons";
-import Comment from './Comment';
-import './Comments.sass';
-import Loading from "../Loading";
-import {fetchUser} from "../../api/users";
-import {connect} from "react-redux";
-import {addNotification} from "../../store/actions";
-import NotificationMessage from "../Notifications/NotificationMessage";
-
-type Props = {
- comments: CommentType[]
- hasMore: boolean
- user: UserType
- loadMore: () => void
- sendComment: (text: string) => void
- addNotification: (notification: React.ReactNode) => void
-};
-
-type State = {
- commentText: string
- users: Map
-};
-
-class Comments extends React.Component {
- input: HTMLTextAreaElement | null = null;
- state: State = {
- commentText: '', users: new Map()
- };
-
- addTagToComment = (event: React.MouseEvent, tag: string, defaultValue?: string) => {
- event.preventDefault();
- if(!this.input) {
- console.error('Input not initialized!');
- return;
- }
- let { commentText } = this.state;
- const [start, end] = [this.input.selectionStart, this.input.selectionEnd];
-
- const openTag = `${tag}${defaultValue ? `=${defaultValue}` : ''}`;
- this.setState({ commentText: `${commentText.slice(0, start)}[${openTag}]${commentText.slice(start, end)}[/${tag}]${commentText.slice(end, commentText.length)}` });
- this.input.focus();
- };
-
- sendComment = (event: React.FormEvent) => {
- event.preventDefault();
- const { sendComment, addNotification } = this.props;
- const { commentText } = this.state;
-
- if(commentText === '') {
- const notification = (
-
- Пустой комментарий
-
- );
- addNotification(notification);
- } else {
- sendComment(commentText);
- this.setState({ commentText: '' });
- }
- };
-
- componentDidUpdate(prevProps: Readonly) {
- const { comments } = this.props;
- const { comments: prevComments } = prevProps;
-
- if(prevComments.length !== comments.length) {
- let { users } = this.state;
-
- comments.forEach(async comment => {
- if(!users.has(comment.user_id)) {
- const user = await fetchUser(comment.user_id);
- users = users.set(comment.user_id, user);
- this.setState({ users });
- }
- });
- }
- }
-
- render() {
- const { user, comments, hasMore, loadMore } = this.props;
- const { users } = this.state;
- if(!user) return ;
-
- return (
-