diff --git a/src/components/NewsItem/index.js b/src/components/NewsItem/index.js index 1db1776..6712910 100644 --- a/src/components/NewsItem/index.js +++ b/src/components/NewsItem/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { authorHandler, checkNullOrContent, @@ -8,8 +8,16 @@ import { } from '../../data/dataHandlers'; import Link from '../Common/Link'; import { StyledNewsDateAuthor, StyledNewsItemWrapper } from './style'; +import { localStorageSetItem } from '../../utils/localStorage'; +import { isUserLoggedIn } from '../../utils/user'; export default function NewsItem({ item }) { + const isLoggedInUser = isUserLoggedIn(); + + const saveArticle = useCallback(() => { + localStorageSetItem('saved_articles', item); + }, []); + return ( + {isLoggedInUser && ( + + )}
{checkNullOrContent(item.summary)} diff --git a/src/components/NewsList/index.js b/src/components/NewsList/index.js index db172cc..e4fc300 100644 --- a/src/components/NewsList/index.js +++ b/src/components/NewsList/index.js @@ -2,8 +2,10 @@ import React, { useContext } from 'react'; import styled from 'styled-components'; import NewsItem from '../NewsItem'; import { getSortFunction, normalizeNews } from '../../data/dataHandlers'; -import { QueryParamsContext } from '../../hoc/QueryStateProvider'; +import { QueryParamsContext, useNewsState } from '../../hoc/QueryStateProvider'; import { NewsSortPanel } from '../NewsSortPanel'; +import { isUserLoggedIn } from '../../utils/user'; +import { localStorageGetItem } from '../../utils/localStorage'; const StyledNewsList = styled.div` display: flex; @@ -17,20 +19,21 @@ const StyledNewsList = styled.div` `; export default function NewsList() { - const { setNewsInStorage, newsStorage } = useContext(QueryParamsContext); + const { setNewsInStorage, newsStorage } = useNewsState(); + const isLoggedInUser = isUserLoggedIn(); + const savedArticles = localStorageGetItem('saved_articles'); const applySetSortType = (type, value) => { newsStorage.sort(getSortFunction({ key: type, value })); - setNewsInStorage(newsStorage); + setNewsInStorage([...newsStorage]); }; return ( - {newsStorage.length === 0 &&

Select filters and search for news

} - {newsStorage.length !== 0 && } - {normalizeNews(newsStorage).map(item => ( - - ))} + {!newsStorage &&

Select filters and search for news

} + {newsStorage && } + {newsStorage && + normalizeNews(newsStorage).map(item => )}
); } diff --git a/src/hoc/QueryStateProvider.js b/src/hoc/QueryStateProvider.js index de58737..a9a1a73 100644 --- a/src/hoc/QueryStateProvider.js +++ b/src/hoc/QueryStateProvider.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useReducer } from 'react'; +import React, { useEffect, useState, useReducer, useContext } from 'react'; import { keywordSetterHandler } from '../data/dataHandlers'; import { createQueryToApi, fetchingNews, initialQueryPropertyState } from '../data/APIHandlers'; @@ -43,10 +43,19 @@ const reducer = (state, { type, payload }) => { } }; -export const QueryParamsContext = React.createContext(); +export const QueryParamsContext = React.createContext({ + setResetWasClicked: () => {}, + setSubmitWasClicked: () => {}, + setNewsInStorage: () => {}, + dispatch: () => {}, + queryState: null, + newsStorage: null, +}); + +export const useNewsState = () => useContext(QueryParamsContext); export default function QueryStateProvider(props) { - const [newsStorage, setNewsInStorage] = useState([]); + const [newsStorage, setNewsInStorage] = useState(null); const [resetWasClicked, setResetWasClicked] = useState(false); const [submitWasClicked, setSubmitWasClicked] = useState(false); const [queryState, dispatch] = useReducer(reducer, initialQueryPropertyState); diff --git a/src/utils/user.js b/src/utils/user.js new file mode 100644 index 0000000..0b749cf --- /dev/null +++ b/src/utils/user.js @@ -0,0 +1,4 @@ +import { localStorageGetItem } from './localStorage'; +import { LOGIN_STATUS } from '../constants/globals'; + +export const isUserLoggedIn = () => localStorageGetItem('login_status') === LOGIN_STATUS.IN;