From ec92ee23134e26afc66069407fea5222310a5d9e Mon Sep 17 00:00:00 2001 From: salamisodikiolawale Date: Sun, 29 Jan 2023 10:12:15 +0100 Subject: [PATCH 01/18] Started button to add favorite feeds --- src/App.css | 10 +++++++ src/components/ FavoriteButton.jsx | 45 ++++++++++++++++++++++++++++++ src/components/EpisodeList.jsx | 9 ++++++ 3 files changed, 64 insertions(+) create mode 100644 src/components/ FavoriteButton.jsx diff --git a/src/App.css b/src/App.css index a64d7ea..0a3cf21 100755 --- a/src/App.css +++ b/src/App.css @@ -49,6 +49,14 @@ img { border: 1px solid #ccc; } +.favorite{ + cursor: pointer; + margin: 0.5rem auto; +} +.favorite:hover { + fill: rgb(250, 218, 148); +} + @keyframes spin { 0% { transform: rotate(0deg); @@ -65,4 +73,6 @@ img { to { transform: rotate(360deg); } + + } diff --git a/src/components/ FavoriteButton.jsx b/src/components/ FavoriteButton.jsx new file mode 100644 index 0000000..8b3001a --- /dev/null +++ b/src/components/ FavoriteButton.jsx @@ -0,0 +1,45 @@ +import React from "react"; +import SvgIcon from '@material-ui/core/SvgIcon'; +import amber from '@material-ui/core/colors/amber'; +import grey from '@material-ui/core/colors/grey'; +import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; + +const FavoriteButton = ({selected, onClickAction}) => { + + const theme = createMuiTheme({ + palette: { + primary: { + light: amber[100], + main: amber[500], + dark: amber[800], + contrastText: '#fff', + }, + secondary: { + light: grey[100], + main: grey[400], + dark: grey[800], + contrastText: '#000', + } + }, + }); + + + + const StarIcon = (props) => { + return ( + + + + ); + }; + + return ( +
+ + + +
+ ); +}; + +export default FavoriteButton; \ No newline at end of file diff --git a/src/components/EpisodeList.jsx b/src/components/EpisodeList.jsx index 280da89..ecc88c0 100644 --- a/src/components/EpisodeList.jsx +++ b/src/components/EpisodeList.jsx @@ -1,6 +1,8 @@ import React, { Component } from "react"; +import FavoriteButton from "./FavoriteButton"; import Episode from "./Episode"; + class EpisodeList extends Component { cardStyle = { width: "20vw", @@ -15,6 +17,10 @@ class EpisodeList extends Component { episodes, } = this.props; + const toggleFavorite = () => { + alert('test'); + } + return (
{episodes ? ( @@ -28,6 +34,9 @@ class EpisodeList extends Component { />
{program_title}
+
Date: Sun, 29 Jan 2023 14:59:39 +0100 Subject: [PATCH 02/18] Created button to open future pop up --- src/App.css | 4 ++++ src/components/UserForm.jsx | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index a64d7ea..8c0ef9f 100755 --- a/src/App.css +++ b/src/App.css @@ -66,3 +66,7 @@ img { transform: rotate(360deg); } } + +.options-nav { + display: flex; +} \ No newline at end of file diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx index 79bdbba..13598b6 100644 --- a/src/components/UserForm.jsx +++ b/src/components/UserForm.jsx @@ -39,7 +39,11 @@ const UserForm = ({ getFeed, previous_feeds, past }) => { > Submit - {past ? :
} + {past ? :
}
); From 5202f868e842c45f7ee7a020abe114390f961999 Mon Sep 17 00:00:00 2001 From: Margot Rasamy Date: Sun, 29 Jan 2023 15:07:55 +0100 Subject: [PATCH 03/18] Added favorite dialog component / pop up to display favorites --- src/App.js | 7 +++++ src/components/FavoriteDialog.jsx | 50 +++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/components/FavoriteDialog.jsx diff --git a/src/App.js b/src/App.js index cdfec73..8b17e46 100755 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,8 @@ import "./App.css"; import EpisodeList from "./components/EpisodeList"; import UserForm from "./components/UserForm"; import LoadingStatus from "./components/LoadingStatus"; +import FavoriteDialog from "./components/FavoriteDialog"; +import { useRef } from "react"; const App = ({ fetching }) => { const [fetched, setFetched] = useState({}); @@ -20,6 +22,8 @@ const App = ({ fetching }) => { const [past, setPast] = useState(false); const [error, setError] = useState(false); + const favoritesPopUpRef = useRef(); + const getFeed = (event) => { setFetching((prev) => !prev); if (event.preventDefault != null) @@ -112,6 +116,9 @@ const App = ({ fetching }) => { program_image={fetched.program_image} fetching={fetching} /> + + {/* Favorite feeds list dialog component */} +
); }; diff --git a/src/components/FavoriteDialog.jsx b/src/components/FavoriteDialog.jsx new file mode 100644 index 0000000..f914a1f --- /dev/null +++ b/src/components/FavoriteDialog.jsx @@ -0,0 +1,50 @@ +import React, { useState, useContext } from 'react'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import DialogActions from '@material-ui/core/DialogActions'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import "../App.css"; +const { forwardRef, useImperativeHandle } = React; + +const FavoriteDialog = forwardRef((props, ref) => { + + const [open, setOpen] = useState(false); + + const handleClose = () => { + setOpen(false); + } + const handleClickOpen = () => { + setOpen(true); + } + + useImperativeHandle(ref, () => { return { + handleClickOpen: handleClickOpen, + handleClose: handleClose + }}); + + return ( +
+ handleClose()} + scroll={'paper'} + maxWidth={'md'} + aria-labelledby="scroll-dialog-title" + > + Favorite feeds + +

Favorite item placeholder

+ + + + + +
+ ); +}); + + +export default FavoriteDialog; \ No newline at end of file From 56a9c2905074f340f9a0791618b4aa17528cdbd9 Mon Sep 17 00:00:00 2001 From: Margot Rasamy Date: Sun, 29 Jan 2023 15:13:52 +0100 Subject: [PATCH 04/18] Moved searchHistory component call from UserForm.jsx to App.js to avoid the use of props to open popUp with ref --- src/App.js | 7 +++++++ src/components/UserForm.jsx | 8 +------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 8b17e46..9b909b3 100755 --- a/src/App.js +++ b/src/App.js @@ -14,6 +14,7 @@ import UserForm from "./components/UserForm"; import LoadingStatus from "./components/LoadingStatus"; import FavoriteDialog from "./components/FavoriteDialog"; import { useRef } from "react"; +import SearchHistory from "./components/SearchHistory"; const App = ({ fetching }) => { const [fetched, setFetched] = useState({}); @@ -105,6 +106,12 @@ const App = ({ fetching }) => { past={past} previous_feeds={[...previousFeeds]} /> + + {past ? :
} + {error ? renderAlert() :
} {!past ?

Please enter an RSS feed

:
} diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx index 13598b6..f0f1972 100644 --- a/src/components/UserForm.jsx +++ b/src/components/UserForm.jsx @@ -1,9 +1,8 @@ import React, { useState } from "react"; import Input from "@material-ui/core/Input"; import Button from "@material-ui/core/Button"; -import SearchHistory from "./SearchHistory"; -const UserForm = ({ getFeed, previous_feeds, past }) => { +const UserForm = ({ getFeed }) => { const [enabled, setEnabled] = useState(true); const [feeds, setFeeds] = useState([]); @@ -39,11 +38,6 @@ const UserForm = ({ getFeed, previous_feeds, past }) => { > Submit - {past ? :
}
); From 3457921682c7ad45ec513ae4a50f905d0ad9a8c3 Mon Sep 17 00:00:00 2001 From: Margot Rasamy Date: Tue, 31 Jan 2023 11:07:41 +0100 Subject: [PATCH 05/18] Removed warnings --- src/components/FavoriteDialog.jsx | 2 +- src/components/SearchHistory.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FavoriteDialog.jsx b/src/components/FavoriteDialog.jsx index f914a1f..4a25087 100644 --- a/src/components/FavoriteDialog.jsx +++ b/src/components/FavoriteDialog.jsx @@ -1,4 +1,4 @@ -import React, { useState, useContext } from 'react'; +import React, { useState } from 'react'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; diff --git a/src/components/SearchHistory.jsx b/src/components/SearchHistory.jsx index 1856814..48afd04 100644 --- a/src/components/SearchHistory.jsx +++ b/src/components/SearchHistory.jsx @@ -9,7 +9,7 @@ export default function SearchHistory(props) { }; const handleClose = (event) => { - if (event.currentTarget.innerText != '') + if (event.currentTarget.innerText !== '') props.getFeed({target: {elements: {feed_url: {value: event.currentTarget.innerText}}}}); setAnchorEl(null); }; From 3c97afaf4f280744049c298c12e750a86a5ae918 Mon Sep 17 00:00:00 2001 From: salamisodikiolawale Date: Tue, 31 Jan 2023 15:36:09 +0100 Subject: [PATCH 06/18] refactor the class component into function component for consistency --- src/components/EpisodeList.jsx | 117 +++++++++--------- ... FavoriteButton.jsx => FavoriteButton.jsx} | 0 2 files changed, 57 insertions(+), 60 deletions(-) rename src/components/{ FavoriteButton.jsx => FavoriteButton.jsx} (100%) diff --git a/src/components/EpisodeList.jsx b/src/components/EpisodeList.jsx index ecc88c0..8c54ba8 100644 --- a/src/components/EpisodeList.jsx +++ b/src/components/EpisodeList.jsx @@ -1,72 +1,69 @@ -import React, { Component } from "react"; +import React from "react"; import FavoriteButton from "./FavoriteButton"; import Episode from "./Episode"; +import { useState } from "react"; -class EpisodeList extends Component { - cardStyle = { - width: "20vw", - float: "left", - }; +const EpisodeList = ({ + program_title, + program_description, + program_image, + episodes, + }) => { + + + // eslint-disable-next-line no-unused-vars + const [cardStyle, setCardStyle] = useState({width: "20vw", float: "left"}); - render() { - const { - program_title, - program_description, - program_image, - episodes, - } = this.props; - - const toggleFavorite = () => { - alert('test'); - } + const toggleFavorite = () => { + alert('test'); + } - return ( -
- {episodes ? ( -
- -
- {program_title} + {episodes ? ( +
+ +
+ {program_title} +
+
{program_title}
+ +
-
-
{program_title}
- -
-
- {episodes.map((episode, i) => ( - - ))}
- ) : ( -
- )} -
- ); - } + {episodes.map((episode, i) => ( + + ))} +
+ ) : ( +
+ )} +
+ ); } export default EpisodeList; diff --git a/src/components/ FavoriteButton.jsx b/src/components/FavoriteButton.jsx similarity index 100% rename from src/components/ FavoriteButton.jsx rename to src/components/FavoriteButton.jsx From fa01126bc8cf9c698b7ac9792b47521cef4c93db Mon Sep 17 00:00:00 2001 From: salamisodikiolawale Date: Tue, 31 Jan 2023 16:25:19 +0100 Subject: [PATCH 07/18] Stored favorites feed in the localstorage --- src/App.js | 2 ++ src/components/EpisodeList.jsx | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 9b909b3..1dcbda8 100755 --- a/src/App.js +++ b/src/App.js @@ -48,6 +48,7 @@ const App = ({ fetching }) => { program_title: feed.title, program_image: feed.image.url, program_description: feed.description, + program_link: feed.link, }); setFetching((prev) => !prev); setPreviousFeeds([...new Set([...previousFeeds, feed_url])]); @@ -122,6 +123,7 @@ const App = ({ fetching }) => { program_description={fetched.program_description} program_image={fetched.program_image} fetching={fetching} + program_link={fetched.program_link} /> {/* Favorite feeds list dialog component */} diff --git a/src/components/EpisodeList.jsx b/src/components/EpisodeList.jsx index 8c54ba8..bff43e7 100644 --- a/src/components/EpisodeList.jsx +++ b/src/components/EpisodeList.jsx @@ -9,15 +9,29 @@ const EpisodeList = ({ program_description, program_image, episodes, + program_link }) => { + const checkLocalStorage = () => { + return !!localStorage.getItem(`favorite-${program_link}`); + } // eslint-disable-next-line no-unused-vars const [cardStyle, setCardStyle] = useState({width: "20vw", float: "left"}); + const [selectedValue, setSelectedValue] = useState(checkLocalStorage); const toggleFavorite = () => { - alert('test'); + const feed_data = { + program_title, + program_description, + program_image, + program_link, + }; + + selectedValue? localStorage.removeItem(`favorite-${program_link}`) : localStorage.setItem(`favorite-${program_link}`, JSON.stringify(feed_data)); + setSelectedValue(checkLocalStorage); } + return (
@@ -33,7 +47,7 @@ const EpisodeList = ({
{program_title}
Date: Tue, 31 Jan 2023 17:00:20 +0100 Subject: [PATCH 08/18] Styled pop up favorite item --- src/App.css | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/src/App.css b/src/App.css index 331bbba..ac11392 100755 --- a/src/App.css +++ b/src/App.css @@ -79,4 +79,79 @@ img { .options-nav { display: flex; +} + +/* Favorites list section */ +.favorites-list-section { + /* padding: 1rem; */ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.favorite-item { + background-color: rgb(242, 242, 242); + border-radius: 2px; + margin: 1rem; + padding:1rem; + display: flex; + justify-content: space-between; +} + +.favorite-item .action-container { + cursor: pointer; + display: flex; + justify-content: space-between; + /* height: 200px; */ +} + +.favorite-item .action-container > * { + margin: 5px; +} + +.favorite-item .img-container { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 150px; + height: 150px; +} + +.favorite-item .img-container > img { + max-height: 100%; + max-width: 100%; + object-position: center; + object-fit: cover; +} + +.favorite-item .action-container .informations { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.favorite-item .informations > .title { + font-weight: bold; + font-size: 21px; +} + +.favorite-item .informations > .description { + text-overflow: ellipsis; + overflow: hidden; + /* CSS properties for ellipsis overflow after 5 lines of text */ + display: block; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; + max-height: 5 * 1.6rem; +} + +@media screen and (max-width: 600px) { + .favorite-item { + flex-direction: column; + } + + .favorite-item .action-container { + flex-direction: column; + } } \ No newline at end of file From c9f7cb76209d9e3f950ee8759a600073be1ebf0f Mon Sep 17 00:00:00 2001 From: salamisodikiolawale Date: Tue, 31 Jan 2023 17:46:50 +0100 Subject: [PATCH 09/18] Add data in popup --- src/components/FavoriteDialog.jsx | 29 ++++++++++++++++++++++- src/components/FavoriteItem.jsx | 38 +++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/components/FavoriteItem.jsx diff --git a/src/components/FavoriteDialog.jsx b/src/components/FavoriteDialog.jsx index 4a25087..6c53330 100644 --- a/src/components/FavoriteDialog.jsx +++ b/src/components/FavoriteDialog.jsx @@ -5,6 +5,7 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogTitle from '@material-ui/core/DialogTitle'; import "../App.css"; +import FavoriteItem from './FavoriteItem'; const { forwardRef, useImperativeHandle } = React; const FavoriteDialog = forwardRef((props, ref) => { @@ -23,6 +24,18 @@ const FavoriteDialog = forwardRef((props, ref) => { handleClose: handleClose }}); + const getFavoritesFeeds = () => { + + let favorites = []; + for (let [key, value] of Object.entries(localStorage)) { + if (key.startsWith('favorite-')) { + favorites.push(JSON.parse(value)); + } + } + return favorites; + } + + return (
{ > Favorite feeds -

Favorite item placeholder

+
+ + { + getFavoritesFeeds().length > 0 ? getFavoritesFeeds().map((item, i) => { + return ( + {handleClose()}} + key={i} index={i} />) + }) + : +
No favorites
+ } + +
); + const isFavoriteSelected = (link) => { + return favoriteFeeds.some(el => el.program_link === link); + } + + const updateFavoritesFeeds = () => { + let favorites = []; + for (let [key, value] of Object.entries(localStorage)) { + if (key.startsWith('favorite-')) { + favorites.push(JSON.parse(value)); + } + } + setFavoriteFeeds(favorites); + } + + useEffect(() => { + updateFavoritesFeeds(); + }, []); + return (
@@ -108,26 +127,29 @@ const App = ({ fetching }) => { previous_feeds={[...previousFeeds]} /> - {past ? :
} + {past ? <> + + + :
} {error ? renderAlert() :
} {!past ?

Please enter an RSS feed

:
} - - {/* Favorite feeds list dialog component */} - +
); }; diff --git a/src/components/EpisodeList.jsx b/src/components/EpisodeList.jsx index bff43e7..3638930 100644 --- a/src/components/EpisodeList.jsx +++ b/src/components/EpisodeList.jsx @@ -4,21 +4,18 @@ import Episode from "./Episode"; import { useState } from "react"; -const EpisodeList = ({ +const EpisodeList = ({ program_title, program_description, program_image, episodes, - program_link + program_link, + updateFavorites, + isFavoriteSelected }) => { - const checkLocalStorage = () => { - return !!localStorage.getItem(`favorite-${program_link}`); - } - // eslint-disable-next-line no-unused-vars const [cardStyle, setCardStyle] = useState({width: "20vw", float: "left"}); - const [selectedValue, setSelectedValue] = useState(checkLocalStorage); const toggleFavorite = () => { const feed_data = { @@ -28,10 +25,9 @@ const EpisodeList = ({ program_link, }; - selectedValue? localStorage.removeItem(`favorite-${program_link}`) : localStorage.setItem(`favorite-${program_link}`, JSON.stringify(feed_data)); - setSelectedValue(checkLocalStorage); + isFavoriteSelected(program_link) ? localStorage.removeItem(`favorite-${program_link}`) : localStorage.setItem(`favorite-${program_link}`, JSON.stringify(feed_data)); + updateFavorites(); } - return (
@@ -47,7 +43,7 @@ const EpisodeList = ({
{program_title}
{ }, }); - - const StarIcon = (props) => { return ( diff --git a/src/components/FavoriteDialog.jsx b/src/components/FavoriteDialog.jsx index 6c53330..1c1f778 100644 --- a/src/components/FavoriteDialog.jsx +++ b/src/components/FavoriteDialog.jsx @@ -23,18 +23,6 @@ const FavoriteDialog = forwardRef((props, ref) => { handleClickOpen: handleClickOpen, handleClose: handleClose }}); - - const getFavoritesFeeds = () => { - - let favorites = []; - for (let [key, value] of Object.entries(localStorage)) { - if (key.startsWith('favorite-')) { - favorites.push(JSON.parse(value)); - } - } - return favorites; - } - return (
@@ -50,10 +38,12 @@ const FavoriteDialog = forwardRef((props, ref) => {
{ - getFavoritesFeeds().length > 0 ? getFavoritesFeeds().map((item, i) => { + props.favoriteFeeds.length > 0 ? props.favoriteFeeds.map((item, i) => { return ( {handleClose()}} key={i} index={i} />) }) diff --git a/src/components/FavoriteItem.jsx b/src/components/FavoriteItem.jsx index 207c4ca..7535391 100644 --- a/src/components/FavoriteItem.jsx +++ b/src/components/FavoriteItem.jsx @@ -1,18 +1,12 @@ -import React, { useState } from "react"; +import React from "react"; import "../App.css"; import FavoriteButton from "./FavoriteButton"; -const FavoriteItem = ({item, index, closePopUp}) => { - - const checkLocalStorage = () => { - return !!localStorage.getItem(`favorite-${item.program_link}`); - } - - const [selectedValue, setSelectedValue] = useState(checkLocalStorage); +const FavoriteItem = ({item, index, closePopUp, updateFavorites, isFavoriteSelected}) => { const removeFavorite = () => { localStorage.removeItem(`favorite-${item.program_link}`); - setSelectedValue(false); + updateFavorites(); } return ( @@ -29,7 +23,7 @@ const FavoriteItem = ({item, index, closePopUp}) => {

{item.program_description}

-
) From 81d5c0f3fb4a8ee47445f024b5ae42c73b9b54c1 Mon Sep 17 00:00:00 2001 From: Margot Rasamy Date: Tue, 31 Jan 2023 19:40:10 +0100 Subject: [PATCH 11/18] Send getFeed method to FavoriteItem component to see favorite on item click --- src/App.js | 4 ++-- src/components/FavoriteDialog.jsx | 1 + src/components/FavoriteItem.jsx | 9 +++++++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 77bfaa6..ea97131 100755 --- a/src/App.js +++ b/src/App.js @@ -49,7 +49,7 @@ const App = ({ fetching }) => { program_title: feed.title, program_image: feed.image.url, program_description: feed.description, - program_link: feed.link, + program_link: feed_url, }); setFetching((prev) => !prev); setPreviousFeeds([...new Set([...previousFeeds, feed_url])]); @@ -149,7 +149,7 @@ const App = ({ fetching }) => { {/* Favorite feeds list dialog component */} - +
); }; diff --git a/src/components/FavoriteDialog.jsx b/src/components/FavoriteDialog.jsx index 1c1f778..80f20cb 100644 --- a/src/components/FavoriteDialog.jsx +++ b/src/components/FavoriteDialog.jsx @@ -43,6 +43,7 @@ const FavoriteDialog = forwardRef((props, ref) => { {handleClose()}} key={i} index={i} />) diff --git a/src/components/FavoriteItem.jsx b/src/components/FavoriteItem.jsx index 7535391..de8d1c0 100644 --- a/src/components/FavoriteItem.jsx +++ b/src/components/FavoriteItem.jsx @@ -2,16 +2,21 @@ import React from "react"; import "../App.css"; import FavoriteButton from "./FavoriteButton"; -const FavoriteItem = ({item, index, closePopUp, updateFavorites, isFavoriteSelected}) => { +const FavoriteItem = ({item, index, closePopUp, updateFavorites, isFavoriteSelected, getFeed}) => { const removeFavorite = () => { localStorage.removeItem(`favorite-${item.program_link}`); updateFavorites(); } + const seeFavorite = (link) => { + getFeed({target: {elements: {feed_url: {value: link}}}}); + closePopUp(); + }; + return (
-
+
seeFavorite(item.program_link)}>
Date: Tue, 31 Jan 2023 21:37:44 +0100 Subject: [PATCH 12/18] Added a method to format URL to avoid duplicate favorites when URL entered doesn't contain https prefix --- src/App.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index ea97131..d69a233 100755 --- a/src/App.js +++ b/src/App.js @@ -30,7 +30,7 @@ const App = ({ fetching }) => { setFetching((prev) => !prev); if (event.preventDefault != null) event.preventDefault(); - const feed_url = event.target.elements.feed_url.value; + const feed_url = formatUrl(event.target.elements.feed_url.value); const Parser = require("rss-parser"); const parser = new Parser({ customFields: { @@ -70,6 +70,10 @@ const App = ({ fetching }) => { } }; + const formatUrl = (url) => { + return url.startsWith('https://') ? url : `https://${url}`; + }; + const handleClose = () => { setFetching(false); setError(false); From 8feac3d14ae4b8e9ea431cf432fae5940bc92e9d Mon Sep 17 00:00:00 2001 From: Margot Rasamy Date: Mon, 6 Feb 2023 08:28:28 +0100 Subject: [PATCH 13/18] URL formatting to avoid duplicate favorites --- src/App.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index d69a233..621c7a0 100755 --- a/src/App.js +++ b/src/App.js @@ -70,8 +70,18 @@ const App = ({ fetching }) => { } }; + // Formatting method for URLs to avoid having duplicate favorites in localstorage as the key used is the URL const formatUrl = (url) => { - return url.startsWith('https://') ? url : `https://${url}`; + let urlSequence; + let finalUrl; + if (url.includes('://')) { + urlSequence = url.split('://')[1]; + finalUrl = 'https://' + urlSequence; + } else { + finalUrl = 'https://' + url; + } + + return finalUrl; }; const handleClose = () => { From b738b50b0edbfc28fcabb5e0aa53e93992a0fa2c Mon Sep 17 00:00:00 2001 From: Margot Rasamy Date: Mon, 6 Feb 2023 18:40:40 +0100 Subject: [PATCH 14/18] Removed unused props --- src/App.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 621c7a0..746c9b9 100755 --- a/src/App.js +++ b/src/App.js @@ -135,11 +135,7 @@ const App = ({ fetching }) => {

quick-feed

setFetching(true)} - past={past} - previous_feeds={[...previousFeeds]} - /> + getFeed={getFeed} /> {past ? <>