Add Keycard

pages/home/index.tsx

@@ -13,6 +13,7 @@ import Status from "../../src/Components/Blogs/Status"
 import Embark from "../../src/Components/Blogs/Embark"
 import Subspace from "../../src/Components/Blogs/Subspace"
 import Nimbus from "../../src/Components/Blogs/Nimbus"
+import Keycard from "../../src/Components/Blogs/Keycard"
 
 // #endregion Local Imports
 
@@ -30,6 +31,8 @@ const switchComponent = (active: Number) => {
             return <Subspace/>
         case 3:
             return <Nimbus/>
+        case 4:
+            return <Keycard/>
     }
 }
 
@@ -71,6 +74,11 @@ Home.getInitialProps = async (
             data: { },
         })
     );
+    await ctx.store.dispatch(
+        HomeActions.GetKeycardData({
+            data: { },
+        })
+    );
     return { namespacesRequired: ["common"] };
 };
 

src/Actions/HomeActions/index.ts

@@ -24,6 +24,8 @@ const nimbusBlog = "https://our.status.im/ghost/api/v2/content/posts/?key=10e7f8
 
 const subspaceBlog = "https://our.status.im/ghost/api/v2/content/posts/?key=10e7f8c1f793d2945ea1177076&filter=tag:tutorial-subspace&limit=all&include=authors";
 
+const keycardBlog = "https://news.keycard.tech//ghost/api/v2/content/posts/?key=d7ad0ac3484bdf01fadf32b59c&filter=tag:tutorial-keycard&limit=all&include=authors";
+
 let statusData: any = '';
 let parsedStatusData:any = [];
 
@@ -36,6 +38,9 @@ let parsedNimbusData:any = [];
 let subspaceData: any = '';
 let parsedSubspaceData:any = [];
 
+let keycardData: any = '';
+let parsedKeycardData:any = [];
+
 interface StatusBlog {
     title: string;
     published_at: string;
@@ -155,6 +160,24 @@ export const FetchSubspace = async () => {
     })
 }
 
+export const FetchKeycard = async () => {
+    await fetch(`${CORS_PROXY}`+ `${keycardBlog}`)
+    .then(response => response.json())
+    .then(data => {
+        keycardData = data.posts
+        keycardData.forEach((entry: keycardBlog) => {
+            const postData: any = {}
+            postData.title = entry.title;
+            postData.published_at = entry.published_at;
+            postData.excerpt = entry.excerpt;
+            postData.author = entry.primary_author.name;
+            postData.feature_image = entry.feature_image;
+            postData.url = entry.url;
+            parsedKeycardData.push(postData);
+        })
+    })
+}
+
 export const HomeActions = {
     Map: (payload: {}) => ({
         payload,
@@ -220,6 +243,23 @@ export const HomeActions = {
             },
             type: ActionConsts.Home.SetReducer,
         });
+
+        parsedSubspaceData = []
+    },
+
+    GetKeycardData: (payload: IHomePage.Actions.KeycardData) => async (
+        dispatch: Dispatch
+    ) => {
+        await FetchKeycard();
+
+        dispatch({
+            payload: {
+                keycardData: parsedKeycardData,
+            },
+            type: ActionConsts.Home.SetReducer,
+        });
+
+        parsedKeycardData = []
     },
 
     Active: (activeIndex: any) => async (

src/Components/Blogs/Keycard.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { IStore } from "@Redux/IStore";
+import SearchBox from "./SearchBox";
+import { filterData } from "./utils";
+
+const Keycard = () => {
+    const home = useSelector((state: IStore) => state.home);
+    const keycardData: any = home.keycardData;
+    const keyword: string = home.searchKeyword;
+    
+    let loadedAll = false;
+    if (keycardData) {
+        loadedAll = keycardData.length !== 0
+    }
+
+    let filteredData = filterData(keycardData, keyword)
+
+    const reduceExcerpt = (string: String) => {
+        if (string.length >= 140) 
+        return string.substring(0,140) + '...'
+    }
+
+    return loadedAll ? (
+        <>
+            <section className="news-list">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-12">
+                            <SearchBox/>
+                            <ul>
+                                {filteredData.map((data: { url: string ; title: string; published_at: string; excerpt: string; author: string;}, i: any) => (
+                                    <li key={i}>
+                                        <div className="post">
+                                            <div className="meta"><time>{data.published_at.substring(0,10)}</time> / <a href="https://keycard.tech/">Keycard</a></div>
+                                            <h4 ><a className="post-title" href={data.url}>{data.title}</a></h4>
+                                            <div className="author" style={{ paddingRight: '10px' }}>By <div className="author-name">{data.author}</div></div>
+                                            <div className="description" style={{ paddingRight: '10px' }}>{reduceExcerpt(data.excerpt)}</div>
+                                        </div>                                    
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    ) : null
+}
+
+export default Keycard;

src/Components/Header/index.tsx

@@ -28,6 +28,11 @@ const Header: React.FunctionComponent<IHeading.IProps> = (): JSX.Element => {
         setNowActive(3)
         dispatch({ type: 'NIMBUS' });
     }
+
+    const getKeycard = () => {
+        setNowActive(4)
+        dispatch({ type: 'KEYCARD' });
+    }
  
     return (
         <section className="intro intro-news">
@@ -44,6 +49,7 @@ const Header: React.FunctionComponent<IHeading.IProps> = (): JSX.Element => {
                                 <li key="1"><a role="button" className={nowActive === 1 ? "active" : ''} onClick={() => getEmbark()}>Embark</a></li>
                                 <li key="2"><a role="button" className={nowActive === 2 ? "active" : ''} onClick={() => getSubspace()}>Subspace</a></li>
                                 <li key="3"><a role="button" className={nowActive === 3 ? "active" : ''} onClick={() => getNimbus()}>Nimbus</a></li>
+                                <li key="4"><a role="button" className={nowActive === 4 ? "active" : ''} onClick={() => getKeycard()}>Keycard</a></li>
                             </ul>
                         </div>
                     </div>

src/Interfaces/Pages/Home.d.ts

@@ -28,6 +28,9 @@ declare namespace IHomePage {
         subspaceData: {
             data: Array<any>;
         };
+        keycardData: {
+            data: Array<any>;
+        };
         active: Number;
         searchKeyword: string;
     }
@@ -52,6 +55,10 @@ declare namespace IHomePage {
         export interface SubspaceData {
             data: {};
         }
+
+        export interface KeycardData {
+            data: {};
+        }
     }
 }
 

src/Redux/Reducers/home/index.ts

@@ -25,6 +25,9 @@ const INITIAL_STATE: IHomePage.IStateProps = {
     subspaceData: {
         data: []
     },
+    keycardData: {
+        data: []
+    },
     active: 0,
     searchKeyword: '',
 };
@@ -69,6 +72,12 @@ export const HomeReducer = (
                 active: 3
             };
 
+        case "KEYCARD":
+            return {
+                ...state,
+                active: 4
+            };
+
         case "SEARCH":
             return {
                 ...state,