Cfrgtkky

Api.js

    import React from 'react';

    import './Api.scss';

    import ProfileCard from 'components/Card/ProfileCard.jsx';

    import Modal from 'react-awesome-modal';



    class Api extends React.Component {

        constructor(props) {

            super(props);

            this.state = {

                title : '',

                content: '',

                img: '',

                data: 



            }

        }



        OnFileChange = (event) => {

            this.setState({img: event.target.files[0]});

        }



        onTitleChange = (event) => {

            this.setState({title: event.target.value})

        }



        onContentChange = (event) => {

            this.setState({content: event.target.value})

        }



        resetForm = () => {

            document.getElementById('title').value = '';

            document.getElementById('content').value = '';

            document.getElementById('img').value = '';

        }



        openModal() {

            this.setState({

                visible : true

            });

        }



        closeModal() {

            this.setState({

                visible : false

            });

        } 





        componentDidMount() {

            fetch('http://127.0.0.1:8000/get_profile/')

            .then(response => response.json())

            .then(res => this.setState({ data: res }));  

        }





        SubmitProfile = (event) => {

            let formData = new FormData();

            formData.append('img',this.state.img);

            formData.append('title',this.state.title);

            formData.append('content',this.state.content);

            fetch('http://127.0.0.1:8000/post_profile/', {

                method: 'post',

                headers: {

                    Accept: 'application/json, text/plain, */*'

                },

                body:formData,

            })

            .then(response => response.json())

            .then(res => {

                if (res.code === 200){

                    this.componentDidMount()

                    this.resetForm()

                    this.closeModal()

                }

                console.log(res);

            })

        }





        elasticSearch = (event) => {

            fetch('http://127.0.0.1:8000/search/', {

                method: 'post',

                headers:{'Content-Type': 'application/json'},

                body: JSON.stringify({

                    q: event.target.value 

                })

        })

        .then(response => response.json())

        .then(res => {

            console.log(res)

            this.setState({ data: res })

        });  

        }











        render(){

            return (

                <div className="api-body">

                    <section>

                        <div className="tc pa2">

                            <input

                                type="button"

                                className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"

                                value="Post"

                                onClick={() => this.openModal()} 

                            />

                            <input

                                className="db ma3 q center border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"

                                type="text"

                                name="q"

                                id="q"

                                placeholder="search here .."

                                onChange = {this.elasticSearch}

                            />

                            </div>

                            <Modal 

                                visible={this.state.visible}

                                width="400"

                                height="300"

                                effect="fadeInDown"

                                onClickAway={() => this.closeModal()}

                            >

                            <div className="mv3 pa3">



                            <label className="db fw6 lh-copy f6" htmlFor="password">Title</label>

                            <input

                                className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"

                                type="text"

                                name="title"

                                id="title"

                                onChange={this.onTitleChange}

                            />

                        </div>

                        <div className="mv3 pa3 mt-1">

                            <label htmlFor="comment" className="f6 b db mb2">Contents </label>

                            <textarea 

                                id="content" 

                                name="content" 

                                className="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2" 

                                aria-describedby="content-desc"

                                onChange={this.onContentChange}>

                            </textarea>

                        </div>

                        <div className="mv3 pa3 mt-1">

                        <input

                            type="file"

                            multiple = {false}

                            id="img"

                            name="img"

                            ref={(input) => { this.inpuElement = input; }}

                            accept=".jpg,.jpeg,.png,.pdf,.doc"

                            onChange={this.OnFileChange}

                            />

                        <input

                            type="button"

                            className="br2 center ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"

                            value="Submit"

                            onClick={this.SubmitProfile} 

                            />

                        </div>

                        </Modal>

                    </section>



                <ProfileCard data={this.state.data} />

                </div>

            )

        }

    }





    export default Api;

ProfileCard.js

    import React from 'react';





    class ProfileCard extends React.Component {

    constructor(props){

        super(props)

        this.state = {

        data : 

        }

    }



    deleteProfile = id => e => {

        fetch('http://127.0.0.1:8000/delete_profile/', {

        method: 'post',

        headers:{'Content-Type': 'application/json'},

        body: JSON.stringify({

            id: id

        })

        })

        .then(response => response.json())

        .then(res => {

            if (res.code === 200){

            this.componentDidMount()

            }

            console.log(res)

        })

    } 



    render(){

    return (

        <div>

        {

        this.props.data.map((user,i) => {

            return (

            <article className='mw5 tc bg-white dib br3 pa3 ma3 pa4-ns mv3 ba b--black-10 shadow-5 pc-scroll pointer' key={i}>

            <div className="tc">



            <img 

                src={"http://127.0.0.1:8000" + user.photo}

                className="br-100 h3 w3 dib" 

                alt="profile pic"

                onDoubleClick = {this.deleteProfile(user.id)}

            />

                <h1 className="f4">{user.title}</h1>

                <hr className="mw3 bb bw1 b--black-10" />

            </div>

            <p className="lh-copy measure center f6 black-70">

            {user.content}

            </p>

            </article>

            );

        })

        }

        </div>

    );

    }

    }





    export default ProfileCard;

in my ProfileCard there is a function deleteProfile as you can see and my componentDidMount
is on Api component. I want to call componentDidMount immediately after deleteProfile executes.

I am not able to find any proper way to do this.
if i will send componentDidMount directly also it won't work
because i am assigning res into the state.

@estus is correct in the comments. You shouldn't - and don't - need to call componentDidMount directly but you can call a function from the owner component.

First, we create a new function for fetching the profile. This can still be called in componentDidMount.

fetchProfile() {

    fetch('http://127.0.0.1:8000/get_profile/')

    .then(response => response.json())

    .then(res => this.setState({ data: res }));

}



componentDidMount() {

    this.fetchProfile()

}

We then pass this function as a prop into <ProfileCard />

<ProfileCard data={ this.state.data } onProfileDelete={ () => this.fetchProfile() } />

Finally, we call this prop after we've deleted a profile within ProfileCard.

deleteProfile = id => e => {

        ...

        .then(res => {

            if (res.code === 200) {

                const { onProfileDelete } = this.props

                onProfileDelete() // call prop func instead

            }

            console.log(res)

        })

}

componentDidMount is lifecycle hook. It isn't expected to be called directly. A semantically correct way is to provide a method that will be reused in both places:

componentDidMount() {

  this.fetchData();

}



fetchData() {

    return fetch('http://127.0.0.1:8000/get_profile/')

    .then(response => response.json())

    .then(res => this.setState({ data: res }));  

}





SubmitProfile = (event) => {

    ...

    .then(res => {

        if (res.code === 200){

            return this.fetchData()

    ...

}

This also benefits testability. fetchData can be tested separately from component lifecycle. Also, methods should return promises, all promises should be chained.

The problem here is the separation of concerns. ProfileCard should be dumb component and delegate all the work to a parent. This method belongs to parent Api component:

deleteProfile = id => {

    fetch('http://127.0.0.1:8000/delete_profile/', ...)

    ...

    .then(res => {

        if (res.code === 200){

            this.fetchData()

        }

    })

} 

It should be passed to child component:

<ProfileCard onDelete={this.deleteProfile} />

And used in child component as a prop:

<img 

    src={"http://127.0.0.1:8000" + user.photo}

    className="br-100 h3 w3 dib" 

    alt="profile pic"

    onDoubleClick={() => this.props.onDelete(user.id)}

/>