News Completed 1.30.00

src/app/store.js

@@ -1,9 +1,11 @@
 import {configureStore} from "@reduxjs/toolkit";
 
 import { cryptoApi } from "../services/cryptoApi";
+import { cryptoNewsApi } from "../services/cryptoNewsApi";
 
 export default configureStore({
     reducer: {
         [cryptoApi.reducerPath]: cryptoApi.reducer,
+        [cryptoNewsApi.reducerPath]: cryptoNewsApi.reducer,
     },
 });

src/components/News.jsx

@@ -1,11 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Select, Typography, Row, Col, Avatar, Card } from 'antd';
+import moment from 'moment';
 
-const News = () => {
-    return (
-        <div>
-            News
-        </div>
-    )
-}
+import { useGetCryptosQuery } from '../services/cryptoApi';
+import { useGetCryptoNewsQuery } from '../services/cryptoNewsApi';
+// import Loader from './Loader';
 
-export default News;
+const demoImage = 'https://www.bing.com/th?id=OVFT.mpzuVZnv8dwIMRfQGPbOPC&pid=News';
+
+const { Text, Title } = Typography;
+const { Option } = Select;
+
+const News = ({ simplified }) => {
+  const [newsCategory, setNewsCategory] = useState('Cryptocurrency');
+  const { data } = useGetCryptosQuery(100);
+  const { data: cryptoNews } = useGetCryptoNewsQuery({ newsCategory, count: simplified ? 6 : 12 });
+
+  if (!cryptoNews?.value) return "Loading ... ";
+
+  return (
+    <Row gutter={[24, 24]}>
+      {!simplified && (
+        <Col span={24}>
+          <Select
+            showSearch
+            className="select-news"
+            placeholder="Select a Crypto"
+            optionFilterProp="children"
+            onChange={(value) => setNewsCategory(value)}
+            filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+          >
+            <Option value="Cryptocurency">Cryptocurrency</Option>
+            {data?.data?.coins?.map((currency) => <Option value={currency.name}>{currency.name}</Option>)}
+          </Select>
+        </Col>
+      )}
+      {cryptoNews.value.map((news, i) => (
+        <Col xs={24} sm={12} lg={8} key={i}>
+          <Card hoverable className="news-card">
+            <a href={news.url} target="_blank" rel="noreferrer">
+              <div className="news-image-container">
+                <Title className="news-title" level={4}>{news.name}</Title>
+                <img src={news?.image?.thumbnail?.contentUrl || demoImage} alt="" />
+              </div>
+              <p>{news.description.length > 100 ? `${news.description.substring(0, 100)}...` : news.description}</p>
+              <div className="provider-container">
+                <div>
+                  <Avatar src={news.provider[0]?.image?.thumbnail?.contentUrl || demoImage} alt="" />
+                  <Text className="provider-name">{news.provider[0]?.name}</Text>
+                </div>
+                <Text>{moment(news.datePublished).startOf('ss').fromNow()}</Text>
+              </div>
+            </a>
+          </Card>
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+export default News;

src/services/cryptoNewsApi.js

@@ -0,0 +1,47 @@
+// import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+// const cryptoNewsHeaders = {
+//     'x-bingapis-sdk': 'true',
+//     'x-rapidapi-host': 'bing-news-search1.p.rapidapi.com',
+//     'x-rapidapi-key': 'a8924a5502mshb3bb86466be27e4p19e6c6jsnccd6b54c4ea0'
+// }
+
+// const baseUrl = "https://bing-news-search1.p.rapidapi.com";
+
+// const createRequest = (url) => ({ url, headers: cryptoNewsHeaders });
+
+// export const cryptoNewsApi = createApi({
+//     reducerPath: 'cryptoNewsApi',
+//     baseQuery: fetchBaseQuery({ baseUrl }),
+//     endpoints: (builder) => ({
+//         getCryptoNews: builder.query({
+//             query: ({newsCategory, count}) => createRequest(`/news/search?q=${newsCategory}&safeSearch=Off&textFormat=Raw&freshness=Day&limit=${count}`)
+//         })
+//     })
+// })
+
+// export const {
+//     useGetCryptoNewsQuery
+// } = cryptoNewsApi;
+
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+const cryptoNewsHeaders = {
+  'x-bingapis-sdk': 'true',
+  'x-rapidapi-key': "bing-news-search1.p.rapidapi.com",
+  'x-rapidapi-host': "a8924a5502mshb3bb86466be27e4p19e6c6jsnccd6b54c4ea0",
+};
+
+const createRequest = (url) => ({ url, headers: cryptoNewsHeaders });
+
+export const cryptoNewsApi = createApi({
+  reducerPath: 'cryptoNewsApi',
+  baseQuery: fetchBaseQuery({ baseUrl: "https://bing-news-search1.p.rapidapi.com" }),
+  endpoints: (builder) => ({
+    getCryptoNews: builder.query({
+      query: ({ newsCategory, count }) => createRequest(`/news/search?q=${newsCategory}&safeSearch=Off&textFormat=Raw&freshness=Day&count=${count}`),
+    }),
+  }),
+});
+
+export const { useGetCryptoNewsQuery } = cryptoNewsApi;