From 9beee8f833e634853326e62ea979f3ad2f115b21 Mon Sep 17 00:00:00 2001 From: Nix13 Date: Sat, 25 Apr 2020 18:46:23 +0300 Subject: [PATCH] Many new --- .env | 0 .gitignore | 0 package-lock.json | 0 package.json | 101 +++++++++--------- public/favicon.png | Bin public/index.html | 0 public/manifest.json | 0 public/robots.txt | 0 .../static/icons/android-chrome-192x192.png | Bin .../static/icons/android-chrome-512x512.png | Bin public/static/icons/apple-touch-icon.png | Bin public/static/icons/favicon-16x16.png | Bin public/static/icons/favicon-32x32.png | Bin public/static/icons/favicon.ico | Bin public/static/icons/mstile-150x150.png | Bin public/static/img/no-image.png | Bin src/api/api.ts | 0 src/api/characters.ts | 0 src/api/errors.ts | 0 src/api/news.ts | 6 ++ src/api/novels.ts | 2 +- src/api/users.ts | 0 src/components/ActivateAccount.tsx | 0 src/components/AdminPanel/Main/AdminPanel.tsx | 30 ++++++ src/components/App/App.sass | 0 src/components/App/App.tsx | 14 ++- src/components/Character/Character.sass | 0 src/components/Character/Character.tsx | 0 src/components/Comment/Comment.sass | 0 src/components/Comment/Comment.tsx | 0 src/components/Comment/Comments.sass | 0 src/components/Comment/Comments.tsx | 0 src/components/Constants.sass | 0 src/components/Footer/Footer.sass | 0 src/components/Footer/Footer.tsx | 67 +++++++----- src/components/Loading.tsx | 0 src/components/LoginModal/LoginModal.sass | 0 src/components/LoginModal/LoginModal.tsx | 0 src/components/LoginModal/RegisterModal.sass | 0 src/components/LoginModal/RegisterModal.tsx | 4 + src/components/Main/Main.sass | 31 ++++++ src/components/Main/Main.tsx | 6 +- src/components/Main/News.tsx | 47 ++++++++ src/components/Modal/Modal.sass | 0 src/components/Modal/Modal.tsx | 0 src/components/Navbar/Navbar.sass | 0 src/components/Navbar/Navbar.tsx | 0 src/components/News/AllNews.tsx | 23 ++++ src/components/News/Post.sass | 11 ++ src/components/News/Post.tsx | 49 +++++++++ src/components/NotFoundError.tsx | 0 src/components/Notification/Notification.sass | 0 src/components/Notification/Notification.tsx | 0 src/components/Novel/Novel.sass | 16 +++ src/components/Novel/Novel.tsx | 21 +++- src/components/NovelItem/NovelItem.sass | 0 src/components/NovelItem/NovelItem.tsx | 0 src/components/Novels/Novels.sass | 0 src/components/Novels/Novels.tsx | 17 ++- src/components/Spoiler/Spoiler.sass | 0 src/components/Spoiler/Spoiler.tsx | 0 src/components/Spoiler/SpoilerTag.tsx | 0 src/components/Tags/ColorTag.tsx | 0 src/components/User/Novels/UserNovels.sass | 0 src/components/User/Novels/UserNovels.tsx | 0 src/components/User/User.sass | 30 +++--- src/components/User/User.tsx | 19 ++-- src/index.tsx | 0 src/react-app-env.d.ts | 0 src/serviceWorker.ts | 0 src/store/actionTypes.ts | 0 src/store/actions.ts | 0 src/store/reducers/currentUser.ts | 0 src/store/reducers/index.ts | 0 src/store/reducers/notifications.ts | 0 src/store/store.ts | 3 +- src/types.d.ts | 18 ++++ src/utils.ts | 7 +- tsconfig.json | 0 79 files changed, 409 insertions(+), 113 deletions(-) mode change 100755 => 100644 .env mode change 100755 => 100644 .gitignore mode change 100755 => 100644 package-lock.json mode change 100755 => 100644 package.json mode change 100755 => 100644 public/favicon.png mode change 100755 => 100644 public/index.html mode change 100755 => 100644 public/manifest.json mode change 100755 => 100644 public/robots.txt mode change 100755 => 100644 public/static/icons/android-chrome-192x192.png mode change 100755 => 100644 public/static/icons/android-chrome-512x512.png mode change 100755 => 100644 public/static/icons/apple-touch-icon.png mode change 100755 => 100644 public/static/icons/favicon-16x16.png mode change 100755 => 100644 public/static/icons/favicon-32x32.png mode change 100755 => 100644 public/static/icons/favicon.ico mode change 100755 => 100644 public/static/icons/mstile-150x150.png mode change 100755 => 100644 public/static/img/no-image.png mode change 100755 => 100644 src/api/api.ts mode change 100755 => 100644 src/api/characters.ts mode change 100755 => 100644 src/api/errors.ts create mode 100644 src/api/news.ts mode change 100755 => 100644 src/api/novels.ts mode change 100755 => 100644 src/api/users.ts mode change 100755 => 100644 src/components/ActivateAccount.tsx create mode 100644 src/components/AdminPanel/Main/AdminPanel.tsx mode change 100755 => 100644 src/components/App/App.sass mode change 100755 => 100644 src/components/App/App.tsx mode change 100755 => 100644 src/components/Character/Character.sass mode change 100755 => 100644 src/components/Character/Character.tsx mode change 100755 => 100644 src/components/Comment/Comment.sass mode change 100755 => 100644 src/components/Comment/Comment.tsx mode change 100755 => 100644 src/components/Comment/Comments.sass mode change 100755 => 100644 src/components/Comment/Comments.tsx mode change 100755 => 100644 src/components/Constants.sass mode change 100755 => 100644 src/components/Footer/Footer.sass mode change 100755 => 100644 src/components/Footer/Footer.tsx mode change 100755 => 100644 src/components/Loading.tsx mode change 100755 => 100644 src/components/LoginModal/LoginModal.sass mode change 100755 => 100644 src/components/LoginModal/LoginModal.tsx mode change 100755 => 100644 src/components/LoginModal/RegisterModal.sass mode change 100755 => 100644 src/components/LoginModal/RegisterModal.tsx mode change 100755 => 100644 src/components/Main/Main.sass mode change 100755 => 100644 src/components/Main/Main.tsx create mode 100644 src/components/Main/News.tsx mode change 100755 => 100644 src/components/Modal/Modal.sass mode change 100755 => 100644 src/components/Modal/Modal.tsx mode change 100755 => 100644 src/components/Navbar/Navbar.sass mode change 100755 => 100644 src/components/Navbar/Navbar.tsx create mode 100644 src/components/News/AllNews.tsx create mode 100644 src/components/News/Post.sass create mode 100644 src/components/News/Post.tsx mode change 100755 => 100644 src/components/NotFoundError.tsx mode change 100755 => 100644 src/components/Notification/Notification.sass mode change 100755 => 100644 src/components/Notification/Notification.tsx mode change 100755 => 100644 src/components/Novel/Novel.sass mode change 100755 => 100644 src/components/Novel/Novel.tsx mode change 100755 => 100644 src/components/NovelItem/NovelItem.sass mode change 100755 => 100644 src/components/NovelItem/NovelItem.tsx mode change 100755 => 100644 src/components/Novels/Novels.sass mode change 100755 => 100644 src/components/Novels/Novels.tsx mode change 100755 => 100644 src/components/Spoiler/Spoiler.sass mode change 100755 => 100644 src/components/Spoiler/Spoiler.tsx mode change 100755 => 100644 src/components/Spoiler/SpoilerTag.tsx mode change 100755 => 100644 src/components/Tags/ColorTag.tsx mode change 100755 => 100644 src/components/User/Novels/UserNovels.sass mode change 100755 => 100644 src/components/User/Novels/UserNovels.tsx mode change 100755 => 100644 src/components/User/User.sass mode change 100755 => 100644 src/components/User/User.tsx mode change 100755 => 100644 src/index.tsx mode change 100755 => 100644 src/react-app-env.d.ts mode change 100755 => 100644 src/serviceWorker.ts mode change 100755 => 100644 src/store/actionTypes.ts mode change 100755 => 100644 src/store/actions.ts mode change 100755 => 100644 src/store/reducers/currentUser.ts mode change 100755 => 100644 src/store/reducers/index.ts mode change 100755 => 100644 src/store/reducers/notifications.ts mode change 100755 => 100644 src/store/store.ts mode change 100755 => 100644 src/types.d.ts mode change 100755 => 100644 src/utils.ts mode change 100755 => 100644 tsconfig.json diff --git a/.env b/.env old mode 100755 new mode 100644 diff --git a/.gitignore b/.gitignore old mode 100755 new mode 100644 diff --git a/package-lock.json b/package-lock.json old mode 100755 new mode 100644 diff --git a/package.json b/package.json old mode 100755 new mode 100644 index 8dd7526..175feff --- a/package.json +++ b/package.json @@ -1,52 +1,53 @@ { - "name": "frontend", - "version": "0.1.0", - "private": true, - "dependencies": { - "@fortawesome/fontawesome-svg-core": "^1.2.26", - "@fortawesome/free-brands-svg-icons": "^5.12.1", - "@fortawesome/free-solid-svg-icons": "^5.12.1", - "@fortawesome/react-fontawesome": "^0.1.8", - "@sentry/browser": "^5.7.1", - "@types/react-infinite-scroller": "^1.2.1", - "axios": "^0.19.0", - "bbcode-to-react": "^0.2.9", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-infinite-scroller": "^1.2.4", - "react-loader-spinner": "^3.1.4", - "react-recaptcha": "^2.3.10", - "react-redux": "^7.1.3", - "react-router-dom": "^5.1.2", - "redux": "^4.0.5" - }, - "devDependencies": { - "@types/node": "12.12.26", - "@types/react": "16.9.19", - "@types/react-dom": "^16.9.5", - "@types/react-redux": "^7.1.7", - "@types/react-router-dom": "^5.1.3", - "node-sass": "^4.13.1", - "redux-devtools-extension": "^2.13.8", - "typescript": "^3.8.2", - "react-scripts": "^3.3.1" - }, - "scripts": { - "start": "react-scripts start", - "build": "react-scripts build" - }, - "eslintConfig": { - "extends": "react-app" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version" - ] - } + "name": "frontend", + "version": "0.1.0", + "private": true, + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.26", + "@fortawesome/free-brands-svg-icons": "^5.12.1", + "@fortawesome/free-solid-svg-icons": "^5.12.1", + "@fortawesome/react-fontawesome": "^0.1.8", + "@sentry/browser": "^5.7.1", + "@types/react-infinite-scroller": "^1.2.1", + "axios": "^0.19.0", + "bbcode-to-react": "^0.2.9", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-infinite-scroller": "^1.2.4", + "react-loader-spinner": "^3.1.4", + "react-recaptcha": "^2.3.10", + "react-redux": "^7.1.3", + "react-router-dom": "^5.1.2", + "redux": "^4.0.5" + }, + "devDependencies": { + "@types/node": "12.12.26", + "@types/react": "16.9.19", + "@types/react-dom": "^16.9.5", + "@types/react-redux": "^7.1.7", + "@types/react-router-dom": "^5.1.3", + "node-sass": "^4.13.1", + "redux-devtools-extension": "^2.13.8", + "typescript": "^3.8.2", + "react-scripts": "^3.3.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } } diff --git a/public/favicon.png b/public/favicon.png old mode 100755 new mode 100644 diff --git a/public/index.html b/public/index.html old mode 100755 new mode 100644 diff --git a/public/manifest.json b/public/manifest.json old mode 100755 new mode 100644 diff --git a/public/robots.txt b/public/robots.txt old mode 100755 new mode 100644 diff --git a/public/static/icons/android-chrome-192x192.png b/public/static/icons/android-chrome-192x192.png old mode 100755 new mode 100644 diff --git a/public/static/icons/android-chrome-512x512.png b/public/static/icons/android-chrome-512x512.png old mode 100755 new mode 100644 diff --git a/public/static/icons/apple-touch-icon.png b/public/static/icons/apple-touch-icon.png old mode 100755 new mode 100644 diff --git a/public/static/icons/favicon-16x16.png b/public/static/icons/favicon-16x16.png old mode 100755 new mode 100644 diff --git a/public/static/icons/favicon-32x32.png b/public/static/icons/favicon-32x32.png old mode 100755 new mode 100644 diff --git a/public/static/icons/favicon.ico b/public/static/icons/favicon.ico old mode 100755 new mode 100644 diff --git a/public/static/icons/mstile-150x150.png b/public/static/icons/mstile-150x150.png old mode 100755 new mode 100644 diff --git a/public/static/img/no-image.png b/public/static/img/no-image.png old mode 100755 new mode 100644 diff --git a/src/api/api.ts b/src/api/api.ts old mode 100755 new mode 100644 diff --git a/src/api/characters.ts b/src/api/characters.ts old mode 100755 new mode 100644 diff --git a/src/api/errors.ts b/src/api/errors.ts old mode 100755 new mode 100644 diff --git a/src/api/news.ts b/src/api/news.ts new file mode 100644 index 0000000..332fbae --- /dev/null +++ b/src/api/news.ts @@ -0,0 +1,6 @@ +import {get} from './api'; + +const getNews = () => get('news'); +const getPost = (id: number) => get(`news/${id}`); + +export { getNews, getPost } \ No newline at end of file diff --git a/src/api/novels.ts b/src/api/novels.ts old mode 100755 new mode 100644 index b0c9b49..2fe650d --- a/src/api/novels.ts +++ b/src/api/novels.ts @@ -11,5 +11,5 @@ export const postNovelComment = (id: number, text: string) => post(`novels/${id} export const fetchUserNovel = (userId: number, novelId: number) => get(`users/${userId}/novels/${novelId}`); export const createUserNovel = (userId: number, novelId: number, status='planned') => post(`users/${userId}/novels`, { novel_id: Number(novelId), status }); -export const updateUserNovel = (userId: number, novelId: number, data: UserNovelType) => put(`users/${userId}/novels/${novelId}`, data); +export const updateUserNovel = (userId: number, novelId: number, data: { mark?: number; status?: string }) => put(`users/${userId}/novels/${novelId}`, data); export const deleteUserNovel = (userId: number, novelId: number) => del(`users/${userId}/novels/${novelId}`); \ No newline at end of file diff --git a/src/api/users.ts b/src/api/users.ts old mode 100755 new mode 100644 diff --git a/src/components/ActivateAccount.tsx b/src/components/ActivateAccount.tsx old mode 100755 new mode 100644 diff --git a/src/components/AdminPanel/Main/AdminPanel.tsx b/src/components/AdminPanel/Main/AdminPanel.tsx new file mode 100644 index 0000000..22b1002 --- /dev/null +++ b/src/components/AdminPanel/Main/AdminPanel.tsx @@ -0,0 +1,30 @@ +import {connect} from "react-redux"; +import React from "react"; +import NotFoundError from "../../NotFoundError"; +import {hasPermission} from "../../../utils"; + +type Props = { + user: UserType +} + +type State = { + +} + +class AdminPanel extends React.Component { + render() { + const { user } = this.props; + if(!user || !user.group) return ; + if(!user.is_superuser && !user.group.is_superuser && !hasPermission(user, 'admin_panel')) return ; + + return ( +
Админ панель, ёпта
+ ) + } +} + +export default connect( + (state: StoreState) => ({ + user: state.currentUser + }) +)(AdminPanel); \ No newline at end of file diff --git a/src/components/App/App.sass b/src/components/App/App.sass old mode 100755 new mode 100644 diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx old mode 100755 new mode 100644 index 5e2dc00..337b717 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -20,6 +20,9 @@ import Footer from '../Footer/Footer'; import UserNovels from '../User/Novels/UserNovels'; import ColorTag from "../Tags/ColorTag"; import ActivateAccount from "../ActivateAccount"; +import AllNews from "../News/AllNews"; +import Post from "../News/Post"; +import AdminPanel from "../AdminPanel/Main/AdminPanel"; type Props = { notifications: React.ReactNode[] @@ -44,7 +47,7 @@ class App extends React.Component { }; const { setUser } = this.props; - fetchCurrentUser().then(currentUser => setUser(currentUser)).catch(console.log); + fetchCurrentUser().then(currentUser => setUser(currentUser)).catch(console.error); const theme = localStorage.getItem('theme'); if(theme) @@ -74,12 +77,21 @@ class App extends React.Component { + + + + + + + + + diff --git a/src/components/Character/Character.sass b/src/components/Character/Character.sass old mode 100755 new mode 100644 diff --git a/src/components/Character/Character.tsx b/src/components/Character/Character.tsx old mode 100755 new mode 100644 diff --git a/src/components/Comment/Comment.sass b/src/components/Comment/Comment.sass old mode 100755 new mode 100644 diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx old mode 100755 new mode 100644 diff --git a/src/components/Comment/Comments.sass b/src/components/Comment/Comments.sass old mode 100755 new mode 100644 diff --git a/src/components/Comment/Comments.tsx b/src/components/Comment/Comments.tsx old mode 100755 new mode 100644 diff --git a/src/components/Constants.sass b/src/components/Constants.sass old mode 100755 new mode 100644 diff --git a/src/components/Footer/Footer.sass b/src/components/Footer/Footer.sass old mode 100755 new mode 100644 diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx old mode 100755 new mode 100644 index 7afb4a6..95563b4 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -4,34 +4,53 @@ import {Link} from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faDiscord, faVk, faTelegramPlane } from '@fortawesome/free-brands-svg-icons'; -const Footer: React.FC = () => ( -
-
-
-
Команда
- Nix13 -
-
-
Соцсети
+const Footer: React.FC = () => { + const secretChangeTheme = () => { + const theme = localStorage.getItem('theme'); + if(theme == null) { + localStorage.setItem('theme', 'light'); + document.body.setAttribute('theme', 'light') + } else if(theme === 'light') { + localStorage.setItem('theme', 'dark'); + document.body.setAttribute('theme', 'dark') + } else if(theme === 'dark') { + localStorage.setItem('theme', 'light'); + document.body.setAttribute('theme', 'light') + } + if(theme !== 'light') { + console.log('Светлая тема находится в разработке! Не все может корректно отображаться.\nК тому же, эта кнопка секретная. Ты знал, на что шел ;)'); + } + } -
- -
- - -
- - -
- + return ( +
+
+
+
Команда
+ Nix13
+
+
Соцсети
+ + +
+
+
+ Unmei © 2019-2020
-
-
- Unmei © 2019-2020
-
-); + ); +}; export default Footer; diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx old mode 100755 new mode 100644 diff --git a/src/components/LoginModal/LoginModal.sass b/src/components/LoginModal/LoginModal.sass old mode 100755 new mode 100644 diff --git a/src/components/LoginModal/LoginModal.tsx b/src/components/LoginModal/LoginModal.tsx old mode 100755 new mode 100644 diff --git a/src/components/LoginModal/RegisterModal.sass b/src/components/LoginModal/RegisterModal.sass old mode 100755 new mode 100644 diff --git a/src/components/LoginModal/RegisterModal.tsx b/src/components/LoginModal/RegisterModal.tsx old mode 100755 new mode 100644 index fad9140..41ca276 --- a/src/components/LoginModal/RegisterModal.tsx +++ b/src/components/LoginModal/RegisterModal.tsx @@ -74,6 +74,9 @@ class RegisterModal extends React.Component {
{ type="email" name={'email'} placeholder={'E-mail'} + pattern={'.+@\\w{2,6}\\.\\w{2,3}'} className={'RegisterModal__Field'} onChange={this.handleEmailChange} value={email}/> diff --git a/src/components/Main/Main.sass b/src/components/Main/Main.sass old mode 100755 new mode 100644 index e69de29..630a28c --- a/src/components/Main/Main.sass +++ b/src/components/Main/Main.sass @@ -0,0 +1,31 @@ +.News + background-color: var(--sec-bg-color) + padding: .5rem + + &__Title + display: flex + flex-direction: row + justify-content: space-between + font-size: 1.5rem + font-weight: 600 + margin-bottom: .5rem + + .Post + background-color: var(--block-color) + padding: .5rem + + &__Title + font-size: 1.2rem + + &__Content, &__Title + border-bottom: var(--link-color) 1px solid + + &__Footer + display: flex + justify-content: space-between + + * + padding: .2rem + + &:not(:last-child) + margin-bottom: 1rem \ No newline at end of file diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx old mode 100755 new mode 100644 index 30e605e..35c879a --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -1,9 +1,13 @@ import React from "react"; +import News from "./News"; +import './Main.sass'; class Main extends React.Component { render() { return ( -
В разработке!
+
+ +
); } } diff --git a/src/components/Main/News.tsx b/src/components/Main/News.tsx new file mode 100644 index 0000000..1a464ab --- /dev/null +++ b/src/components/Main/News.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import {getNews} from "../../api/news"; +import Loading from "../Loading"; +import {Link} from "react-router-dom"; + +type State = { + news: PostType[] +} + +class News extends React.Component<{}, State> { + state: State = { + news: [] + }; + + componentDidMount() { + getNews().then((news: PostType[]) => { + news.forEach(p => p.date = new Date(p.date)); + this.setState({ news }) + }); + } + + render() { + const { news } = this.state; + + if(news.length === 0) return ; + return ( +
+
+
Новости
+ Все новости +
+ {news.map(post => ( +
+
{post.title}
+
{post.short_post}
+
+
Автор: {post.author}
+
Дата: {post.date.toLocaleDateString()}, {post.date.toLocaleTimeString()}
+
+
+ ))} +
+ ); + } +} + +export default News; \ No newline at end of file diff --git a/src/components/Modal/Modal.sass b/src/components/Modal/Modal.sass old mode 100755 new mode 100644 diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx old mode 100755 new mode 100644 diff --git a/src/components/Navbar/Navbar.sass b/src/components/Navbar/Navbar.sass old mode 100755 new mode 100644 diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx old mode 100755 new mode 100644 diff --git a/src/components/News/AllNews.tsx b/src/components/News/AllNews.tsx new file mode 100644 index 0000000..554bd76 --- /dev/null +++ b/src/components/News/AllNews.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +type State = { + +} + +class AllNews extends React.Component<{}, State> { + state: State = { + + }; + + componentDidMount() { + + } + + render() { + return ( +
+ ); + } +} + +export default AllNews; \ No newline at end of file diff --git a/src/components/News/Post.sass b/src/components/News/Post.sass new file mode 100644 index 0000000..5f2580d --- /dev/null +++ b/src/components/News/Post.sass @@ -0,0 +1,11 @@ +.Post + background-color: var(--sec-bg-color) + padding: .5rem + + &__Title + font-size: 1.5rem + font-weight: 600 + border-bottom: 1px solid var(--main-color) + + &__Content + margin-top: .1rem \ No newline at end of file diff --git a/src/components/News/Post.tsx b/src/components/News/Post.tsx new file mode 100644 index 0000000..7858997 --- /dev/null +++ b/src/components/News/Post.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import {getPost} from "../../api/news"; +import Loading from "../Loading"; +import NotFoundError from "../NotFoundError"; +import './Post.sass'; + +type Props = { + match: { params: { postId: number } } +}; + +type State = { + post: PostType | null + code: number +}; + +class Post extends React.Component { + state: State = { + post: null, code: 0 + }; + + componentDidMount(): void { + const { match: { params: { postId }} } = this.props; + getPost(postId).then(post => { + this.setState({ post }) + }).catch((error: ApiError) => { + this.setState({ code: error.code }) + }); + } + + render() { + const { post, code } = this.state; + + if(code === 100) return ; + if(!post) return ; + return ( +
+
{post.title}
+
+ {post.full_post} +
+
+ {post.author} +
+
+ ) + } +} + +export default Post; \ No newline at end of file diff --git a/src/components/NotFoundError.tsx b/src/components/NotFoundError.tsx old mode 100755 new mode 100644 diff --git a/src/components/Notification/Notification.sass b/src/components/Notification/Notification.sass old mode 100755 new mode 100644 diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx old mode 100755 new mode 100644 diff --git a/src/components/Novel/Novel.sass b/src/components/Novel/Novel.sass old mode 100755 new mode 100644 index a96d2f5..c69bb57 --- a/src/components/Novel/Novel.sass +++ b/src/components/Novel/Novel.sass @@ -23,6 +23,22 @@ .Novel__Main_Status margin-bottom: 1rem + &_Mark + margin-top: .5rem + width: 100% + display: flex + justify-content: space-between + + &_Element + padding: .5rem + background-color: var(--block-color) + width: 100% + text-align: center + cursor: pointer + + &:hover + background-color: var(--sec-bg-color) + &_Primary display: flex justify-content: space-between diff --git a/src/components/Novel/Novel.tsx b/src/components/Novel/Novel.tsx old mode 100755 new mode 100644 index 1395c11..af42820 --- a/src/components/Novel/Novel.tsx +++ b/src/components/Novel/Novel.tsx @@ -132,12 +132,18 @@ class Novel extends React.Component { }); } + updateNovelMark = (mark: number) => { + const { match: { params }, currentUser } = this.props; + updateUserNovel(currentUser.id, params.novelId, { mark }).then(console.log); + fetchNovel(params.novelId).then(novel => this.setState({ novel })); + } + render() { const { errorCode, novel, comments, characters, genres, userData, statusExpanded, hasMoreComments } = this.state; const { currentUser } = this.props; if(errorCode === 100) return ; - if(!novel || !genres) return ; + if(!novel) return ; return (
@@ -160,6 +166,17 @@ class Novel extends React.Component { ))}
Удалить из списка
} +
+ {[1,2,3,4,5,6,7,8,9,10].map(mark => ( +
this.updateNovelMark(mark)} + > + {mark} +
+ ))} +
}
@@ -167,7 +184,7 @@ class Novel extends React.Component { {novel.localized_name &&
Оригинальное название: {novel.original_name}
} - {genres.length > 0 && + {genres && genres.length > 0 &&
Жанры: {genres.map(genre =>
{genre.localized_name}
)}
} diff --git a/src/components/NovelItem/NovelItem.sass b/src/components/NovelItem/NovelItem.sass old mode 100755 new mode 100644 diff --git a/src/components/NovelItem/NovelItem.tsx b/src/components/NovelItem/NovelItem.tsx old mode 100755 new mode 100644 diff --git a/src/components/Novels/Novels.sass b/src/components/Novels/Novels.sass old mode 100755 new mode 100644 diff --git a/src/components/Novels/Novels.tsx b/src/components/Novels/Novels.tsx old mode 100755 new mode 100644 index da4bc7e..ebc986f --- a/src/components/Novels/Novels.tsx +++ b/src/components/Novels/Novels.tsx @@ -11,23 +11,18 @@ type State = { } class Novels extends React.Component<{}, State> { - constructor(props: {}) { - super(props); - - this.state = { - novels: null, - genres: [], years: [] - }; - - document.title = 'Новелы'; - } + state: State = { + novels: null, + genres: [], years: [] + }; componentDidMount = () => { fetchNovels('rating').then((novels: NovelType[]) => { - novels?.forEach(novel => { + novels.forEach(novel => { novel.release_date = new Date(novel.release_date); }); this.setState({ novels }); + document.title = 'Новелы'; }) }; diff --git a/src/components/Spoiler/Spoiler.sass b/src/components/Spoiler/Spoiler.sass old mode 100755 new mode 100644 diff --git a/src/components/Spoiler/Spoiler.tsx b/src/components/Spoiler/Spoiler.tsx old mode 100755 new mode 100644 diff --git a/src/components/Spoiler/SpoilerTag.tsx b/src/components/Spoiler/SpoilerTag.tsx old mode 100755 new mode 100644 diff --git a/src/components/Tags/ColorTag.tsx b/src/components/Tags/ColorTag.tsx old mode 100755 new mode 100644 diff --git a/src/components/User/Novels/UserNovels.sass b/src/components/User/Novels/UserNovels.sass old mode 100755 new mode 100644 diff --git a/src/components/User/Novels/UserNovels.tsx b/src/components/User/Novels/UserNovels.tsx old mode 100755 new mode 100644 diff --git a/src/components/User/User.sass b/src/components/User/User.sass old mode 100755 new mode 100644 index b2339ac..af6c92d --- a/src/components/User/User.sass +++ b/src/components/User/User.sass @@ -1,27 +1,31 @@ @import "../App/App" .User - .User__Info + &__Info background-color: var(--sec-bg-color) border-radius: $borderRadius padding: $primaryPadding display: flex align-items: flex-end + background-position: center + background-size: cover + background-repeat: no-repeat @media (max-width: 250px) flex-direction: column - .User__Info_Nick + &_Nick font-size: 1.5rem margin-left: .5rem + font-weight: 600 - .User__Info_Group + &_Group margin-left: .5rem border: 1px solid #eeeeee border-radius: 5px padding: .1rem - .User__Info_Avatar + &_Avatar background-size: cover background-position: center width: 96px @@ -29,7 +33,7 @@ border-radius: 50% margin-right: .2rem - .User__Statistic + &__Statistic background-color: var(--sec-bg-color) border-radius: $borderRadius padding: $primaryPadding @@ -38,7 +42,7 @@ flex-direction: row flex-wrap: wrap - .User__Statistic_Item + &_Item width: calc(100% / 5 - 1rem) @media (max-width: 1060px) width: calc(100% / 4 - 1rem) @@ -69,11 +73,11 @@ padding: .5rem height: 1.2rem !important - .User__Statistic_Block:first-child - border-radius: $borderRadius $borderRadius 0 0 + &:first-child + border-radius: $borderRadius $borderRadius 0 0 - .User__Statistic_Block:last-child - border-radius: 0 0 $borderRadius $borderRadius + &:last-child + border-radius: 0 0 $borderRadius $borderRadius .Planned background: #339999 @@ -95,19 +99,19 @@ margin-left: 1rem height: 1rem - .User__List + &__List background-color: var(--sec-bg-color) border-radius: $borderRadius padding: $primaryPadding margin-top: 1rem - .User__List_Title + &_Title font-size: 1.2rem margin: .3rem 0 display: flex justify-content: space-between - .User__List_Items + &_Items padding: $blockPadding * 3 background-color: var(--block-sec-color) border-radius: $borderRadius diff --git a/src/components/User/User.tsx b/src/components/User/User.tsx old mode 100755 new mode 100644 index ecdca45..98a3a28 --- a/src/components/User/User.tsx +++ b/src/components/User/User.tsx @@ -6,19 +6,20 @@ import {Link} from "react-router-dom"; import Loading from "../Loading"; import NovelItem from "../NovelItem/NovelItem"; +type Props = { + match: { params: { userId: number } } +} + type State = { user: UserType | null novels: NovelType[] errorCode: number | null } -class User extends React.Component { - constructor(props: any) { - super(props); - this.state = { - user: null, novels: [], errorCode: null - }; - } +class User extends React.Component { + state: State = { + user: null, novels: [], errorCode: null + }; componentDidMount() { const params = this.props.match.params; @@ -40,9 +41,11 @@ class User extends React.Component { if(errorCode === 100) return ; if(!user) return ; + const style = user.cover ? { backgroundImage: `url(${user.cover})`, height: '20rem' } : {} + return (
-
+
{user.username}
diff --git a/src/index.tsx b/src/index.tsx old mode 100755 new mode 100644 diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts old mode 100755 new mode 100644 diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts old mode 100755 new mode 100644 diff --git a/src/store/actionTypes.ts b/src/store/actionTypes.ts old mode 100755 new mode 100644 diff --git a/src/store/actions.ts b/src/store/actions.ts old mode 100755 new mode 100644 diff --git a/src/store/reducers/currentUser.ts b/src/store/reducers/currentUser.ts old mode 100755 new mode 100644 diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts old mode 100755 new mode 100644 diff --git a/src/store/reducers/notifications.ts b/src/store/reducers/notifications.ts old mode 100755 new mode 100644 diff --git a/src/store/store.ts b/src/store/store.ts old mode 100755 new mode 100644 index ae72a6a..753114d --- a/src/store/store.ts +++ b/src/store/store.ts @@ -5,4 +5,5 @@ import {composeWithDevTools} from "redux-devtools-extension"; const composeEnhancers = composeWithDevTools({ trace: true }); -export default createStore(index, composeEnhancers()); \ No newline at end of file +const store = process.env.NODE_ENV === 'development' ? createStore(index, composeEnhancers()) : createStore(index); +export default store; \ No newline at end of file diff --git a/src/types.d.ts b/src/types.d.ts old mode 100755 new mode 100644 index 49a874a..a542b9d --- a/src/types.d.ts +++ b/src/types.d.ts @@ -28,7 +28,9 @@ type UserType = { id: number username: string avatar: string + cover: string group: UserGroupType + is_superuser: boolean } type UserNovelType = { @@ -40,6 +42,8 @@ type UserGroupType = { id: number name: string color: string + is_superuser: boolean + permissions: string } type CommentType = { @@ -54,3 +58,17 @@ type GenreType = { name: string localized_name: string } + +type PostType = { + id: number + title: string + short_post: string + full_post: string + date: Date + author: string +} + +type StoreState = { + currentUser: UserType + notifications: React.Component[] +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts old mode 100755 new mode 100644 index df6704b..688a95d --- a/src/utils.ts +++ b/src/utils.ts @@ -8,4 +8,9 @@ const getRandomInt: (min: number, max: number) => number = (min: number, max: nu return Math.floor(Math.random() * (max - min + 1)) + min; }; -export { capitalize, getRandomInt }; \ No newline at end of file +const hasPermission = (user: UserType, permission: string) => { + const permissions = user?.group?.permissions.split(','); + return permissions?.filter(perm => perm === permission).length > 0; +} + +export { capitalize, getRandomInt, hasPermission }; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json old mode 100755 new mode 100644