From 12504c4f34848c234b52431e746cfaed2883969d Mon Sep 17 00:00:00 2001
From: 2458773093 <2458773093@protonmail.com>
Date: Thu, 1 Aug 2019 02:46:23 +0300
Subject: [PATCH] quote ui

---
 app/javascript/gabsocial/components/status.js |  5 +++
 .../gabsocial/components/status_quote.js      | 42 +++++++++++++++++++
 .../styles/gabsocial/components.scss          | 10 +++++
 3 files changed, 57 insertions(+)
 create mode 100644 app/javascript/gabsocial/components/status_quote.js

diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 5f6a225b..ec4b0263 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -7,6 +7,7 @@ import AvatarComposite from './avatar_composite';
 import RelativeTimestamp from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
+import StatusQuote from './status_quote';
 import StatusActionBar from './status_action_bar';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
@@ -445,6 +446,10 @@ class Status extends ImmutablePureComponent {
 
             {media}
 
+            {status.get('quote') && <StatusQuote
+              id={status.get('quote')}
+            />}
+
             {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
               <button className='status__content__read-more-button' onClick={this.handleClick}>
                 <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
diff --git a/app/javascript/gabsocial/components/status_quote.js b/app/javascript/gabsocial/components/status_quote.js
new file mode 100644
index 00000000..b4d03379
--- /dev/null
+++ b/app/javascript/gabsocial/components/status_quote.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import StatusContent from './status_content';
+import DisplayName from './display_name';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+
+const mapStateToProps = (state, { id }) => ({
+    status: state.getIn(['statuses', id]),
+    account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
+});
+
+@connect(mapStateToProps)
+export default class StatusQuote extends React.PureComponent {
+
+    static contextTypes = {
+      router: PropTypes.object,
+    };
+  
+    static propTypes = {
+      status: ImmutablePropTypes.map.isRequired,
+    };
+
+    render() {
+        const { status, account } = this.props;
+
+        const statusUrl = `/${account.get('acct')}/posts/${status.get('id')}`;
+
+        return (
+            <NavLink to={statusUrl} className="status__quote">
+                <DisplayName account={account} />
+
+                <StatusContent
+                status={status}
+                expanded={false}
+                />
+            </NavLink>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss
index 8434d8a0..bfcb1f7c 100644
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/app/javascript/styles/gabsocial/components.scss
@@ -566,6 +566,16 @@
 		}
 	}
 
+	&__quote {
+		display: block;
+		color: $primary-text-color;
+		text-decoration: none;
+		border: 1px solid $ui-secondary-color;
+		border-radius: 10px;
+		padding: 10px 15px;
+		margin-top: 15px;
+	}
+
 	&__meta {
 		font-size: 14px;
 		color: $gab-secondary-text;