v0.10b

src/api/api.ts

@@ -1,4 +1,4 @@
-const baseUrl = process.env.NODE_ENV === "development" ? 'http://localhost:8080/v1' : 'https://api.unmei.nix13.pw/v1';
+const baseUrl = process.env.NODE_ENV === "development" ? 'http://localhost:8080/v1' : 'https://api.unmei.space/v1';
 
 const response = async (url: string, method: string, body?: string | FormData) => {
     let bUrl = baseUrl;
@@ -41,4 +41,4 @@ const TranslateStatus: { [id: string]: string } = {
 export const getVersion = () => get('version');
 export const version = '0.10';
 
-export { get, post, put, del, TranslateStatus };
+export { get, post, put, del, TranslateStatus };

src/api/auth.ts

@@ -1,3 +1,6 @@
 import {post} from "./api";
 
-export const restore = (token: string, new_password: string) => post('auth/restore', { token, new_password });
+export const restore = (token: string, new_password: string) => post('auth/restore', { token, new_password });
+export const registerUser = (login: string, password: string, email: string, recaptcha: string) => post('auth/register', { login, password, email, recaptcha });
+export const login = (login: string, password: string, recaptcha: string) => post('auth/login', { login, password, recaptcha });
+export const userLogout = () => post('auth/logout');

src/api/users.ts

@@ -8,10 +8,6 @@ export const updateUser = (user: UserType) => put(`users/${user.id}`, { user })
 export const fetchCurrentUser = () => get('users/me');
 export const fetchUserNovels = (id: number) => get(`users/${id}/novels`);
 
-export const registerUser = (login: string, password: string, email: string, recaptcha: string) => post('auth/register', { login, password, email, recaptcha });
-export const login = (login: string, password: string, recaptcha: string) => post('auth/login', { login, password, recaptcha });
-export const userLogout = () => post('auth/logout');
-
 export const activateAccount = (token: string) => post('auth/activate', { token });
 export const generateActivateLink = () => post('auth/activateToken');
 
@@ -19,4 +15,4 @@ export const fetchUserSettings = () => get('users/me/settings');
 export const updateUserSettings = (use_gravatar: boolean, avatar: string) => post('users/me/settings', { use_gravatar, avatar });
 export const uploadAvatar = (avatar: FormData) => post('users/me/avatar', avatar);
 
-export const generateRestoreLink = (email: string, recaptcha: string) => post('auth/restoreToken', { email, recaptcha });
+export const generateRestoreLink = (email: string, recaptcha: string) => post('auth/restoreToken', { email, recaptcha });

src/pages/Modals/LoginModal.tsx

@@ -1,6 +1,6 @@
 import React, {FormEvent, ChangeEvent} from "react";
 import Modal from "../../ui/Modal/Modal";
-import {login} from "../../api/users";
+import {login} from "../../api/auth";
 import {connect} from "react-redux";
 import {addNotification, hideModal, setModal, setUser} from "../../store/actions";
 import './LoginModal.sass'
@@ -107,4 +107,4 @@ export default connect(null,
         setModal: (modal: React.ReactNode | null) => dispatch(setModal(modal)),
         hideModal: () => dispatch(hideModal())
     })
-)(LoginModal);
+)(LoginModal);

src/pages/Modals/RegisterModal.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Modal from "../../ui/Modal/Modal";
 import Recaptcha from '../../ui/Recaptcha/Recaptcha'
 import './RegisterModal.sass'
-import {registerUser} from "../../api/users";
+import {registerUser} from "../../api/auth";
 import {connect} from "react-redux";
 import {addNotification, setModal} from "../../store/actions";
 import NotificationMessage from "../../ui/Notifications/NotificationMessage";
@@ -122,4 +122,4 @@ export default connect(null,
         addNotification: (notification: React.ReactNode) => dispatch(addNotification(notification)),
         setModal: (modal: React.ReactNode | null) => dispatch(setModal(modal))
     })
-)(RegisterModal);
+)(RegisterModal);

src/pages/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import './Navbar.sass'
 import {connect} from "react-redux";
-import {userLogout} from "../../api/users";
+import {userLogout} from "../../api/auth";
 import {Link} from "react-router-dom";
 import {logout, setModal} from "../../store/actions";
 import {hasAccessToAdminPanel} from "../../utils";
@@ -108,4 +108,4 @@ export default connect(
         logout: () => dispatch(logout()),
         setModal: (modal: React.ReactNode | null) => dispatch(setModal(modal))
     })
-)(Navbar);
+)(Navbar);

src/pages/News/AllNews.tsx

@@ -30,6 +30,7 @@ class AllNews extends React.Component<{}, State> {
                 <div className="News__Title">
                     Новости
                 </div>
+                {/*{<ProgressBar progress={50} alternative color={'red'}/>}*/}
                 {news.map(post => (
                     <Link key={post.id} to={`/post/${post.id}`}>
                         <NewsPost {...post} />
@@ -40,4 +41,4 @@ class AllNews extends React.Component<{}, State> {
     }
 }
 
-export default AllNews;
+export default AllNews;

src/ui/ProgressBar/ProgressBar.sass

@@ -0,0 +1,119 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:700)
+
+// -- vars
+$bg-color: #34495e
+$default-size: 1em
+$label-font-size: $default-size / 4
+$label-font-size-redo: $default-size * 4
+
+// -- mixins
+@mixin size($width, $height)
+  height: $height
+  width: $width
+
+@mixin draw-progress--solid($progress, $color, $bg-color)
+  background: linear-gradient(to right, $color 50%, $bg-color 50%)
+
+  &:before
+    @if $progress <= 50
+      background: $bg-color
+      transform: rotate((100 - (50 - $progress)) / 100 * 360deg * -1)
+    @else
+      background: $color
+      transform: rotate((100 - $progress) / 100 * 360deg)
+
+.charts-container
+  &:after
+    clear: both
+    content: ''
+    display: table
+
+.pie-wrapper
+  @include size($default-size, $default-size)
+
+  font-size: 10em
+  box-sizing: border-box
+  margin: 15px
+  position: relative
+
+  *, *:before, *:after
+    box-sizing: border-box
+
+  &:nth-child(3n + 1)
+    clear: both
+
+  .pie
+    @include size(100%, 100%)
+    clip: rect(0, $default-size, $default-size, $default-size / 2)
+    left: 0
+    position: absolute
+    top: 0
+
+    .half-circle
+      @include size(100%, 100%)
+      border: ($default-size / 10) solid #3498db
+      border-radius: 50%
+      clip: rect(0, $default-size / 2, $default-size, 0)
+      left: 0
+      position: absolute
+      top: 0
+
+  .label
+    display: block
+    position: absolute
+    color: #ecf0f1
+    background: $bg-color
+    border-radius: 50%
+    cursor: default
+    font-size: $label-font-size
+    text-align: center
+
+    line-height: $label-font-size-redo * .70
+    top: $label-font-size-redo / 10
+    right: $label-font-size-redo / 10
+    bottom: $label-font-size-redo / 10
+    left: $label-font-size-redo / 10
+
+    .smaller
+      font-size: .5em
+
+    .percent
+      color: #bdc3c7
+      font-size: .45em
+      padding-bottom: 20px
+      vertical-align: super
+
+  .shadow
+    @include size(100%, 100%)
+    border: $default-size / 10 solid #bdc3c7
+    border-radius: 50%
+
+  &.style-2
+    .label
+      background: none
+      color: #7f8c8d
+
+      .smaller
+        color: #bdc3c7
+
+.pie-wrapper--solid
+  border-radius: 50%
+  overflow: hidden
+
+  &:before
+    border-radius: 0 100% 100% 0 / 50%
+    content: ''
+    display: block
+    height: 100%
+    margin-left: 50%
+    transform-origin: left
+
+  .label
+    background: transparent
+
+  &.progress-65
+    @include draw-progress--solid(65, #e67e22, $bg-color)
+  &.progress-25
+    @include draw-progress--solid(25, #9b59b6, $bg-color)
+  &.progress-88
+    @include draw-progress--solid(88, #3498db, $bg-color)

src/ui/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,20 @@
+import React, {CSSProperties} from "react";
+import './ProgressBar.sass';
+
+const ProgressBar = ({ progress, color, alternative }: { progress: number, color: string, alternative?: boolean }) => {
+    const rightSide: CSSProperties = progress <= 50 ? { display: "none" } : { transform: 'rotate(180deg)' };
+    const borderColor: CSSProperties = { borderColor: color };
+
+    return (
+        <div className={alternative ? 'pie-wrapper progress style-2' : "pie-wrapper progress-75"}>
+            <span className="label">{progress}<span className="percent">%</span></span>
+            <div className="pie" style={progress <= 50 ? {} : { clip: 'rect(auto, auto, auto, auto)' }}>
+                <div className="left-side half-circle" style={{...borderColor, transform: `rotate(${progress*3.6}deg)`}}/>
+                <div className="right-side half-circle" style={{...borderColor, ...rightSide}}/>
+            </div>
+            {alternative && <div className="shadow"/>}
+        </div>
+    )
+}
+
+export default ProgressBar;