Btukfyl

// implemented a class based component

import React, { Component } from 'react';

import './UserList.css'

// we will be using this for our cards

import Grid from '@material-ui/core/Grid';

import TextField from '@material-ui/core/TextField';

import * as contentful from 'contentful';



class UserList extends Component {

  // state object contains two properties

    state = {

      users: [

              {

                "id": 1,

                "name": "Mary Ann",

                "socialmedia": "Instagram",

                "following": "401k"

              },

              {

                "id": 2,

                "name": "Jessica P",

                "socialmedia": "Instagram",

                "following": "600k"

              }

            ],

      searchString: ''

    }



  constructor() {

    // super is the parent consturctor

    super()

    // we are making sure the list is loaded at the beginning of the lifecycle

    this.getUsers()

  }

// here we are implementing that method after we retreived it above

 getUsers = () => {

   // client.getEntries

   ({

     // what data are we returning

     content_type: 'user',

     // we use query because we will have a search filter activated

     // with this we will also need to make sure whent he user searches, the search barupdates accordingly

     query: this.state.searchString

   })

   // returns a promise

   // once there is a response, we use that callback function to make sure we ae setting the state again

   .then((response) => {

     this.setState({users: response.elements})

   })

   // in case there is an error we want to catch it

   .catch((error) => {

     console.log("Error occured while fetching data")

     console.log(error)

   })

 }

 // we are passing an event as a parameter

onSearchInputChange = (event) => {

  // if the value entered by the user in the textfield, make sure the state is updated

  if (event.target.value) {

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

    // if that is not the case,we set the state to an empty string

  } else {

     this.setState({searchString: ''})

  }

  // we are making sure so the query is executed again and we are making sure only the users are returned, matching to our search stirng

  this.getUsers()

}

// The View

// now we are making sure it is rendered in the browser

 render() {

   return (

     <div>

      {this.state.users ? (

           <div>

              <TextField style={{padding: 24}}

                id="searchInput"

                placeholder="Search for Influencers"

                margin="normal"

                onChange = {this.onSearchInputChange} />

        <Grid container spacing={24} style={{padding: 24}}>

        { this.state.users.map(currentUser => (

                                <Grid item xs={12} sm={6} lg={4} xl={3}>

                                    <User user={currentUser} />

                                </Grid>

                            ))}

                        </Grid>

                    </div>

                ) : "No courses found" }

            </div>

        )

    }

}



export default UserList;

import React from 'react';

import Card from '@material-ui/core/Card';

import CardActions from '@material-ui/core/CardActions';

import CardContent from '@material-ui/core/CardContent';

import CardMedia from '@material-ui/core/CardMedia '

import Button from '@material-ui/core/Button';

import Typography from '@material-ui/core/button';



const User = (props) => {

     return (

      <div>

         <h1 className='profile'> #HASHTAG HOUND </h1>

         {this.state.users.map((element, index) => {

           return  <div>

           <h1 className='profile'>{element.name}</h1>

           <h2 className='profile'>{element.socialmedia}</h2>

            <h2 className='profile'>{element.following}</h2>

           </div>

         })}

      </div>

    )

  }

}



export default User;