Skip to content

Commit

Permalink
make window size smaller
Browse files Browse the repository at this point in the history 
add collapsed mode

hide on non-tweet pages

load automatically

add error messages
  • Loading branch information
@joaosantos15
joaosantos15 committed Aug 3, 2020
1 parent aa95dbf commit 6d014e5
Show file tree
Hide file tree
Showing 11 changed files with 226 additions and 74 deletions.
8 changes: 6 additions & 2 deletions public/background.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
/* global chrome */

chrome.browserAction.onClicked.addListener(function (tab) {
// chrome.browserAction.onClicked.addListener(function (tab) {
// chrome.tabs.sendMessage(tab.id, { message: 'load' });
// // chrome.browserAction.setPopup({ popup: "./popup.html" })
// });

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
chrome.tabs.sendMessage(tab.id, { message: 'load' });
// chrome.browserAction.setPopup({ popup: "./popup.html" })
});


Expand Down
6 changes: 4 additions & 2 deletions public/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,12 @@ async function onDidReceiveMessage(event) {
window.postMessage({ type: 'QUERY_PUBLISHER_RESPONSE', result }, '*');
} catch (error) {
console.log(error);
throw new Error('Response body is empty.')
window.postMessage({ type: 'QUERY_PUBLISHER_RESPONSE', result: [] }, '*');
// throw new Error('Response body is empty.')
}
} catch(error) {
throw new Error('Could not send HTTP request: ' + error);
window.postMessage({ type: 'QUERY_PUBLISHER_RESPONSE', result: [] }, '*');
// throw new Error('Could not send HTTP request: ' + error);
}
}
// PUBLISHER POSTS
Expand Down
19 changes: 19 additions & 0 deletions src/Components/Buttons.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react'

const PrimaryButton = ({ label = 'ok', onClick, disabled = false }) => {
return (
<button className="primary-button" disabled={disabled} onClick={onClick}>
{label}
</button>
)
}

const TerciaryButton = ({ label = 'ok', onClick, disabled = false }) => {
return (
<button className="terciary-button" disabled={disabled} onClick={onClick}>
{label}
</button>
)
}

export {PrimaryButton, TerciaryButton}
13 changes: 13 additions & 0 deletions src/Components/Loading.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'

export const Loading = ({label=''}) => {
return(
<div class="load-wrapp">
<div class="load-3">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
)
}
84 changes: 57 additions & 27 deletions src/Components/Reader.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { PrimaryButton, TerciaryButton } from './Buttons';
import React, { useEffect, useState } from 'react';
import { connectMetamask, signV4 } from '../services/ethereum'

import Annotation from '../Models/Annotation'
import { Loading } from './Loading'
import Logo from '../images/logo'
import { ModalContext } from '../Contexts/ModalProvider';
import { getAnnotationCIDsByReference } from '../services/graph'
Expand All @@ -13,6 +15,7 @@ const Reader = ({ setPage }) => {
const [web3Enabled, setWeb3Enabled] = useState(false)
const [title, setTitle] = useState("nothing...")
const [tweetAnnotations, setTweetAnnotations] = useState([])
const [loadingInProgress, setLoadingInProgress] = useState(false)

const sortByDate = (anno) => {
window.annotations = anno
Expand All @@ -23,8 +26,35 @@ const Reader = ({ setPage }) => {
})
}

// useEffect(() => {
// (async () => {
// const { tweetId, tweetAuthor } = getTweetData()
// let annotations = [];
// try {
// const annotationsFromPublisher = await getAnnotationsByReference({ reference: tweetId });
// for (const annotation of annotationsFromPublisher) {
// annotations.push(new Annotation({ payload: annotation }));
// }
// annotations = sortByDate(annotations)
// setTweetAnnotations(annotations);
// } catch (error) {
// // fallback to the graph and ipfs
// const annotationCIDs = await getAnnotationCIDsByReference({ reference: tweetId });
// for (const annotationCID of annotationCIDs) {
// annotations.push(new Annotation({ payload: await getAnnotationData(annotationCID) }));
// }
// annotations = sortByDate(annotations)
// setTweetAnnotations(annotations);

// } finally {
// setLoadingInProgress(false)
// }
// })();
// }, [])

useEffect(() => {
(async () => {
setLoadingInProgress(true)
const { tweetId, tweetAuthor } = getTweetData()
let annotations = [];
try {
Expand All @@ -34,14 +64,19 @@ const Reader = ({ setPage }) => {
}
annotations = sortByDate(annotations)
setTweetAnnotations(annotations);
} catch (error) {
// fallback to the graph and ipfs
const annotationCIDs = await getAnnotationCIDsByReference({ reference: tweetId });
for (const annotationCID of annotationCIDs) {
annotations.push(new Annotation({ payload: await getAnnotationData(annotationCID) }));
}
annotations = sortByDate(annotations)
setTweetAnnotations(annotations);
setLoadingInProgress(false)
}
catch (error) {
console.error("🚨", error)
setLoadingInProgress(false)
// // fallback to the graph and ipfs
// const annotationCIDs = await getAnnotationCIDsByReference({ reference: tweetId });
// for (const annotationCID of annotationCIDs) {
// annotations.push(new Annotation({ payload: await getAnnotationData(annotationCID) }));
// }
// annotations = sortByDate(annotations)
// setTweetAnnotations(annotations);

}
})();
}, [])
Expand All @@ -50,18 +85,29 @@ const Reader = ({ setPage }) => {
<ModalContext.Consumer>
{(props) => (
<div className="modal-content">
<div className="modal-content__close">
<TerciaryButton label="hide" onClick={() => setPage('collapsed')} />
</div>
<div className="modal-content__logo">
<Logo />
<h3>{`Reading comments`}</h3>
</div>
<div className="modal-content__comments">
{tweetAnnotations.length > 0 && tweetAnnotations.map(a => {
<div className="modal-content__comments modal-content__main">
{loadingInProgress && <Loading />}
{!loadingInProgress && tweetAnnotations.length > 0 && tweetAnnotations.map(a => {
return (<Comment
user={a.getShortAuthor()}
date={a.getShortDate()}
commentText={a.getContent()}
/>)
})}
{!loadingInProgress && tweetAnnotations.length === 0 && <>
<p>No anotations to display</p>
<TerciaryButton
label="Be the first to Comment!"
onClick={() => setPage('writer')}
/>
</>
}
</div>
<div className="modal-content__confirm">
<TerciaryButton
Expand Down Expand Up @@ -96,19 +142,3 @@ const Comment = ({ user, date, commentText }) => {
</div>
)
}

const PrimaryButton = ({ label = 'ok', onClick, disabled = false }) => {
return (
<button className="primary-button" disabled={disabled} onClick={onClick}>
{label}
</button>
)
}

const TerciaryButton = ({ label = 'ok', onClick, disabled = false }) => {
return (
<button className="terciary-button" disabled={disabled} onClick={onClick}>
{label}
</button>
)
}
35 changes: 22 additions & 13 deletions src/Components/Router.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@
import { PrimaryButton, TerciaryButton } from './Buttons'
import React, { useEffect, useState } from 'react';

import Reader from './Reader'
import Writer from './Writer'

const pages = {
reader: "reader",
writer: "writer"
reader: "reader",
writer: "writer",
collapsed: 'collapsed'
}

const Router = () => {
const [page, setPage] = useState(pages.reader)
const [page, setPage] = useState(pages.collapsed)
const [pageSupported, setPageSupported] = useState(false)

// switch (page) {
// case pages.reader: { return <Reader setPage={setPage} /> }
// case pages.writer: { return <Writer setPage={setPage} /> }
// }
useEffect(() => {
const tweetInfo = window.location.href.split('/')
if (tweetInfo[2] !== 'twitter.com' && tweetInfo[4] !== 'status') {
setPageSupported(false)
} else {
setPageSupported(true)
setPage(pages.reader)
}
}, [])

return(
return (
<div id="modal" className="modal-window">
<div className="modal-body">
{page === pages.reader && <Reader setPage={setPage} />}
{page === pages.writer && <Writer setPage={setPage} />}
</div>
</div>)
<div className="modal-body">
{page === pages.collapsed && <PrimaryButton label="See annotations" onClick={() => setPage('reader')} disabled={!pageSupported} />}
{page === pages.reader && <Reader setPage={setPage} />}
{page === pages.writer && <Writer setPage={setPage} />}
</div>
</div>)

}

Expand Down
43 changes: 27 additions & 16 deletions src/Components/Writer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,36 @@ import React, { useEffect, useState } from 'react';
import { connectMetamask, signV4 } from '../services/ethereum'

import Annotation from '../Models/Annotation'
import { Loading } from './Loading';
import Logo from '../images/logo'
import { ModalContext } from '../Contexts/ModalProvider';
import { getTweetData } from '../helpers'
import {sendAnnotationToPublisher} from '../services/publisher'
import { sendAnnotationToPublisher } from '../services/publisher'

const Reader = ({ setPage }) => {
const Writer = ({ setPage }) => {
const [web3Enabled, setWeb3Enabled] = useState(false)
const [title, setTitle] = useState("nothing...")
const [publishingStage, setPublishingStage] = useState(0)
const [commentContent, setCommentContent] = useState('')

const issueAnnotation = async () => {
setPublishingStage(1)
const tweetInfo = window.location.href.split('/')

if (tweetInfo[2] !== 'twitter.com' && tweetInfo[4] !== 'status') {
alert('This only works on Tweet pages')
}

const { tweetId, tweetAuthor } = getTweetData();
// if (tweetInfo[2] !== 'twitter.com' && tweetInfo[4] !== 'status') {
// alert('This only works on Tweet pages')
// }

let annotation = new Annotation({ content: commentContent, issuerEthAddress: "0xaBfEEA201208fcD0eE6a7073dFF0141dd7D7B04c", tweetAuthor, tweetId })
await annotation.sign()
// console.log(JSON.stringify(annotation.payload))
const res = await sendAnnotationToPublisher(annotation.payload);
console.log("🌐", res)
try {
const { tweetId, tweetAuthor } = getTweetData();
let annotation = new Annotation({ content: commentContent, issuerEthAddress: "0xaBfEEA201208fcD0eE6a7073dFF0141dd7D7B04c", tweetAuthor, tweetId })
await annotation.sign()
const res = await sendAnnotationToPublisher(annotation.payload);
setPublishingStage(2)
console.log("🌐", res)
} catch (e) {
setPublishingStage(3)
}
}

return (
Expand All @@ -33,14 +40,18 @@ const Reader = ({ setPage }) => {
<div className="modal-content">
<div className="modal-content__logo">
<Logo />
<h3>{`Comment Editor`}</h3>
{/* <h3>{`Comment Editor`}</h3> */}
</div>
<div className="modal-content__comment-editor">
<div className="modal-content__comment-editor modal-content__main">
<TerciaryButton
label="< Back to reading"
onClick={() => setPage('reader')}
/>
<CommentEditor commentContent={commentContent} setCommentContent={setCommentContent} />

{publishingStage === 0 && <CommentEditor commentContent={commentContent} setCommentContent={setCommentContent} />}
{publishingStage === 1 && <Loading />}
{publishingStage === 2 && <p>🚀 Your comment has been published!</p>}
{publishingStage === 3 && <p>😭 There was an error publishing your comment. Please try again.</p>}
</div>
<div className="modal-content__confirm">
<PrimaryButton
Expand All @@ -54,7 +65,7 @@ const Reader = ({ setPage }) => {
);
};

export default Reader;
export default Writer;


const CommentEditor = ({ setCommentContent, commentContent }) => {
Expand Down
Loading

0 comments on commit 6d014e5

Please sign in to comment.