From 0b55f9e42542bce2017d3aa3adc8cc638adb5623 Mon Sep 17 00:00:00 2001 From: WeiXin Fam Date: Sun, 17 Oct 2021 17:41:24 +1100 Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20the=20bookmar?= =?UTF-8?q?ks=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend_new/src/App.tsx | 24 ------------------- .../src/components/BookmarkDrawer.tsx | 15 +----------- frontend_new/src/components/Cards.tsx | 7 ------ frontend_new/src/components/Res.js | 2 -- frontend_new/src/components/Search.tsx | 21 ++-------------- 5 files changed, 3 insertions(+), 66 deletions(-) diff --git a/frontend_new/src/App.tsx b/frontend_new/src/App.tsx index 1ebf501..6d1bf4f 100644 --- a/frontend_new/src/App.tsx +++ b/frontend_new/src/App.tsx @@ -10,7 +10,6 @@ import getDefaultTheme from "./components/ThemeSetting"; //using colors from theme - bit hacky but works function App() { let themeColor = localStorage.getItem("themeChoice") || getDefaultTheme(); - console.log("themeColor: ", themeColor); const [themeChoice, setThemeChoice] = React.useState( themeColor === "dark" ? dark : light @@ -26,27 +25,6 @@ function App() { localStorage.setItem("themeChoice", themeColourSwitch.palette.type); }; - const [bookmarks, setBookmarks] = React.useState<{ [key: number]: any }>({}); - function handlebookmark( - web_link: string, - primary: string, - secondary: string, - id: number - ) { - if (id in bookmarks) { - let temp_bookmarks = bookmarks; - delete temp_bookmarks[id]; - setBookmarks(temp_bookmarks); - } else { - let temp_bookmarks = bookmarks; - temp_bookmarks[id] = { - web_link: web_link, - primary: primary, - secondary: secondary, - id: id, - }; - } - } return ( @@ -54,8 +32,6 @@ function App() { diff --git a/frontend_new/src/components/BookmarkDrawer.tsx b/frontend_new/src/components/BookmarkDrawer.tsx index 0499498..01383af 100644 --- a/frontend_new/src/components/BookmarkDrawer.tsx +++ b/frontend_new/src/components/BookmarkDrawer.tsx @@ -86,13 +86,6 @@ const useStyles = makeStyles((theme: Theme) => }) ); type props = { - bookmarks: object; - handlebookmark: ( - web_link: string, - primary: string, - secondary: string, - id: number - ) => void; whichTheme: Theme; themeChange: () => void; }; @@ -188,8 +181,6 @@ export default function PersistentDrawerLeft(props: props) { primary={primary} id={id} secondary={secondary} - bookmarks={props.bookmarks} - handlebookmark={props.handlebookmark} isVisible={!open} /> @@ -209,11 +200,7 @@ export default function PersistentDrawerLeft(props: props) {
- + diff --git a/frontend_new/src/components/Cards.tsx b/frontend_new/src/components/Cards.tsx index a80802c..5fffb7c 100644 --- a/frontend_new/src/components/Cards.tsx +++ b/frontend_new/src/components/Cards.tsx @@ -19,13 +19,6 @@ type props = { primary: string; secondary: string; id: number; - handlebookmark: ( - web_link: string, - primary: string, - secondary: string, - id: number - ) => void; - bookmarks: object; isVisible: boolean; }; diff --git a/frontend_new/src/components/Res.js b/frontend_new/src/components/Res.js index c5fca68..a635fe9 100644 --- a/frontend_new/src/components/Res.js +++ b/frontend_new/src/components/Res.js @@ -49,8 +49,6 @@ function Res(props) { primary={_source.title} id={_id} secondary={_source.summary} - bookmarks={props.bookmarks} - handlebookmark={props.handlebookmark} isVisible={props.isVisible} /> diff --git a/frontend_new/src/components/Search.tsx b/frontend_new/src/components/Search.tsx index 2a16e42..b425ad3 100644 --- a/frontend_new/src/components/Search.tsx +++ b/frontend_new/src/components/Search.tsx @@ -43,13 +43,6 @@ const useStyles = makeStyles((theme: Theme) => }) ); type props = { - bookmarks: object; - handlebookmark: ( - web_link: string, - primary: string, - secondary: string, - id: number - ) => void; isVisible: boolean; }; @@ -181,13 +174,7 @@ function SearchInfo(props: props) { {query !== "" && query && ( - + )} @@ -198,11 +185,7 @@ function SearchInfo(props: props) { export default function Search(props: props) { return ( - + ); } From 1ac1b73382a9a67f94ff38fa66bc045853082f27 Mon Sep 17 00:00:00 2001 From: WeiXin Fam Date: Sun, 24 Oct 2021 11:36:12 +1100 Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Bookmarks=20refactored?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/BookmarkAction.tsx | 58 +++++++++++++++++++ frontend_new/src/components/Cards.tsx | 22 ++----- 2 files changed, 62 insertions(+), 18 deletions(-) create mode 100644 frontend_new/src/components/BookmarkAction.tsx diff --git a/frontend_new/src/components/BookmarkAction.tsx b/frontend_new/src/components/BookmarkAction.tsx new file mode 100644 index 0000000..a86c44f --- /dev/null +++ b/frontend_new/src/components/BookmarkAction.tsx @@ -0,0 +1,58 @@ +export const enum BookmarksAction { + ADD = "ADD", + DELETE = "DELETE", + INVALID = "INVALID", +} + +type props = { + web_link: string; + primary: string; + secondary: string; + id: number; + isVisible: boolean; +}; + +export default function bookmarkAction(action: BookmarksAction, props: props) { + switch (action) { + case BookmarksAction.ADD: + addArticle(props); + break; + case BookmarksAction.DELETE: + removeArticle(props); + break; + } +} + +function addArticle(props: props) { + let articleSavedObject = JSON.parse( + localStorage.getItem("articles") || "null" + ); + + // Add article + let articleDetails = { + id: props.id, + web_link: props.web_link, + primary: props.primary, + secondary: props.secondary, + }; + // Check if the Object is null and decalre {} + if ( + articleSavedObject === null || + Object.keys(articleSavedObject).length === 0 + ) { + let articleInitialObject: any = {}; + articleSavedObject = articleInitialObject; + } + articleSavedObject[props.id.toString()] = articleDetails; + localStorage.setItem("articles", JSON.stringify(articleSavedObject)); +} + +function removeArticle(props: props) { + let articleSavedObject = JSON.parse( + localStorage.getItem("articles") || "null" + ); + + // Remove the saved article + delete articleSavedObject[props.id]; + localStorage.setItem("articles", JSON.stringify(articleSavedObject)); +} diff --git a/frontend_new/src/components/Cards.tsx b/frontend_new/src/components/Cards.tsx index 5fffb7c..f8ec4b7 100644 --- a/frontend_new/src/components/Cards.tsx +++ b/frontend_new/src/components/Cards.tsx @@ -13,6 +13,8 @@ import Grid from "@material-ui/core/Grid"; import { useTheme } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles"; import { customColours } from "../themes/customTheme"; +import bookmarkAction from "./BookmarkAction"; +import { BookmarksAction } from "./BookmarkAction"; type props = { web_link: string; @@ -41,27 +43,11 @@ export default function SimpleCard(props: props) { if (articleSavedObject && articleSavedObject.hasOwnProperty(props.id)) { // Remove the saved article setBookmarked(false); - delete articleSavedObject[props.id]; - localStorage.setItem("articles", JSON.stringify(articleSavedObject)); + bookmarkAction(BookmarksAction.DELETE, props); } else { // Add article setBookmarked(true); - let articleDetails = { - id: props.id, - web_link: props.web_link, - primary: props.primary, - secondary: props.secondary, - }; - // Check if the Object is null and decalre {} - if ( - articleSavedObject === null || - Object.keys(articleSavedObject).length === 0 - ) { - let articleInitialObject: any = {}; - articleSavedObject = articleInitialObject; - } - articleSavedObject[props.id.toString()] = articleDetails; - localStorage.setItem("articles", JSON.stringify(articleSavedObject)); + bookmarkAction(BookmarksAction.ADD, props); } }