muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed boris flickering on load

Browse source
This commit is contained in:
Fedor Katurov 2019-11-15 12:03:57 +07:00
parent 5b987a5546
commit f23b9166e1
3 changed files with 33 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/containers/node/BorisLayout/index.tsx
View file

@ -1,20 +1,20 @@
import React, { FC, useEffect } from 'react'; import React, { FC, useEffect } from "react";
import { RouteComponentProps } from 'react-router'; import { RouteComponentProps } from "react-router";
import * as NODE_ACTIONS from '~/redux/node/actions'; import * as NODE_ACTIONS from "~/redux/node/actions";
import { selectNode } from '~/redux/node/selectors'; import { selectNode } from "~/redux/node/selectors";
import { selectUser } from '~/redux/auth/selectors'; import { selectUser } from "~/redux/auth/selectors";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { NodeComments } from '~/components/node/NodeComments'; import { NodeComments } from "~/components/node/NodeComments";
import styles from './styles.scss'; import styles from "./styles.scss";
import { CommentForm } from '~/components/node/CommentForm'; import { CommentForm } from "~/components/node/CommentForm";
import { Group } from '~/components/containers/Group'; import { Group } from "~/components/containers/Group";
import boris from '~/sprites/boris_robot.svg'; import boris from "~/sprites/boris_robot.svg";
import { NodeNoComments } from '~/components/node/NodeNoComments'; import { NodeNoComments } from "~/components/node/NodeNoComments";
import { getRandomPhrase } from '~/constants/phrases'; import { getRandomPhrase } from "~/constants/phrases";
const mapStateToProps = state => ({ const mapStateToProps = state => ({
node: selectNode(state), node: selectNode(state),
user: selectUser(state), user: selectUser(state)
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -23,7 +23,7 @@ const mapDispatchToProps = {
nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage, nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage,
nodeEdit: NODE_ACTIONS.nodeEdit, nodeEdit: NODE_ACTIONS.nodeEdit,
nodeLike: NODE_ACTIONS.nodeLike, nodeLike: NODE_ACTIONS.nodeLike,
nodeStar: NODE_ACTIONS.nodeStar, nodeStar: NODE_ACTIONS.nodeStar
}; };
type IProps = ReturnType<typeof mapStateToProps> & type IProps = ReturnType<typeof mapStateToProps> &
@ -33,15 +33,21 @@ type IProps = ReturnType<typeof mapStateToProps> &
const id = 696; const id = 696;
const BorisLayoutUnconnected: FC<IProps> = ({ const BorisLayoutUnconnected: FC<IProps> = ({
node: { is_loading, is_loading_comments, comments = [], current: node, related }, node: {
is_loading,
is_loading_comments,
comments = [],
current: node,
related
},
user: { is_user }, user: { is_user },
nodeLoadNode, nodeLoadNode
}) => { }) => {
const title = getRandomPhrase('BORIS_TITLE'); const title = getRandomPhrase("BORIS_TITLE");
useEffect(() => { useEffect(() => {
if (is_loading) return; if (is_loading) return;
nodeLoadNode(id, 'DESC'); nodeLoadNode(id, "DESC");
}, [nodeLoadNode, id]); }, [nodeLoadNode, id]);
return ( return (
@ -81,7 +87,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
<Group className={styles.content}> <Group className={styles.content}>
{is_user && <CommentForm id={0} />} {is_user && <CommentForm id={0} />}
{is_loading_comments ? ( {is_loading_comments && !comments.length ? (
<NodeNoComments is_loading /> <NodeNoComments is_loading />
) : ( ) : (
<NodeComments comments={comments} /> <NodeComments comments={comments} />

8
src/containers/node/BorisLayout/styles.scss
View file

@ -33,7 +33,7 @@
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: 50% 0% no-repeat/cover url('~/sprites/boris_bg.svg'); background: 50% 0% no-repeat/cover url("~/sprites/boris_bg.svg");
} }
.header { .header {
@ -86,8 +86,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
padding-bottom: 33.333%;
position: relative;
width: 100%;
img { img {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
} }

1
src/index.tsx
View file

@ -20,7 +20,6 @@ render(
/* /*
- fix: boris should not show "loading comments" if there's any comments loaded
- fix: text nodes cell not clickable - fix: text nodes cell not clickable
- fix: text nodes cell has no preview - fix: text nodes cell has no preview
- fix: user receives his own notifications :-( - fix: user receives his own notifications :-(