Merge pull request #26 from muerwre/15-use-cra-or-nextjs

15 use cra or nextjs

src/containers/App.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { connect } from 'react-redux';
-import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from 'connected-react-router';
 import { history } from '~/redux/store';
 import { MainLayout } from '~/containers/main/MainLayout';
@@ -40,4 +39,4 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => {
   );
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));
+export default connect(mapStateToProps, mapDispatchToProps)(Component);

src/containers/dialogs/BetterScrollDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100vw;
   height: 100vh;

src/containers/dialogs/EditorDialog/styles.module.scss

@@ -1,7 +1,9 @@
+@import "src/styles/variables";
+
 .editor {
   flex: 1;
   padding: $gap;
-  // padding-bottom: 0;    
+  // padding-bottom: 0;
   align-items: center;
   justify-content: center;
   position: relative;
@@ -10,4 +12,4 @@
 .form {
   height: 100vh;
   width: 100%;
-}
+}

src/containers/dialogs/LoadingDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 200px;
   display: flex;

src/containers/dialogs/LoginDialog/index.tsx

@@ -14,7 +14,7 @@ import styles from './styles.module.scss';
 import * as ACTIONS from '~/redux/auth/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { ISocialProvider } from '~/redux/auth/types';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
 import { IOAuthEvent, OAUTH_EVENT_TYPES } from '~/redux/types';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';

src/containers/dialogs/LoginDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 $secondary_color: darken(desaturate($blue, 100%), 30%);
 $vk_color: $secondary_color;
 

src/containers/dialogs/LoginDialogButtons/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .footer {
   padding: $gap;
 }

src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap $gap * 2;
 

src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $login_dialog_padding;
 }

src/containers/dialogs/Modal/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .fixed {
   position: fixed;
   z-index: 30;

src/containers/dialogs/PhotoSwipe/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   :global(.pswp__img) {
     border-radius: $radius;

src/containers/dialogs/ProfileDialog/index.tsx

@@ -8,7 +8,7 @@ import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 import { ProfileDescription } from '~/components/profile/ProfileDescription';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IAuthState } from '~/redux/auth/types';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { ProfileSettings } from '~/components/profile/ProfileSettings';
 import { ProfileAccounts } from '~/components/profile/ProfileAccounts';

src/containers/dialogs/ProfileDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .messages {
   padding: $gap;
 }

src/containers/dialogs/RestorePasswordDialog/index.tsx

@@ -8,7 +8,7 @@ import { Button } from '~/components/input/Button';
 import styles from './styles.module.scss';
 
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';

src/containers/dialogs/RestorePasswordDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap $gap $gap * 4;
 }

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -8,7 +8,7 @@ import { Button } from '~/components/input/Button';
 import styles from './styles.module.scss';
 
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { selectAuthRestore } from '~/redux/auth/selectors';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { Icon } from '~/components/input/Icon';

src/containers/dialogs/RestoreRequestDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap $gap $gap * 4;
 }

src/containers/dialogs/ScrollDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   height: 100vh;
   width: 100%;

src/containers/dialogs/TestDialog/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .example {
   height: 1200px;
   background: yellow;

src/containers/flow/FlowLayout/index.tsx

@@ -4,7 +4,7 @@ import { FlowGrid } from '~/components/flow/FlowGrid';
 import { selectFlow } from '~/redux/flow/selectors';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import * as FLOW_ACTIONS from '~/redux/flow/actions';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { selectUser } from '~/redux/auth/selectors';
 import { FlowHero } from '~/components/flow/FlowHero';
 import styles from './styles.module.scss';

src/containers/flow/FlowLayout/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   max-width: 2000px;
   padding: 0 40px 40px 40px;

src/containers/main/BottomContainer/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.scss';
 import { PlayerBar } from '~/components/bars/PlayerBar';
 import { SubmitBar } from '~/components/bars/SubmitBar';
 import { selectUser } from '~/redux/auth/selectors';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { connect } from 'react-redux';
 
 const mapStateToProps = state => pick(['is_user'], selectUser(state));

src/containers/main/BottomContainer/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: fixed;
   transform: translateZ(0);

src/containers/main/MainLayout/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrapper {
   width: 100%;
   padding: 0 $gap;

src/containers/node/BorisLayout/index.tsx

@@ -8,7 +8,7 @@ import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { getRandomPhrase } from '~/constants/phrases';
+import { useRandomPhrase } from '~/constants/phrases';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 
 import * as NODE_ACTIONS from '~/redux/node/actions';
@@ -19,7 +19,6 @@ import isBefore from 'date-fns/isBefore';
 import { Card } from '~/components/containers/Card';
 import { Footer } from '~/components/main/Footer';
 import { Sticky } from '~/components/containers/Sticky';
-import { Placeholder } from '~/components/placeholders/Placeholder';
 import { selectBorisStats } from '~/redux/boris/selectors';
 import { BorisStats } from '~/components/boris/BorisStats';
 
@@ -58,7 +57,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
   borisLoadStats,
   stats,
 }) => {
-  const title = getRandomPhrase('BORIS_TITLE');
+  const title = useRandomPhrase('BORIS_TITLE');
 
   useEffect(() => {
     const last_comment = comments[0];

src/containers/node/BorisLayout/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;
@@ -34,7 +36,7 @@
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background: 50% 0% no-repeat url('~/sprites/boris_bg.svg');
+  background: 50% 0% no-repeat url('../../../sprites/boris_bg.svg');
   background-size: cover;
 }
 

src/containers/node/NodeLayout/index.tsx

@@ -14,7 +14,7 @@ import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
 import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES, } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';

src/containers/node/NodeLayout/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .content {
   align-items: stretch !important;
   @include vertical_at_tablet;
@@ -25,7 +27,7 @@
   min-width: 0;
   position: relative;
   z-index: 10;
-  
+
   @media (max-width: 1024px) {
     padding-left: 0;
     padding-top: $comment_height / 2;

src/containers/pages/ErrorNotFound/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 
@@ -18,7 +20,7 @@
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
-  background: url('~/sprites/lost.svg') 50% 50% no-repeat;
+  background: url('../../../sprites/lost.svg') 50% 50% no-repeat;
   background-size: cover;
   text-transform: uppercase;
   text-align: center;

src/containers/profile/ProfileAvatar/index.tsx

@@ -2,18 +2,14 @@ import React, { FC, useCallback, useEffect, useState } from "react";
 import styles from "./styles.module.scss";
 import { connect } from "react-redux";
 import { getURL } from "~/utils/dom";
-import pick from "ramda/es/pick";
-import { selectAuthUser, selectAuthProfile } from "~/redux/auth/selectors";
+import { pick } from "ramda";
+import { selectAuthProfile, selectAuthUser } from "~/redux/auth/selectors";
 import { PRESETS } from "~/constants/urls";
 import { selectUploads } from "~/redux/uploads/selectors";
 import { IFileWithUUID } from "~/redux/types";
 import uuid from "uuid4";
-import {
-  UPLOAD_SUBJECTS,
-  UPLOAD_TARGETS,
-  UPLOAD_TYPES
-} from "~/redux/uploads/constants";
-import path from "ramda/es/path";
+import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from "~/redux/uploads/constants";
+import { path } from 'ramda';
 import * as UPLOAD_ACTIONS from "~/redux/uploads/actions";
 import * as AUTH_ACTIONS from "~/redux/auth/actions";
 import { Icon } from "~/components/input/Icon";

src/containers/profile/ProfileAvatar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .avatar {
   @include outer_shadow();
 

src/containers/profile/ProfileInfo/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   justify-content: flex-start;
   align-items: flex-start !important;

src/containers/profile/ProfileLayout/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start !important;

src/containers/profile/ProfileLoader/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .loader {
   min-height: 33vh;
   display: flex;

src/containers/profile/ProfileMessages/index.tsx

@@ -4,7 +4,7 @@ import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import styles from './styles.module.scss';
 import * as AUTH_ACTIONS from '~/redux/messages/actions';
 import { Message } from '~/components/profile/Message';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { selectMessages } from '~/redux/messages/selectors';
 

src/containers/profile/ProfileMessages/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .messages {
   padding: $gap;
   background: $node_bg;

src/containers/profile/ProfilePage/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   flex: 1;
   background: $content_bg;

src/containers/profile/ProfilePageLeft/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: stretch;

src/containers/profile/ProfileTabs/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;

src/containers/sidebars/SidebarWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   0% { opacity: 0; }
   100% { opacity: 1; }

src/containers/sidebars/TagSidebar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include sidebar_content(400px);
 }