Merge pull request #148 from sureshmangs/master

Solving Image heights for mentor thumbnails #142
10secondsofcode · Jan 28, 2020 · 19b35fb · 19b35fb
2 parents 8cdc3e5 + d22cf10
commit 19b35fb
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/MentorProfile.js b/src/components/MentorProfile.js
@@ -1,4 +1,4 @@
-import  React, { Component } from 'react'
+import React, { Component } from 'react'
 import ReactImageFallback from "react-image-fallback";
 import data from '../response/response'
 
@@ -8,86 +8,86 @@ import loader from '../assets/loader.gif';
 import mentorImage from '../assets/mentor-default.svg';
 
 
-class MentorProfile extends Component{ 
+class MentorProfile extends Component {
 
-    state ={
+    state = {
         mentorId: null,
-        mentorProfile:null
+        mentorProfile: null
     }
 
-    componentDidMount(){
+    componentDidMount() {
         let id = this.props.match.params.mentorId;
-        
+
         this.setState({
-            mentorId:id,
+            mentorId: id,
             // eslint-disable-next-line
-            mentorProfile: data.filter(item=>item.id == id)[0]
+            mentorProfile: data.filter(item => item.id == id)[0]
         });
-        
+
     }
-  
+
 
     render() {
-  const hasProfileData = this.state.mentorProfile ? (<div>
-    <div className="row mt-5 no-gutters">
-        <div className="col-sm-4 col-md-4 ">
-        <ReactImageFallback
-                    src={this.state.mentorProfile.image}
-                    fallbackImage={mentorImage} //this shows if the montor does not have any image
-                    initialImage={loader}
-                    alt={this.state.mentorProfile.name}
-                    className="card-img mentor-img-thumbnail img-fluid" />
-            
-        </div>
-        
-        <div className="col-md-8">
-            <div className="card-body">
-                <h4 className="card-title">{this.state.mentorProfile.name}</h4>
-                <p className="card-text"><small className="text-muted">{this.state.mentorProfile.country}</small></p>
-                <p className="card-text">{this.state.mentorProfile.biography}</p>
-                <p className="card-text ">{this.state.mentorProfile.technology}</p>
+        const hasProfileData = this.state.mentorProfile ? (<div>
+            <div className="row mt-5 no-gutters">
+                <div className="col-sm-4 col-md-4 ">
+                    <ReactImageFallback
+                        src={this.state.mentorProfile.image}
+                        fallbackImage={mentorImage} //this shows if the montor does not have any image
+                        initialImage={loader}
+                        alt={this.state.mentorProfile.name}
+                        className="card-img mentor-img-thumbnail img-fluid" />
+
+                </div>
+
+                <div className="col-md-8">
+                    <div className="card-body">
+                        <h4 className="card-title">{this.state.mentorProfile.name}</h4>
+                        <p className="card-text"><small className="text-muted">{this.state.mentorProfile.country}</small></p>
+                        <p className="card-text">{this.state.mentorProfile.biography}</p>
+                        <p className="card-text ">{this.state.mentorProfile.technology}</p>
 
+                    </div>
+                </div>
             </div>
-        </div>
-    </div>
-    <div className="row mt-3 no-gutters">
-        <div >
-            <h5 className="card-title">Technology Stack</h5>
-            <div className="">
-                {
-                this.state.mentorProfile.technology.split(',').map((item,key)=>{
-                    let programmingLanguage = item.toLowerCase();
-
-                    ///below are icons generated by devicon
-                    return<i key={key} className={`devicon-${programmingLanguage.trim()}-plain colored`}></i>
-
-                    //if you would like to use Font Mfizz vector icons uncomment the line bellow 
-                    //  return<i key={key} className={`icon-${programmingLanguage.trim()}`}></i>
-
-
-
-                   })
-                }
-
-
+            <div className="row mt-3 no-gutters">
+                <div >
+                    <h5 className="card-title">Technology Stack</h5>
+                    <div className="">
+                        {
+                            this.state.mentorProfile.technology.split(',').map((item, key) => {
+                                let programmingLanguage = item.toLowerCase();
+
+                                ///below are icons generated by devicon
+                                return <i key={key} className={`devicon-${programmingLanguage.trim()}-plain colored`}></i>
+
+                                //if you would like to use Font Mfizz vector icons uncomment the line bellow 
+                                //  return<i key={key} className={`icon-${programmingLanguage.trim()}`}></i>
+
+
+
+                            })
+                        }
+
+
+                    </div>
+                </div>
+
             </div>
-        </div>
-
-    </div>
-    </div>) : (<h2>Loading Data</h2>)
+        </div>) : (<h2>Loading Data</h2>)
+
 
-
         return (
-        <div>
-            <Header />
-            <div className="container">
-
-            {hasProfileData}
-
+            <div>
+                <Header />
+                <div className="container">
+
+                    {hasProfileData}
+
+                </div>
             </div>
-        </div>
         )
-      }
+    }
 }
 
 export default MentorProfile;