Fix Context data update

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 (
     <StyledNewsItemWrapper className="news__item" justifyContent="start" alignItems="flex-start">
       <img
@@ -37,6 +45,16 @@ export default function NewsItem({ item }) {
                 {newsSourceHandler(item.author, item.clean_url)}
               </span>
             </div>
+            {isLoggedInUser && (
+              <button onClick={saveArticle}>
+                <svg width="25" height="25" viewBox="0 0 25 25">
+                  <path
+                    d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z"
+                    fillRule="evenodd"
+                  />
+                </svg>
+              </button>
+            )}
           </StyledNewsDateAuthor>
           <div className="news__summary">
             {checkNullOrContent(item.summary)}

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 (
     <StyledNewsList>
-      {newsStorage.length === 0 && <h3>Select filters and search for news</h3>}
-      {newsStorage.length !== 0 && <NewsSortPanel onclickHandler={applySetSortType} />}
-      {normalizeNews(newsStorage).map(item => (
-        <NewsItem item={item} key={item._id} />
-      ))}
+      {!newsStorage && <h3>Select filters and search for news</h3>}
+      {newsStorage && <NewsSortPanel onclickHandler={applySetSortType} />}
+      {newsStorage &&
+        normalizeNews(newsStorage).map(item => <NewsItem item={item} key={item._id} />)}
     </StyledNewsList>
   );
 }

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);

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;