Added filters for own posts

front-end/src/components/Filters.tsx

@@ -0,0 +1,40 @@
+// Copyright 2019-2020 @paritytech/polkassembly authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import { Checkbox, CheckboxProps, Form } from 'semantic-ui-react';
+
+import Card from '../ui-components/Card';
+
+interface Props {
+	className?: string
+	showOwnProposals: boolean
+	onShowOwnProposalChange: (value: boolean) => void
+}
+
+const Filters = ({ className, showOwnProposals, onShowOwnProposalChange }:  Props) => {
+
+	const onOwnProposalChanged = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
+		onShowOwnProposalChange(data.checked || false);
+	};
+
+	return (
+		<Card className={className}>
+			<Form>
+				<Form.Group>
+					<Form.Field className={className}>
+						<h6>Filters</h6>
+					</Form.Field>
+				</Form.Group>
+				<Form.Group>
+					<Form.Field>
+						<Checkbox label='Show own proposal' checked={showOwnProposals} toggle onChange={onOwnProposalChanged} />
+					</Form.Field>
+				</Form.Group>
+			</Form>
+		</Card>
+	);
+};
+
+export default Filters;

front-end/src/components/Listings/DiscussionsListing.tsx

@@ -3,27 +3,31 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import styled from '@xstyled/styled-components';
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import getDefaultAddressField from 'src/util/getDefaultAddressField';
 
+import { UserDetailsContext } from '../../context/UserDetailsContext';
 import { LatestDiscussionPostsQuery } from '../../generated/graphql';
 import DiscussionCard from '../DiscussionCard';
 
 interface Props {
   className?: string
   data: LatestDiscussionPostsQuery
+  showOwnProposals?: boolean
 }
 
-const Discussions = ({ className, data }: Props) => {
+const Discussions = ({ className, data, showOwnProposals }: Props) => {
+	const currentUser = useContext(UserDetailsContext);
+
 	if (!data.posts || !data.posts.length) return <div>No discussion found.</div>;
 
 	const defaultAddressField = getDefaultAddressField();
 
 	return (
 		<ul className={`${className} discussions__list`}>
 			{!!data.posts &&
-				data.posts.map(
+				data.posts.filter(post => showOwnProposals && currentUser ? currentUser.username === post?.author?.username : true).map(
 					(post) => {
 						return !!post?.author?.username &&
 							<li key={post.id} className='discussions__item'>

front-end/src/components/Listings/ProposalsListing.tsx

@@ -3,20 +3,22 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import styled from '@xstyled/styled-components';
-import React from 'react';
+import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import NothingFoundCard from 'src/ui-components/NothingFoundCard';
 
+import { UserDetailsContext } from '../../context/UserDetailsContext';
 import { LatestDemocracyProposalPostsQuery } from '../../generated/graphql';
 import GovernanceCard from '../GovernanceCard';
 
 interface Props {
   className?: string
   data: LatestDemocracyProposalPostsQuery
+  showOwnProposals?: boolean
 }
 
-const Proposals = ({ className, data }: Props) => {
-
+const Proposals = ({ className, data, showOwnProposals }: Props) => {
+	const currentUser = useContext(UserDetailsContext);
 	const noPost = !data.posts || !data.posts.length;
 	const atLeastOneCurrentProposal = data.posts.some((post) => {
 		if(post.onchain_link?.onchain_proposal.length){
@@ -31,7 +33,7 @@ const Proposals = ({ className, data }: Props) => {
 
 	return (
 		<ul className={`${className} proposals__list`}>
-			{data.posts.map(
+			{data.posts.filter(post => showOwnProposals && currentUser && post.onchain_link ? currentUser?.addresses?.includes(post.onchain_link.proposer_address) : true).map(
 				(post) => {
 					const onchainId = post.onchain_link?.onchain_proposal_id;
 
@@ -61,7 +63,7 @@ const Proposals = ({ className, data }: Props) => {
 export default styled(Proposals)`
 	margin-block-start: 0;
 	margin-block-end: 0;
-	
+
 	li {
 		list-style-type: none;
 	}

front-end/src/screens/Discussions/Discussions.tsx

@@ -12,7 +12,11 @@ import LoadMore from '../../ui-components/LoadMore';
 
 const LIMIT = 20;
 
-const DiscussionsContainer = () => {
+interface Props {
+	showOwnProposals?: boolean
+}
+
+const DiscussionsContainer = ({ showOwnProposals }: Props) => {
 	const [page, setPage] = useState(1);
 
 	const { data, error, loading, refetch } = useLatestDiscussionPostsQuery({ variables: { limit: LIMIT * page } });
@@ -31,7 +35,7 @@ const DiscussionsContainer = () => {
 
 	if (data) {
 		return <>
-			<DiscussionsListing data={data} />
+			<DiscussionsListing data={data} showOwnProposals={showOwnProposals} />
 			{(loading || (data.posts.length === LIMIT * page)) && <LoadMore onClick={loadMore} loading={loading} />}
 		</>;
 	}

front-end/src/screens/Discussions/index.tsx

@@ -3,12 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import styled from '@xstyled/styled-components';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
 import DefaultAddressInfoBox from 'src/components/DefaultAddressInfoBox';
 import getNetwork from 'src/util/getNetwork';
 
+import Filters from '../../components/Filters';
 import { UserDetailsContext } from '../../context/UserDetailsContext';
 import Button from '../../ui-components/Button';
 import InfoBox from '../../ui-components/InfoBox';
@@ -19,6 +20,7 @@ const NETWORK = getNetwork();
 const Discussions = ({ className } : {className?: string}) => {
 	const history = useHistory();
 	const currentUser = useContext(UserDetailsContext);
+	const [showOwnProposals, setShowOwnProposal] = useState(false);
 	const handleCreatePost = () => {
 		history.push('/post/create');
 	};
@@ -28,7 +30,7 @@ const Discussions = ({ className } : {className?: string}) => {
 			<h1>Latest discussions</h1>
 			<Grid stackable reversed='mobile tablet'>
 				<Grid.Column mobile={16} tablet={16} computer={10}>
-					<DiscussionsContainer/>
+					<DiscussionsContainer showOwnProposals={showOwnProposals} />
 				</Grid.Column>
 				<Grid.Column mobile={16} tablet={16} computer={6}>
 					{currentUser.id &&
@@ -43,6 +45,7 @@ const Discussions = ({ className } : {className?: string}) => {
 					/>
 					{currentUser.id && currentUser.addresses?.length !== 0 && !currentUser.defaultAddress &&
 						<DefaultAddressInfoBox />}
+					{currentUser.id && <Filters showOwnProposals={showOwnProposals} onShowOwnProposalChange={(value) => { setShowOwnProposal(value); }} />}
 				</Grid.Column>
 			</Grid>
 		</div>
@@ -101,4 +104,4 @@ export default styled(Discussions)`
 		justify-content: center;
 		margin-bottom: 2rem;
 	}
-`;
+`;

front-end/src/screens/Proposals/ProposalsContainer/index.tsx

@@ -15,9 +15,10 @@ import LoadMore from '../../../ui-components/LoadMore';
 interface Props {
 	className?: string
 	limit: number
+	showOwnProposals: boolean
 }
 
-const ProposalsContainer = ({ className, limit }:Props) => {
+const ProposalsContainer = ({ className, limit, showOwnProposals }: Props) => {
 	const [page, setPage] = useState(1);
 
 	const { data, error, loading, refetch } = useAllDemocracyProposalPostsQuery({ variables: {
@@ -38,7 +39,7 @@ const ProposalsContainer = ({ className, limit }:Props) => {
 
 	if (data) return (
 		<>
-			<ProposalsListing className={className} data={data}/>
+			<ProposalsListing className={className} data={data} showOwnProposals={showOwnProposals} />
 			{(loading || (data.posts.length === limit * page)) && <LoadMore onClick={loadMore} loading={loading} />}
 		</>
 	);

front-end/src/screens/Proposals/index.tsx

@@ -3,20 +3,24 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import styled from '@xstyled/styled-components';
-import React from 'react';
+import React, { useContext, useState } from 'react';
 import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid';
 
+import Filters from '../../components/Filters';
+import { UserDetailsContext } from '../../context/UserDetailsContext';
 import InfoBox from '../../ui-components/InfoBox';
 import ProposalContainer from './ProposalsContainer';
 
 const OnchainPostsContainer = ({ className } : {className?: string}) => {
+	const currentUser = useContext(UserDetailsContext);
+	const [showOwnProposals, setShowOwnProposal] = useState(false);
 
 	return (
 		<div className={className}>
 			<h1>On-chain proposals</h1>
 			<Grid stackable reversed='mobile tablet'>
 				<Grid.Column mobile={16} tablet={16} computer={10}>
-					<ProposalContainer limit={25} />
+					<ProposalContainer showOwnProposals={showOwnProposals} limit={25} />
 				</Grid.Column>
 				<Grid.Column mobile={16} tablet={16} computer={6}>
 					<InfoBox
@@ -27,6 +31,7 @@ const OnchainPostsContainer = ({ className } : {className?: string}) => {
 						name='onchainInfo'
 						title='About On-chain Proposals'
 					/>
+					{currentUser.id && <Filters showOwnProposals={showOwnProposals} onShowOwnProposalChange={(value) => { setShowOwnProposal(value); }} />}
 				</Grid.Column>
 			</Grid>
 		</div>