Add Subspace

pages/home/index.tsx

@@ -11,6 +11,7 @@ import { HomeActions } from "@Actions";
 import { Header, Footer, Navbar } from "@Components";
 import Embark from "../../src/Components/Blogs/Embark"
 import Nimbus from "../../src/Components/Blogs/Nimbus"
+import Subspace from "../../src/Components/Blogs/Subspace"
 // #endregion Local Imports
 
 // #region Interface Imports
@@ -26,7 +27,7 @@ const Home: NextPage<IHomePage.IProps, IHomePage.InitialProps> = () => {
         <>
             <Navbar/>
             <Header/>
-            {active === 0 ? <Embark/> : active === 1 ? <Nimbus/> : '' }
+            {active === 0 ? <Embark/> : active === 1 ? <Nimbus/> : active === 2 ? <Subspace/> : null}
             <Footer/>
         </>
     );
@@ -45,6 +46,11 @@ Home.getInitialProps = async (
             data: { },
         })
     );
+    await ctx.store.dispatch(
+        HomeActions.GetSubspaceData({
+            data: { },
+        })
+    );
     return { namespacesRequired: ["common"] };
 };
 

src/Actions/HomeActions/index.ts

@@ -21,12 +21,17 @@ const embarkOldBlog = "https://framework.embarklabs.io/atom.xml";
 
 const nimbusBlog = "https://our.status.im/ghost/api/v2/content/posts/?key=10e7f8c1f793d2945ea1177076&filter=tag:nim&limit=all&include=authors";
 
+const subspaceBlog = "https://our.status.im/ghost/api/v2/content/posts/?key=10e7f8c1f793d2945ea1177076&filter=tag:subspace&limit=all&include=authors";
+
 let embarkData: any = '';
 let parsedEmbarkData:any = [];
 
 let nimbusData: any = '';
 let parsedNimbusData:any = [];
 
+let subspaceData: any = '';
+let parsedSubspaceData:any = [];
+
 interface NimbusBlog {
     title: string;
     published_at: string;
@@ -36,6 +41,15 @@ interface NimbusBlog {
     url: string;
 }
 
+interface SubspaceBlog {
+    title: string;
+    published_at: string;
+    primary_author: any;
+    excerpt: string;
+    feature_image: string;
+    url: string;
+}
+
 export const FetchEmbark = async () => {
     await fetch(`${CORS_PROXY}`+ `${embarkBlog}`)
     .then(response => response.text())
@@ -104,6 +118,24 @@ export const FetchNimbus = async () => {
     })
 }
 
+export const FetchSubspace = async () => {
+    await fetch(`${CORS_PROXY}`+ `${subspaceBlog}`)
+    .then(response => response.json())
+    .then(data => {
+        subspaceData = data.posts
+        subspaceData.forEach((entry: SubspaceBlog) => {
+            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;
+            parsedSubspaceData.push(postData);
+        })
+    })
+}
+
 export const HomeActions = {
     Map: (payload: {}) => ({
         payload,
@@ -127,7 +159,7 @@ export const HomeActions = {
         parsedEmbarkData = []
     },
 
-    GetNimbusData: (payload: IHomePage.Actions.EmbarkData) => async (
+    GetNimbusData: (payload: IHomePage.Actions.NimbusData) => async (
         dispatch: Dispatch
     ) => {
         await FetchNimbus();
@@ -140,6 +172,19 @@ export const HomeActions = {
         parsedNimbusData = []
     },
 
+    GetSubspaceData: (payload: IHomePage.Actions.SubspaceData) => async (
+        dispatch: Dispatch
+    ) => {
+        await FetchSubspace();
+
+        dispatch({
+            payload: {
+                subspaceData: parsedSubspaceData,
+            },
+            type: ActionConsts.Home.SetReducer,
+        });
+    },
+
     Active: (activeIndex: any) => async (
         dispatch: Dispatch
     ) => {

src/Components/Blogs/Subspace.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { IStore } from "@Redux/IStore";
+
+const Subspace = () => {
+    const home = useSelector((state: IStore) => state.home);
+    const subspaceData: any = home.subspaceData;
+    
+    let loadedAll = false;
+    if (subspaceData) {
+        loadedAll = subspaceData.length !== 0
+    }
+
+    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">
+                            <ul>
+                                {subspaceData.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://nimbus.team/">Nimbus</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 Subspace;

src/Components/Header/index.tsx

@@ -19,6 +19,11 @@ const Header: React.FunctionComponent<IHeading.IProps> = (): JSX.Element => {
         dispatch({ type: 'NIMBUS' });
     }
 
+    const getSubspace = () => {
+        setNowActive(2)
+        dispatch({ type: 'SUBSPACE' });
+    }
+ 
     return (
         <section className="intro intro-news">
             <div className="container">
@@ -32,6 +37,7 @@ const Header: React.FunctionComponent<IHeading.IProps> = (): JSX.Element => {
                             <ul className="filters">
                                 <li key="0"><a href="#" className={nowActive === 0 ? "active" : ''} onClick={() => getEmbark()}>Embark</a></li>
                                 <li key="1"><a href="#" className={nowActive === 1 ? "active" : ''} onClick={() => getNimbus()}>Nimbus</a></li>
+                                <li key="2"><a href="#" className={nowActive === 2 ? "active" : ''} onClick={() => getSubspace()}>Subspace</a></li>
                             </ul>
                         </div>
                     </div>

src/Interfaces/Pages/Home.d.ts

@@ -22,6 +22,9 @@ declare namespace IHomePage {
         nimbusData: {
             data: Array<any>;
         };
+        subspaceData: {
+            data: Array<any>;
+        };
         active: Number;
     }
 
@@ -33,6 +36,14 @@ declare namespace IHomePage {
         export interface EmbarkData {
             data: {};
         }
+
+        export interface NimbusData {
+            data: {};
+        }
+
+        export interface SubspaceData {
+            data: {};
+        }
     }
 }
 

src/Redux/Reducers/home/index.ts

@@ -19,6 +19,9 @@ const INITIAL_STATE: IHomePage.IStateProps = {
     nimbusData: {
         data: []
     },
+    subspaceData: {
+        data: []
+    },
     active: 0
 };
 
@@ -50,6 +53,12 @@ export const HomeReducer = (
                 active: 1
             };
 
+        case "SUBSPACE":
+            return {
+                ...state,
+                active: 2
+            };
+
         default:
             return state;
     }