From 889112dd9d8d12dbf3627df6c18233103f0e1e2f Mon Sep 17 00:00:00 2001 From: Dhravya Date: Fri, 12 Apr 2024 18:48:35 -0700 Subject: [PATCH 1/6] added overlay for importing tweets --- apps/extension/src/App.tsx | 4 +-- apps/extension/src/SideBar.tsx | 53 ++++++++++++++++++++++++++++---- apps/extension/src/background.ts | 4 +-- 3 files changed, 51 insertions(+), 10 deletions(-) diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx index 89227432..c29d98a2 100644 --- a/apps/extension/src/App.tsx +++ b/apps/extension/src/App.tsx @@ -44,7 +44,7 @@ function App() { getUserData(); }, []); - // TODO: Implement getting bookmarks from API directly + // TODO: Implement getting bookmarks from Twitter API directly // const [status, setStatus] = useState(''); // const [bookmarks, setBookmarks] = useState([]); @@ -149,7 +149,7 @@ function App() { ); } -// TODO: Implement getting bookmarks from API directly +// TODO: Implement getting bookmarks from Twitter API directly // async function fetchAllBookmarks( // authorizationHeader: string, // csrfToken: string, diff --git a/apps/extension/src/SideBar.tsx b/apps/extension/src/SideBar.tsx index 890619ca..7743be5e 100644 --- a/apps/extension/src/SideBar.tsx +++ b/apps/extension/src/SideBar.tsx @@ -36,7 +36,7 @@ function sendUrlToAPI() { } function SideBar() { - // TODO: Implement getting bookmarks from API directly + // TODO: Implement getting bookmarks from Twitter API directly // chrome.runtime.onMessage.addListener(function (request) { // if (request.action === 'showProgressIndicator') { // // TODO: SHOW PROGRESS INDICATOR @@ -52,6 +52,10 @@ function SideBar() { const [selectedSpaces, setSelectedSpaces] = useState([0, 1]); + const [isImportingTweets, setIsImportingTweets] = useState(false); + + const [log, setLog] = useState([]); + interface TweetData { tweetText: string; postUrl: string; @@ -63,6 +67,9 @@ function SideBar() { const fetchBookmarks = () => { const tweets: TweetData[] = []; // Initialize an empty array to hold all tweet elements + setIsImportingTweets(true); + console.log("Importing tweets"); + const scrollInterval = 1000; const scrollStep = 5000; // Pixels to scroll on each step @@ -75,10 +82,12 @@ function SideBar() { if (currentTweetCount === previousTweetCount) { unchangedCount++; if (unchangedCount >= 2) { - // Stop if the count has not changed 5 times - console.log("Scraping complete"); - console.log("Total tweets scraped: ", tweets.length); - console.log("Downloading tweets as JSON..."); + setLog([ + ...log, + "Scraping complete", + `Total tweets scraped: ${tweets.length}`, + "Downloading tweets as JSON...", + ]); clearInterval(scrollToEndIntervalID); // Stop scrolling observer.disconnect(); // Stop observing DOM changes downloadTweetsAsJson(tweets); // Download the tweets list as a JSON file @@ -128,7 +137,8 @@ function SideBar() { time: time ?? "", postUrl, }); - console.log("Tweets capturados: ", tweets.length); + + setLog([...log, `Scraped tweet: ${tweets.length}`]); } }); } @@ -149,6 +159,7 @@ function SideBar() { observer.observe(document.body, { childList: true, subtree: true }); function downloadTweetsAsJson(tweetsArray: TweetData[]) { + setIsImportingTweets(false); const jsonData = JSON.stringify(tweetsArray); // Convert the array to JSON // TODO: SEND jsonData to server @@ -158,6 +169,35 @@ function SideBar() { return ( <> + {isImportingTweets && ( +
+
+
+ + + +

Importing your tweets...

+
+ {log.map((message, index) => ( +

{message}

+ ))} +
+
+
+
+ )} +
{window.location.href.includes("twitter.com") || @@ -215,6 +255,7 @@ function SideBar() {