News List

After setting up the project. We can start building our website. Let's start with building the home page of Hacker News.

1. Create some news#

If you are using ReactSDK Tutorial community, there already exist some news. But if you started with your community, create some posts in the default space of your community (typically named "General").

2. Show the news in your website#

Now we easily use the useFeed hook to retrieve the data from the community and show it in out website.

App.tsx

import React from 'react';
import {useFeed} from "@tribeplatform/react-sdk/hooks";
import {simplifyPaginatedResult} from "@tribeplatform/react-sdk/utils";
import {Post} from "@tribeplatform/gql-client/types";

function App() {
    const {data} = useFeed({
        fields: 'basic',
        variables: {
            limit: 100,
        }
    })
    const {nodes: posts} = simplifyPaginatedResult<Post>(data)

    return (
        <div>
            {posts.map(post => (
                <p>
                    {post.title}
                </p>
            ))}
        </div>
    );
}

export default App;

note

The data retrieved from useFeed is paginated we use simplifyPaginatedResult to flatten them in to an array.

Now your website will show the titles of the news.

3. Let's add some styling#

For this tutorial we will use tailwindcss. You can install tailwindcss to your React app.

App.tsx

import React from 'react';
import {useFeed} from "@tribeplatform/react-sdk/hooks";
import {simplifyPaginatedResult} from "@tribeplatform/react-sdk/utils";
import {Post} from "@tribeplatform/gql-client/types";

function App() {
    const {data} = useFeed({
        fields: 'basic',
        variables: {
            limit: 100,
        }
    })
    const {nodes: posts} = simplifyPaginatedResult<Post>(data)

    return (
        <div className="w-3/4 m-auto flex flex-col gap-5">
            {posts.map((post, i) => (
                <div className="flex gap-2 bg-gray-100 rounded-lg p-2">
                    <div>
                        {i+1}.
                    </div>
                    <div>
                        {post.title}
                    </div>
                </div>
            ))}
        </div>
    );
}

export default App;

note

You can see the final result here.