Features of posts preview creating in various social networks on React & TypeScript

About the author: Yuriy Dzoma, middle fronted developer, 3 years of experience in active development on React. Participated in the creation of a wide variety of interfaces, including game interfaces, which gave him a special experience, but took away a lot of nerves :)

Creating modern web interfaces poses many serious challenges to developers. Long gone are the days when HTML, CSS, and a bit of JS were all you needed to create a competitive product. Speed, visual appeal and "live" rule the world today, without which the user interface turns into a boring static blob.

One of the best tools for achieving that goal today is React. It all started with an open library for JavaScript, but quickly grew into a whole popular direction with a large community and an endless list of successful cases. Therefore, it is not surprising that many new projects immediately consider React as the only acceptable technology for frontend development. This is exactly what happened with our partners from BePosted, who wanted to implement a very ambitious task and needed an effective solution. But more on that a little later, because first we should reminde what React is needed for.

Briefly about React

As a framework, React began to rapidly gain popularity along with the growing demand for mobile technologies: applications, mobile versions of websites and various services. An absolute advantage for developers is the ability to reuse code and build a project from independent blocks. Moreover, the final interface is not a monolithic structure, but rather consists of all individual components that can be replaced or modified directly during the development process. Developers also like the division into simple and complex components: Functional, which are used to represent static information and simple functions, and Class, which are needed for complex operations and state management.

All this contributed to the attention of large projects that constantly need fast and efficient solutions to React. And if at first React developers worked for authority, then after using the framework in Facebook, Instagram, Netflix, Reddit, Uber, SoundCloud and WhatsApp already has authority working for them. But it is fair, because several important results were achieved:

• Applications on React have high performance and place less load on the browser;

• Code on React takes many times fewer steps than in similar frameworks;

• Rendering is faster;

• It is used both on the client side and on the server side;

• Easily transfers data between components;

• And, my favorite — generates Reactive interfaces that quickly respond to user actions and content changes without reloading the entire page.

What are BePosted up to ?

The main goal of our customers: to provide users with a single space for creating and publishing posts in all popular social networks of the world, with further viewing of statistics and management of publications. The description of the entire project is worthy of a separate article, so now we should pay attention to specific issues related to our topic.

The choice of React was determined by the main idea: the user can publish the same post at once in all selected social networks. That is, he will create a draft , add everything necessary and must understand how the publication will look in various services. This is where the fun begins, as almost every social network has its own requirements. Example:

• X does not allow images to be sent to a post;

• Instagram does not support links;

• YouTube only allows video and text, and nothing else;

• Telegram and Discord accept everything, but if we want to add a file, it has to be uploaded instead of an image and so on.

Thus, the thumbnail of the same post in different social networks is always different for the user. My task was to make possible a preview for each service, taking into account its features. This is what it looks like in its finished form:

How is it done with React ?

As you can see, only 1 click allows you to change the appearance of the thumbnail locally without reloading the entire page. Theoretically, this could be done on a regular basis: simply try to copy the appearance of publications in various social networks and show the user an approximate appearance without contacting the services themselves. However, this would be unfair and wrong and the decision should be complete and not partial.

Therefore, thumbnails for each of the social networks are created dynamically every time, and the user sees the real view, not an approximate one . By using React, all of this is achieved much more easily and with less resource usage than with any other technology. I created a special filter that checks each draft and sends data to each of the services separately. The API returns the service's response almost instantly and displays any changes to the user in real time without reloading the page. The filter for the example above looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{previewSocial && previewSocial.title === 'Telegram'?
                <Telegram picture={picture} description={description} filesData={filesData}/>
                : previewSocial && previewSocial.title === 'X' ?
                    <Twitter description={description}/>
                    : previewSocial && previewSocial.title === 'Discord' ?
                        <Discord picture={picture} description={description} filesData={filesData}/>
                        : previewSocial && previewSocial.title === 'Instagram' ?
                            <Instagram picture={picture} description={description}/>
                            : previewSocial && previewSocial.title === 'All' ?
                                <>
                                    <Telegram picture={picture} description={description} filesData={filesData}/>
                                    <Twitter description={description}/>
                                    <Discord picture={picture} description={description} filesData={filesData}/>
                                    <Instagram picture={picture} description={description}/>
                                </>
                                : <EmptyPreview />
            }

As you can see, the solution to a complex problem in the code does not take many threads - this is another advantage of React , for which the framework is loved and respected by developers and customers around the world.

Connection with TypeScript

In continuation of the topic of development for BePosting , I also want to share the use of TypeScript . Strict data typing, characteristic of this programming language from Microsoft, was needed in another part of the service, which concerns the display of historical publications.

If in the previous case the main emphasis was on sending data, then in this case the priority is receiving. Logically, each post is displayed separately and, depending on the API of the social network, can be changed or deleted (however, X does not allow anything like this at all). Since the interaction with the publications happens directly, a solution was needed that takes into account all possible errors, caches the data and does it extremely quickly. The TypeScript part is responsible for this .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

interface PostTableItemProps {
    showActions: (showActions: Post) => void,
    item: Post;
    toggleMenu: number,
    setPost: (setPost: Post) => void,
    setEditPost: (setPost: Post) => void,
    setToggleMenu: (setToggleMenu: number) => void,
    setShowEditor: (setShowEditor: boolean) => void,
    setPosts: (setPosts: Post[]) => void,
}


const PostTableItem = ({showActions, item, toggleMenu, setToggleMenu, setShowEditor, setPost, setEditPost, setPosts}: PostTableItemProps) => {
    const [formatDate, setFormatDate] = useState('');
    const basePictureUrl = getBasePictureSrc;

    useEffect(() => {
        if (item && item.created_date) {
            const newDate = new Date(item.created_date).toLocaleDateString('en-US', {
                year: "numeric",
                month: "long",
                day: "numeric",});
            setFormatDate(newDate)
        }
    }, [item])

    const onDelete = (id: number) => {
        getAccessToken().then((token) => {
            if (token) {
                removeTwitterPost(token, id).then(r => {
                    if (r && r.result && r.result === 'ok') {
                        getAllHistoryPosts(token).then(result => {
                            if (result && result.posts) {
                                setPosts(result.posts)
                            }
                        })
                    }
                })
            }
        });
    }

As you can see, strict typing at the beginning of the code allows you to avoid possible errors and get the correct data. In the interface created on React, data is displayed in real time.

Conclusions

The development for BePosted hides from ordinary users a number of effective solutions for complex tasks, which make the use of services convenient for users. We have covered some points today, but there will be much more at the end of the project. The main feature of BePosted in terms of development is the maximum rejection of ready-made Bibles and focus on purely custom development. It definitely takes more time, but it allows you to create the most effective product. At Avivі, we always strive for the best solutions, which is why we like this kind of cooperation.