Dealing with user profile related stuff in React.js and Phoenix

If I understand correctly what you mean, you want to pick up data (sone user data in your case) on the client side within react.

One way you can achieve this without making a separate client side request would be do have an html tag with the serialised data inside of it. Something like this in your template.

<div data-user="<%= Jason.encode(%{ username: some_user_name) %>" />

And then grab it inside the JS from this div when the page loaded and parse it with JSON.parse()

Yeah I already figured it out the solution, but I’m too lazy to post it here ..

For the future readers - here’s the solution,

Instagram is sending the initial data in a json format inside a script tag .. that’s the same solution I’m going to use for my app.

How did I figured it out? I blocked certain page requests using GitHub - clupasq/ChromeHttpRequestBlocker: Chrome extension that allows blocking HTTP request based on URL pattern definitions. · GitHub and it gave me some insights.

Thank you @benlime for your answer and time. Have a nice day and Take care.

Another solution in case you don’t want SSR, or you’re doing static builds, a easy way to do it is:

• Assuming you have a route like <Route path="/the_route/:slug" component={YourViewComponent} />

Then on the YourViewComponent

import React, { useState, useEffect }  from "react";
import Spinner  from "../../../components/global/Spinner.js";

const axios = require("axios");

export default function YourViewComponent({ match: { params: { slug } }, history }) {
    const [loading, set_loading] = useState(true);
    const [request_loading, set_request_loading] = useState(false);
    const [user_profile, set_user_profile] = useState(false);
    const [no_user, set_no_user] = useState(false);

    useEffect(() => {
        if ((!user || slug !== user_profile.slug) && !request_loading && !no_user) {
            get_user_profile(slug);
        }
    }, [slug, user_profile, request_loading]);

    function get_user_profile(slug) {
        set_request_loading(true);
        set_loading(true);
        set_no_user(false);
        axios({
            method: "GET",
            url: `${BACKEND_URL()}/user_profile/${slug}`
        })
        .then(({data}) => {
            if (data.success) {
                set_user_profile(data.user_profile);
            } else {
                set_no_user(true);
                set_user_profile(false);
            }
            set_loading(false);
            set_request_loading(false);
        })
        .catch((e) => {
            set_loading(false);
            set_request_loading(false);
            set_user_profile(false);
            set_no_user(true);
        });
    };

    return (
        loading ?
        <Spinner classes="spinner-full" /> :
        no_user ?
        <div><p>Couldn't find user with {slug} slug</p></div> :
        <div>
            <p>User {slug} found...</p>
        </div>
    );
};

You could remove the no_user thing and just use history to redirect to an error page instead.

hey man, thanks for taking the time to answer my question, I very much appreciate it!

hey, yw, hope it helps!