Refactored fetchForex async function according to changes made to API, fixed a bug about setting market detail for selected search result

Author: urlDev

.eslintcache

@@ -1,7 +1,7 @@
-import React from "react";
-import { useSelector } from "utils/react-redux-hooks";
+import React from 'react';
+import { useSelector } from 'utils/react-redux-hooks';
 
-import NewsPlaceholder from "assets/newsPlaceholder.png";
+import NewsPlaceholder from 'assets/newsPlaceholder.png';
 
 import {
   MostPopularContainer,
@@ -12,7 +12,7 @@ import {
   ImageContainer,
   SeeAll,
   MostPopularWithHeader,
-} from "./MostPopular.styles";
+} from './MostPopular.styles';
 
 const MostPopular = () => {
   const { popular, width } = useSelector((state) => state.news);
@@ -35,22 +35,23 @@ const MostPopular = () => {
                 <StoryContainer>
                   <StoryTitle font="var(--font-header)">
                     {width > 830
-                      ? story.title.split(" ").slice(0, 6).join(" ")
+                      ? story.title.split(' ').slice(0, 6).join(' ')
                       : story.title}
                     ...
                   </StoryTitle>
                   <StoryTitle color="var(--gray)">
                     {width > 830
-                      ? story.abstract.split(" ").slice(0, 10).join(" ")
+                      ? story.abstract.split(' ').slice(0, 10).join(' ')
                       : story.abstract}
                     ...
                   </StoryTitle>
                 </StoryContainer>
                 <ImageContainer
                   background={
+                    (console.log(story.media[0]),
                     story.media[0]
-                      ? story.media[0]["media-metadata"][2].url
-                      : NewsPlaceholder
+                      ? story.media[0]['media-metadata'][2].url
+                      : NewsPlaceholder)
                   }
                 />
               </PopularStoriesContainer>

src/components/most-popular/MostPopular.jsx

@@ -1,16 +1,16 @@
-import { useSelector, useDispatch } from "utils/react-redux-hooks";
+import { useSelector, useDispatch } from 'utils/react-redux-hooks';
 
 import {
   fetchRating,
   fetchForex,
   clearSearchResults,
-} from "redux/actions/chart";
+} from 'redux/actions/chart';
 
-import { StoryTopicContainer } from "components/story-topic/StoryTopic.styles.js";
+import { StoryTopicContainer } from 'components/story-topic/StoryTopic.styles.js';
 import {
   UserFavoriteContainer,
   FavoriteCards,
-} from "components/user-favorites/UserFavorites.styles";
+} from 'components/user-favorites/UserFavorites.styles';
 
 const SearchResults = () => {
   const { searchResults } = useSelector((state) => state.chart);
@@ -19,23 +19,23 @@ const SearchResults = () => {
   return (
     <section
       style={{
-        margin: "0 15px",
-        position: "relative",
-        minHeight: "calc(100vh - 153px - 87px)",
+        margin: '0 15px',
+        position: 'relative',
+        minHeight: 'calc(100vh - 153px - 87px)',
       }}
     >
       <StoryTopicContainer>
-        <h1 style={{ marginTop: "25px" }}>Search Results</h1>
+        <h1 style={{ marginTop: '25px' }}>Search Results</h1>
       </StoryTopicContainer>
       <UserFavoriteContainer>
         {searchResults.length ? (
           searchResults.map((stock) => {
             return (
               <div
                 style={{
-                  display: "flex",
-                  border: "1px solid black",
-                  padding: "10px 15px",
+                  display: 'flex',
+                  border: '1px solid black',
+                  padding: '10px 15px',
                 }}
                 key={stock.symbol}
               >
@@ -47,12 +47,12 @@ const SearchResults = () => {
                     dispatch(clearSearchResults());
                   }}
                 >
-                  <h1>{stock.symbol.split("^").join("")}</h1>
+                  <h1>{stock.symbol.split('^').join('')}</h1>
 
                   <h1
                     style={{
-                      fontWeight: "normal",
-                      fontSize: "var(--size-sub-menu)",
+                      fontWeight: 'normal',
+                      fontSize: 'var(--size-sub-menu)',
                     }}
                   >
                     {stock.exchangeShortName}

src/components/search-results/SearchResults.jsx

@@ -110,9 +110,8 @@ export const fetchChartError = (error) => ({
 export const fetchForex = (markets) => async (dispatch) => {
   const marketArray = markets.split(',').sort();
   let forexList = [];
-
   // FMP API changed its services. Before I could make a batch request
-  // for getting quites. Now they dont let free account do it.
+  // for getting quotes. Now they don't let free account do it.
   // So I had to find a workaround for that with looping the free endpoint.
   try {
     for (let market of marketArray) {
@@ -122,7 +121,12 @@ export const fetchForex = (markets) => async (dispatch) => {
       const data = await response.data;
       forexList.push(data);
     }
-    return dispatch(fetchForexSuccess(forexList));
+
+    return [
+      forexList.length === 1
+        ? dispatch(setMarketDetail(forexList.flat()[0]))
+        : dispatch(fetchForexSuccess(forexList)),
+    ];
   } catch (error) {
     return dispatch(fetchChartError(error));
   }