DEV Community: Алексей Шиманович

Аfter assembly, the application does not start from a url different from the root

Алексей Шиманович — Mon, 03 May 2021 22:41:06 +0000

After building the application, if you open the site in the root in production, then everything will be fine. As you navigate the site, everything works great.

This is what source looks like:

But if I try to go to a url different from the root, for example, /profile, then react just breaks:

Nothing is displayed on the screen and the source is strange.

I created the application using the create-react-app.

This is how I send the application from the server:

if (process.env.NODE_ENV === 'production') {
    app.use('/', express.static(path.join(__dirname, 'client', "build")));

    app.get('*',
        async(req, res) => {
            res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
        }
    );
}

errors:

(just in case)

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

// Pages
import Main from './Pages/Main/Main';
import Auth from './Pages/Auth/Auth';
import Profile from './Pages/Profile/Profile';
import Blog from './Pages/Blog/Blog';
import CreateBlog from './Pages/CreateBlog/CreateBlog';
import PostPage from './Pages/PostPage/PostPage';
import BlogsAndUsers from './Pages/BlogsAndUsers/BlogsAndUsers';

// Components
import Header from './Components/Header/Header';

function App() {
    return (
        <Router>
            <div className="notification-bar"></div>
            <Header />
            <Switch>
                <Route path='/' exact>
                    <Main />
                </Route>
                <Route path='/auth' exact>
                    <Auth />
                </Route>
                <Route path='/blog/:id' exact>
                    <Blog />
                </Route>
                <Route path='/blogs' exact>
                    <BlogsAndUsers type="blogs" />
                </Route>
                <Route path='/profiles' exact>
                    <BlogsAndUsers type="profiles" />
                </Route>
                <Route path='/create_blog' exact>
                    <CreateBlog />
                </Route>
                <Route path="/profile/:id" exact>
                    <Profile />
                </Route>
                <Route path="/article/:id" exact>
                    <PostPage />
                </Route>
                <Redirect to='/' />
            </Switch>
        </Router>
    );
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import './fonts/fonts-import.css'

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

This is how it looks: https://i.stack.imgur.com/2xqxX.gif

Has anyone faced a similar problem? How can you decide?

How to properly implement the post functionality?

Алексей Шиманович — Wed, 28 Apr 2021 11:50:26 +0000

Hello. I wrote the functionality of a post and would like to hear some peer review on the implementation. Perhaps somewhere unproductive or fundamentally wrong decision. In addition, I ran into a problem - likes and views are not always displayed.

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import root from '../../modules/root';
import _ from 'lodash';
import './post.css'; // styles

// icons ↓
import likeIcon from '../../icons/like.svg';
import likedIcon from '../../icons/liked.svg';
import viewIcon from '../../icons/view.svg';

function Post(props) {
    const [data, setData] = useState({});
    const [likes, setLikes] = useState();
    const [views, setViews] = useState();

    async function takeData() {
        const _data = await (await fetch(`${root}/api/article/${props.id}`)).json(); // *
        setData(_.get(_data, 'article[0]'));
        setLikes(_.get(data, 'likes'));
        setViews(_.get(data, 'whatches'));
        console.log(data.likes)
        console.log(likes, views)
    }

    function checkLiked() {
        return _.get(data, 'whoLiked', []).includes(localStorage.getItem('userID'));
    }

    function act(action) {
        if (action !== "like" && action !== "view") {
            throw Error('arg');
        }

        return async function() {
            if (action === 'like' && checkLiked()) {
                return;
            }

            const _data = await(await fetch(`${root}/api/article/act`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user: localStorage.getItem('user'),
                    id: _.get(data, 'id', ''),
                    action
                })
            })).json();

            setLikes(likes + 1);
        }
    }

    useEffect(() => {
        takeData();
    }, []);

    return (
        <div className="post">
            <div className="top">
                <div className="author">
                    <div className="logo">
                        <img src={`${root}/api/upload/get/${_.get(data, 'user[0].picture')}` || 'https://i.imgur.com/EIXMLcv.png'} alt="" />
                    </div>
                    <div className="name-blog"><Link to={`/profile/${_.get(data, 'user[0].id')}`}>{_.get(data, 'user[0].user_name')}</Link> =&gt; <Link to={`/blog/${_.get(data, 'blog[0].id')}`}>{_.get(data, 'blog[0].name')}</Link></div>
                </div>
                <div className="content">
                    <Link to={`/article/${_.get(data, 'id')}`}>
                        <div className="body">
                            {_.get(data, 'body')}
                        </div>
                    </Link>
                </div>
            </div>
            <div className="tech">
                <div className="likes" onClick={act("like")}>
                    <img className={checkLiked() ? 'b' : 'a'} src={checkLiked() ? likedIcon : likeIcon} alt="" />
                    <div className="text">{likes}</div>
                </div>
                <div className="watches">
                    <img src={viewIcon} alt="" />
                    <div className="text">{views}</div>
                </div>
            </div>
        </div>
    );
}

export default Post;

Аn asterisk in the code marks the location where the post data was received. The resulting object looks something like this:

Does this forum provide for such a discussion format?

setState in useEffect loops the application

Алексей Шиманович — Wed, 28 Apr 2021 09:54:21 +0000

Why am I getting infinite loop error? React refers to the line marked with *:

function Blog() {
    const [blog, setBlog] = useState({});
    const query = useQuery();

    async function takeBlog(query) {
        const _data = await (await fetch(`${root}/api/blog/${query}`)).json();
        console.log(_data.blog)
        setBlog(_.get(_data, 'blog', {}));  // *
    }

    useEffect(() => {
        takeBlog(query);
    }, []);

    return (
        <div className="blog_page">
            <div className="container">
                <div className="top">
                </div>
                <div className="other ab">
                    <div className="left">
                        <Navbar active='blogs' />
                    </div>
                    <div className="right">
                        <Posts posts={_.get(blog, 'articles', [])} />
                    </div>
                </div>
            </div>
        </div>
    );
}