From 307c05286e80a2f741bf243c87cbdad80a77334e Mon Sep 17 00:00:00 2001
From: Elsabeth Kidane <elizit88@gmail.com>
Date: Tue, 21 Jul 2020 09:30:23 -0400
Subject: [PATCH 1/2] update

---
 src/components/SignIn/copyofindex.js | 269 ---------------------------
 src/components/SignIn/index.js       |   6 +-
 2 files changed, 5 insertions(+), 270 deletions(-)
 delete mode 100644 src/components/SignIn/copyofindex.js

diff --git a/src/components/SignIn/copyofindex.js b/src/components/SignIn/copyofindex.js
deleted file mode 100644
index 14dfb9ebf..000000000
--- a/src/components/SignIn/copyofindex.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
-import { compose } from 'recompose';
-
-import { SignUpLink } from '../SignUp';
-import { PasswordForgetLink } from '../PasswordForget';
-import { withFirebase } from '../Firebase';
-import * as ROUTES from '../../constants/routes';
-
-const SignInPage = () => (
-    <div className="wrapper">
-        <h1>SignIn</h1>
-        <SignInForm />
-        {/* <SignInGoogle />
-    <SignInFacebook />
-    <SignInTwitter /> */}
-        {/* <PasswordForgetLink /> */}
-        <SignUpLink />
-    </div>
-);
-
-const INITIAL_STATE = {
-    email: '',
-    password: '',
-    error: null,
-};
-
-const ERROR_CODE_ACCOUNT_EXISTS =
-    'auth/account-exists-with-different-credential';
-
-const ERROR_MSG_ACCOUNT_EXISTS = `
-  An account with an E-Mail address to
-  this social account already exists. Try to login from
-  this account instead and associate your social accounts on
-  your personal account page.
-`;
-
-class SignInFormBase extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = { ...INITIAL_STATE };
-    }
-
-    onSubmit = event => {
-        const { email, password } = this.state;
-
-        this.props.firebase
-            .doSignInWithEmailAndPassword(email, password)
-            .then(() => {
-                this.setState({ ...INITIAL_STATE });
-                this.props.history.push(ROUTES.HOME);
-            })
-            .catch(error => {
-                this.setState({ error });
-            });
-
-        event.preventDefault();
-    };
-
-    onChange = event => {
-        this.setState({ [event.target.name]: event.target.value });
-    };
-
-    render() {
-        const { email, password, error } = this.state;
-
-        const isInvalid = password === '' || email === '';
-
-        return (
-            <div className="view-container">
-                <form onSubmit={this.onSubmit} className="devedit-form">
-                    <fieldset>
-                        <input
-                            name="email"
-                            value={email}
-                            onChange={this.onChange}
-                            type="text"
-                            placeholder="Email Address"
-                        />
-                        <input
-                            name="password"
-                            value={password}
-                            onChange={this.onChange}
-                            type="password"
-                            placeholder="Password"
-                        />
-                        <button className="button-tertiary" disabled={isInvalid} type="submit">
-                            Sign In
-        </button>
-
-                        {error && <p>{error.message}</p>}
-                    </fieldset>
-                </form>
-            </div>
-        );
-    }
-}
-
-// class SignInGoogleBase extends Component {
-//   constructor(props) {
-//     super(props);
-
-//     this.state = { error: null };
-//   }
-
-//   onSubmit = event => {
-//     this.props.firebase
-//       .doSignInWithGoogle()
-//       .then(socialAuthUser => {
-//         // Create a user in your Firebase Realtime Database too
-//         return this.props.firebase.user(socialAuthUser.user.uid).set(
-//           {
-//             username: socialAuthUser.user.displayName,
-//             email: socialAuthUser.user.email,
-//             roles: {},
-//           },
-//           { merge: true },
-//         );
-//       })
-//       .then(() => {
-//         this.setState({ error: null });
-//         this.props.history.push(ROUTES.HOME);
-//       })
-//       .catch(error => {
-//         if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
-//           error.message = ERROR_MSG_ACCOUNT_EXISTS;
-//         }
-
-//         this.setState({ error });
-//       });
-
-//     event.preventDefault();
-//   };
-
-//   render() {
-//     const { error } = this.state;
-
-//     return (
-//       <form onSubmit={this.onSubmit}>
-//         <button type="submit">Sign In with Google</button>
-
-//         {error && <p>{error.message}</p>}
-//       </form>
-//     );
-//   }
-// }
-
-// class SignInFacebookBase extends Component {
-//   constructor(props) {
-//     super(props);
-
-//     this.state = { error: null };
-//   }
-
-//   onSubmit = event => {
-//     this.props.firebase
-//       .doSignInWithFacebook()
-//       .then(socialAuthUser => {
-//         // Create a user in your Firebase Realtime Database too
-//         return this.props.firebase.user(socialAuthUser.user.uid).set(
-//           {
-//             username: socialAuthUser.additionalUserInfo.profile.name,
-//             email: socialAuthUser.additionalUserInfo.profile.email,
-//             roles: {},
-//           },
-//           { merge: true },
-//         );
-//       })
-//       .then(() => {
-//         this.setState({ error: null });
-//         this.props.history.push(ROUTES.HOME);
-//       })
-//       .catch(error => {
-//         if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
-//           error.message = ERROR_MSG_ACCOUNT_EXISTS;
-//         }
-
-//         this.setState({ error });
-//       });
-
-//     event.preventDefault();
-//   };
-
-//   render() {
-//     const { error } = this.state;
-
-//     return (
-//       <form onSubmit={this.onSubmit}>
-//         <button type="submit">Sign In with Facebook</button>
-
-//         {error && <p>{error.message}</p>}
-//       </form>
-//     );
-//   }
-// }
-
-// class SignInTwitterBase extends Component {
-//   constructor(props) {
-//     super(props);
-
-//     this.state = { error: null };
-//   }
-
-//   onSubmit = event => {
-//     this.props.firebase
-//       .doSignInWithTwitter()
-//       .then(socialAuthUser => {
-//         // Create a user in your Firebase Realtime Database too
-//         return this.props.firebase.user(socialAuthUser.user.uid).set(
-//           {
-//             username: socialAuthUser.additionalUserInfo.profile.name,
-//             email: socialAuthUser.additionalUserInfo.profile.email,
-//             roles: {},
-//           },
-//           { merge: true },
-//         );
-//       })
-//       .then(() => {
-//         this.setState({ error: null });
-//         this.props.history.push(ROUTES.HOME);
-//       })
-//       .catch(error => {
-//         if (error.code === ERROR_CODE_ACCOUNT_EXISTS) {
-//           error.message = ERROR_MSG_ACCOUNT_EXISTS;
-//         }
-
-//         this.setState({ error });
-//       });
-
-//     event.preventDefault();
-//   };
-
-//   render() {
-//     const { error } = this.state;
-
-//     return (
-//       <form onSubmit={this.onSubmit}>
-//         <button type="submit">Sign In with Twitter</button>
-
-//         {error && <p>{error.message}</p>}
-//       </form>
-//     );
-//   }
-// }
-
-const SignInForm = compose(
-    withRouter,
-    withFirebase,
-)(SignInFormBase);
-
-// const SignInGoogle = compose(
-//   withRouter,
-//   withFirebase,
-// )(SignInGoogleBase);
-
-// const SignInFacebook = compose(
-//   withRouter,
-//   withFirebase,
-// )(SignInFacebookBase);
-
-// const SignInTwitter = compose(
-//   withRouter,
-//   withFirebase,
-// )(SignInTwitterBase);
-
-export default SignInPage;
-
-export { SignInForm };
\ No newline at end of file
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
index dc7f96337..ef7d128a8 100644
--- a/src/components/SignIn/index.js
+++ b/src/components/SignIn/index.js
@@ -10,13 +10,16 @@ import * as ROUTES from '../../constants/routes';
 
 const SignInPage = () => (
    
+       
      <div className="signinpage">
+    
+   
     <h3 className="signin">SignIn</h3>
 
       
 <div className="outer">
    <div className="inner">    <SignInGoogle /></div> 
-     {/* <div className="inner"> <SignInFacebook /></div>*/}
+    
        <div className="inner"> <SignInGithub/></div>
 </div>
         <p style={{ textAlign: "center" }}>Or sign in manually:</p>
@@ -27,6 +30,7 @@ const SignInPage = () => (
         <SignUpLink />
     </div>
     
+    
 );
 
 const INITIAL_STATE = {

From bd87bfd404fad03280a161d73bd342c1f3b268e4 Mon Sep 17 00:00:00 2001
From: aster <rtesagg84@gmail.com>
Date: Fri, 24 Jul 2020 12:15:51 -0400
Subject: [PATCH 2/2] new change after merging to master

---
 src/assets/styles/_ViewArticle.scss       |  34 ++----
 src/assets/styles/_create_article.scss    |   9 +-
 src/assets/styles/_searchbar.scss         |  29 +----
 src/components/AddReplys/index.js         |  23 ++--
 src/components/Comment/index.js           |  13 +--
 src/components/ReplyComment/index.js      |  22 +---
 src/components/SignIn/index.js            | 127 ++++++++++++----------
 src/components/Userprofile/index.js       |  53 +++++----
 src/containers/Create-article/index.js    |  69 ++++--------
 src/containers/IndividualView/index.js    |  47 ++------
 src/containers/IndividualView/sidebar.css |   4 +-
 11 files changed, 164 insertions(+), 266 deletions(-)

diff --git a/src/assets/styles/_ViewArticle.scss b/src/assets/styles/_ViewArticle.scss
index 4755d121f..2062a9442 100644
--- a/src/assets/styles/_ViewArticle.scss
+++ b/src/assets/styles/_ViewArticle.scss
@@ -2,37 +2,31 @@
   box-sizing: border-box;
   content: width= device-width, initial-scale=1;
 }
-// body {
-//   background-color: #e8eeef;
 
-  
-// }
 //MAIN CONTAINER CODE
 .container-individual {
   margin: auto;
   display: grid;
   grid-gap: 10px;
   padding: 30px 10px 20px 10px;
-  width: 100%;
-  //justify-content: center;
-  max-width: 1000px;
+width: 100%;
+max-width: 1000px;
   align-self: center;
   margin-bottom: 1px;
   font-family: Helvetica;
   margin-top: 3em;
- // overflow: auto;
-  
+  // margin-left: 25%;
+  // margin-right: 25%;
 }
 
+
 //THIS IS THE INDUVIDWAL VIWE CSS
 
 .card-individual {
-  // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   background-color: ghostwhite;
   border-bottom: solid 0.1px lightgrey;
-  overflow: auto;
+  //overflow: auto;
   border-radius: 10px;
-  // width: 900px;
 }
 
 .auther-name-individual {
@@ -47,9 +41,7 @@
 }
 
 .grid-subject2 {
-
   padding: 12px 40px;
-  //  background-color: white;
   border-bottom-style: hidden;
   text-align: left;
   font-weight: bold;
@@ -72,7 +64,6 @@
   font-size: 9pt;
   background-color: white;
   border: hidden;
-  //font-weight: bold;
   border-radius: 1px;
   position: relative;
   font-weight: bold;
@@ -83,7 +74,6 @@
   font-size: 9pt;
   background-color: white;
   border: hidden;
-  //font-weight: bold;
   border-radius: 1px;
   position: relative;
   font-weight: bold;
@@ -94,7 +84,6 @@
 }
 //THIS IS ADD COMMENT CSS
 .card-addcomment {
-  // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
   background-color: ghostwhite;
   padding: 4px 4px 30px 4px;
   transform: 1.5;
@@ -102,7 +91,6 @@
   border-radius: 10px;
 }
 .card-addcomment:hover {
-  // box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.9) !important;
   border: solid 1px gray;
 }
 
@@ -116,7 +104,7 @@
   float: right;
   color: #fae596;
   display: inline-block;
-  margin:2px;
+  margin: 2px;
 }
 
 textarea {
@@ -129,7 +117,6 @@ textarea {
 
 //THIS IS THE LIST OF COMMENTS CSS
 .card-comment {
-  //box-shadow: 0 1px 2px rgba(0,0,0, 0.4);
   background-color: ghostwhite;
   margin-top: 4px;
   border-bottom: solid 0.2px lightgray;
@@ -159,7 +146,6 @@ textarea {
 
 .likes-individual {
   position: absolute;
-  // background-color: lightgrey;
   padding-top: 0;
   padding-right: 0.3em;
   padding-left: 0.3em;
@@ -175,10 +161,6 @@ textarea {
   background-color: deepskyblue;
   background-size: 10px;
 }
-.commentdescription{
+.commentdescription {
   padding-left: 1.5em;
-
 }
-.usernamepost{
- // padding-left: 1em;
-}
\ No newline at end of file
diff --git a/src/assets/styles/_create_article.scss b/src/assets/styles/_create_article.scss
index 07d2bd2e8..49bcf5c13 100644
--- a/src/assets/styles/_create_article.scss
+++ b/src/assets/styles/_create_article.scss
@@ -64,9 +64,8 @@
     font-weight: bold;
     align-self: flex-end;
     background: $main-color;
-    // background: $secondary-color;
     color: lightgray;
-    // background-color: yellow;
+   
   }
   .modal-wrapper-postarticle {
     background: rgba(0, 0, 0, 0.5);
@@ -115,9 +114,7 @@
       flex-direction: column;
       transform: translate(-35%, -35%);
     }
-    //.devedit-form-legend1 {
-    // font-size: 1em;
-    //}
+    
   }
 .autosuggest_list{
   font-size: 0.5em;
@@ -125,5 +122,5 @@
   letter-spacing: -0.08em;
   text-align: start;
   align-self: flex-start;
- // padding: 1em;
+
 }
diff --git a/src/assets/styles/_searchbar.scss b/src/assets/styles/_searchbar.scss
index 0a7bed71b..a8ea379b6 100644
--- a/src/assets/styles/_searchbar.scss
+++ b/src/assets/styles/_searchbar.scss
@@ -9,7 +9,6 @@
 }
 .mainSearch {
   display: flex;
-  //position:relative;
   overflow: hidden;
 }
 @media only screen {
@@ -31,9 +30,6 @@
 }
 @media screen and (min-width: 320px) {
   .input-field {
-    // padding: 10px 10px 10px 30px;
-    // text-align: left;
-    // width: 30em;
     display: flex;
     padding: 5px 10px 10px 30px;
     text-align: left;
@@ -42,18 +38,11 @@
     margin-left: 24em;
     margin-right: 0.5em;
     border-radius: solid 6px;
-    //background-color: whitesmoke;
+    
   }
-  // .input-icons i {
-  //   position: absolute;
-  //   float: left;
-  //   margin-top: 20px;
-  //  // margin-right: 10em;
-  //  margin-left: -10.5em;
-  // }
+ 
   .popover__wrapper {
     position: relative;
-    //margin-top: 1.5rem;
     display: inline-block;
   }
   .popover__content {
@@ -84,9 +73,7 @@
     z-index: 10;
     opacity: 1;
     visibility: visible;
-    //transform: translate(0, -0.4px);
     transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
-    //width: 120em;
   }
   .popover__message {
     text-align: left;
@@ -102,16 +89,9 @@
     border-radius: 10px;
     margin-right: 0.2em;
   }
-  // .input-icons i {
-  //   position: absolute;
-  //   float: left;
-  //   margin-top: 20px;
-  //  // margin-right: 5em;
-  //  margin-left: 10.5em;
-  //}
+ 
   .popover__wrapper {
     position: relative;
-    //margin-top: 1.5rem;
     display: inline-block;
   }
   .popover__content {
@@ -141,9 +121,8 @@
     z-index: 10;
     opacity: 1;
     visibility: visible;
-    //transform: translate(0, -0.4px);
     transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
-    //width: 120em;
+  
   }
   .popover__message {
     text-align: left;
diff --git a/src/components/AddReplys/index.js b/src/components/AddReplys/index.js
index 44b0ee858..2a7956913 100644
--- a/src/components/AddReplys/index.js
+++ b/src/components/AddReplys/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { withFirebase } from "../Firebase";
 import { withRouter } from "react-router-dom";
 import { compose } from "recompose";
-//import * as ROUTES from "../../constants/routes";
+
 import { AuthUserContext } from "../Session";
 const moment = require("moment");
 class AddReplys extends React.Component {
@@ -16,11 +16,11 @@ class AddReplys extends React.Component {
   }
 
   togglePopup = () => {
-    //const{commentId}=this.props
+   
     this.setState({
       showPopup: !this.state.showPopup
     });
-    //console.log("this is the commentId", commentId)
+  
   };
   cancle = () => {
     this.setState({ showPopup: false });
@@ -29,12 +29,12 @@ class AddReplys extends React.Component {
   handleSubmit =(e,authUser)=> {
     e.preventDefault();
     const commentId = this.props.commentId;
-   // console.log("this is the commentId for the reply", commentId)
+
     this.props.firebase
-      //.replys(commentId)
+     
       .comments()
       .add({
-        // commentId:commentId,
+       
         reply: this.state.reply,
         timeCreated: moment().format(` MMMM DD, YYYY  --  hh:mm:ss A `),
         userId:authUser.uid,
@@ -44,8 +44,7 @@ class AddReplys extends React.Component {
         console.log('DOC REF', docRef.id)
         this.props.firebase.comment(commentId).update({
           childCommentId: docRef.id
-        //console.log(" this is the replysID ", docRef.id)
-        //console.log(" this is the replysID ", docRef.id)
+      
       });
 
     this.setState({
@@ -62,9 +61,9 @@ class AddReplys extends React.Component {
   };
 
   render() {
-    // const { comment, limited, timeCreated,commentId } = this.props;
+    
     const { commentId} = this.props;
-    //console .log("this is the comment Id i have from comment",commentId)
+
     return (
       <AuthUserContext.Consumer>
       {authUser => (
@@ -79,10 +78,10 @@ class AddReplys extends React.Component {
             <div className="commentgrid">
               <textarea
                 className="commentContent"
-                // id="reply"
+               
                 type="text"
                 value={this.state.reply}
-                //name="reply"
+               
                 placeholder="Write your Reply here! "
                 autoFocus={true}
                 onChange={this.handleChange}
diff --git a/src/components/Comment/index.js b/src/components/Comment/index.js
index d32890519..0208843f7 100644
--- a/src/components/Comment/index.js
+++ b/src/components/Comment/index.js
@@ -8,7 +8,6 @@ import {
 import { withFirebase } from "../../components/Firebase";
 import ReplyComment from "../ReplyComment";
 import AddReplys from "../AddReplys";
-// const moment = require("moment");
 class Comment extends React.Component {
   constructor(props) {
     super(props);
@@ -81,7 +80,7 @@ class Comment extends React.Component {
     );
     const numOfReplys = replyToRender.length;
     let commentContent = comment.comment;
-    // console.log("reply",replysId)
+   
     if (replys) {
       replys.sort((a, b) => {
         const isReversed = sortType === "desc" ? 1 : -1;
@@ -89,7 +88,7 @@ class Comment extends React.Component {
       });
     }
     if (comment.comment && comment.comment.length <= limited) {
-      //  console.log("IF", comment.comment, comment.comment.length);
+     
       return (
         <AuthUserContext.Consumer>
           {(authUser) => (
@@ -159,10 +158,10 @@ class Comment extends React.Component {
         </AuthUserContext.Consumer>
       );
     } else {
-      // console.log("ELSE", comment.comment, comment.comment.length);
+     
       if (showAll) {
         return (
-          // <div className="card-comment">
+         
           <div className="commentDisplay">
             <p className="styleDisplay">
               <span>
@@ -180,11 +179,11 @@ class Comment extends React.Component {
         );
       }
     }
-    //console.log("this is commentContent",commentContent)
+    
     const toShow = commentContent.slice(0, limited) + "....";
     if (toShow) {
       return (
-        <div //className="card-comment"
+        <div 
         >
           <div className="commentDisplay ">
             <p className="styleDisplay">
diff --git a/src/components/ReplyComment/index.js b/src/components/ReplyComment/index.js
index ade7d993a..29a014e24 100644
--- a/src/components/ReplyComment/index.js
+++ b/src/components/ReplyComment/index.js
@@ -15,7 +15,6 @@ class ReplyComment extends React.Component {
       showAll: false,
       showPopup: false,
       username: "",
-     // reply: "",
       photoUrl: "",
 reply2:""
     };
@@ -39,7 +38,6 @@ reply2:""
       .user(this.props.reply.userId)
       .get()
       .then((doc) => {
-       // console.log("userdata in comment", doc.data());
         let user = doc.data();
         this.setState({
           username: user.username,
@@ -50,7 +48,6 @@ reply2:""
   };
 
   showMore = () => {
-   // console.log("show more clicked")
   this.setState({ showAll: true });
   }
 
@@ -59,17 +56,10 @@ reply2:""
     const { commentId, replys, limited, reply } = this.props;
     const {showAll,reply2} = this.state;
     let commentReply = reply.reply;
-    //console.log("showMore", this.showMore);
     const replyToRender = replys.filter((reply1) =>
       commentId === reply1.parentCommentId ? reply1.parentCommentId : null
     );
     const numOfReplys = replyToRender.length;
-    //console.log("reply:",reply2.reply)
-
-    // let replycomment = replys.filter((reply) =>
-    //   (commentId === reply.parentCommentId )? reply.reply : null
-    // );
-    // console.log("replycomment",replycomment)
    
    if (reply.reply.length <= limited) {
       return (
@@ -93,14 +83,7 @@ reply2:""
                 </div>
               </div>
               <div className="replypage-hide">
-                {/* <i
-                  className="fas fa-angle-up "
-                  style={{ width: "10em" }}
-                  onClick={this.cancle}
-                >
-                  {" "}
-                  Hide viwe
-                </i> */}
+               
               </div>
             </div>
         </div>
@@ -145,10 +128,7 @@ reply2:""
         );
       }
     }
-    
-    //console.log("commentReplys",commentReply)
     const toShow = commentReply.substring(0, limited) + "....";
-   // console.log("sliced comment Replys", toShow);
     if (toShow) {
       return (
         <div>
diff --git a/src/components/SignIn/index.js b/src/components/SignIn/index.js
index ef7d128a8..2ce1aae3a 100644
--- a/src/components/SignIn/index.js
+++ b/src/components/SignIn/index.js
@@ -1,26 +1,22 @@
 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'recompose';
-
 import { SignUpLink } from '../SignUp';
-//import { PasswordForgetLink } from '../PasswordForget';
-import  PasswordForgetLink  from '../PasswordForgetForm'; 
+import  PasswordForgetLink  from '../PasswordForgetForm';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 
 const SignInPage = () => (
-   
-       
+    <div className="wrapper">
+       {/* <p style={{fontSize:"28px"}}>SignIn</p>*/}
      <div className="signinpage">
-    
-   
-    <h3 className="signin">SignIn</h3>
+    <h2 className="signin">SignIn</h2>
 
       
 <div className="outer">
-   <div className="inner">    <SignInGoogle /></div> 
-    
-       <div className="inner"> <SignInGithub/></div>
+ <div className="inner">    <SignInGoogle /></div> 
+   {/* <div className="inner"> <SignInFacebook /></div>*/}
+     <div className="inner"> <SignInGithub/></div>
 </div>
         <p style={{ textAlign: "center" }}>Or sign in manually:</p>
 
@@ -29,8 +25,7 @@ const SignInPage = () => (
          <PasswordForgetLink /> 
         <SignUpLink />
     </div>
-    
-    
+    </div>
 );
 
 const INITIAL_STATE = {
@@ -44,7 +39,9 @@ const ERROR_CODE_ACCOUNT_EXISTS =
 
 const ERROR_MSG_ACCOUNT_EXISTS = `
   An account with an E-Mail address to
-  this social account already exists. 
+  this social account already exists. Try to login from
+  this account instead and associate your social accounts on
+  your personal account page.
 `;
 
 class SignInFormBase extends Component {
@@ -113,15 +110,23 @@ class SignInGoogleBase extends Component {
   constructor(props) {
    super(props);
 
-     this.state = { error: null };
+     this.state = {
+        error: null,
+        photoURL:""
+     };
+     
   }
 
   onSubmit = event => {
       this.props.firebase
           .doSignInWithGoogle()
       .then(socialAuthUser => {
-       // Create a user in your Firebase Realtime Database too
+      // Create a user in your Firebase Realtime Database too
+      if(socialAuthUser.user.photoURL===""){
+
+         console.log("photoUrl",socialAuthUser)
         return this.props.firebase.user(socialAuthUser.user.uid).set(
+       
             {
 
                 username: socialAuthUser.user.displayName,
@@ -131,6 +136,21 @@ class SignInGoogleBase extends Component {
           },
            { merge: true },
           )
+        }
+          else{
+            console.log("photoUrl on time of login",socialAuthUser)
+            return this.props.firebase.user(socialAuthUser.user.uid).set(
+             
+              {
+  
+                  username: socialAuthUser.user.displayName,
+               //  photoUrl: socialAuthUser.user.photoURL,
+               email: socialAuthUser.user.email,
+              roles: {},
+            },
+             { merge: true },
+            )
+          }
       })
           .then(() => {
               this.setState({ error: null });
@@ -157,7 +177,7 @@ class SignInGoogleBase extends Component {
             
                 <p style={{ textAlighn: "" }}> Login with Google+</p> </button>*/}
 
-              <button type="submit" className="googlebtn" style={{ fontSize: "20px" }}><i class="fa fa-google fa-fw" > </i> 
+              <button type="submit" className="googlebtn" style={{ fontSize: "20px" }}><i className="fa fa-google fa-fw" > </i> 
  
   
 </button>
@@ -181,19 +201,34 @@ class SignInGoogleBase extends Component {
       .doSignInWithFacebook()
        .then(socialAuthUser => {
         // Create a user in your Firebase Realtime Database too
+        if(socialAuthUser.additionalUserInfo.profile.photoURL===""){
          return this.props.firebase.user(socialAuthUser.user.uid).set(
            {
-                 username: socialAuthUser.user.displayName,
-                 photoUrl: socialAuthUser.user.photoURL,
-                 email: socialAuthUser.user.email,
-                 roles: {},
+                 username: socialAuthUser.additionalUserInfo.profile.name,
+                 photoUrl: socialAuthUser.additionalUserInfo.profile.photoURL,
+            email: socialAuthUser.additionalUserInfo.profile.email,
+            roles: {},
                  /*username: socialAuthUser.user.displayName,
                  photoUrl: socialAuthUser.user.photoURL,
                  email: socialAuthUser.user.email,
                  roles: {},*/
           },
            { merge: true },
-         );
+         )} else{
+          return this.props.firebase.user(socialAuthUser.user.uid).set(
+            {
+                  username: socialAuthUser.additionalUserInfo.profile.name,
+                 // photoUrl: socialAuthUser.additionalUserInfo.profile.photoURL,
+             email: socialAuthUser.additionalUserInfo.profile.email,
+             roles: {},
+                  /*username: socialAuthUser.user.displayName,
+                  photoUrl: socialAuthUser.user.photoURL,
+                  email: socialAuthUser.user.email,
+                  roles: {},*/
+           },
+            { merge: true },
+          )
+         }
        })
     .then(() => {
         this.setState({ error: null });
@@ -215,9 +250,9 @@ class SignInGoogleBase extends Component {
 
      return (
        <form onSubmit={this.onSubmit}>
-             <button type="submit" style={{ fontSize: "20px" }} className="fb"><i class="fa fa-facebook fa-fw" /></button>
+             <button type="submit" style={{ fontSize: "20px" }} className="fb"><i className="fa fa-facebook fa-fw" />Sign In with Facebook</button>
 
-       {error && <div className="errormessage">{error.message}</div>}
+       {error && <p>{error.message}</p>}
       </form>
      );
    }
@@ -227,22 +262,8 @@ class SignInGoogleBase extends Component {
   constructor(props) {
      super(props);
 
-    this.state = { error: null,
-      showPopup:false
-     };
+    this.state = { error: null };
   }
- /* togglePopup = () => {
-    this.setState({
-      showPopup: !this.state.showPopup
-    });
-  };*/
-
-  /*closePopup = () => {
-    this.setState({
-      showPopup: !this.state.showPopup
-         });
-    this.myFormRef.reset();
-  };*/
 
   onSubmit = event => {
     this.props.firebase
@@ -251,13 +272,13 @@ class SignInGoogleBase extends Component {
         // Create a user in your Firebase Realtime Database too
          return this.props.firebase.user(socialAuthUser.user.uid).set(
            {
-                // username: socialAuthUser.additionalUserInfo.profile.name,
-                  //username: socialAuthUser.user.displayName,
-                    //email: socialAuthUser.user.email,
+                 username: socialAuthUser.additionalUserInfo.profile.name,
+                 email: socialAuthUser.additionalUserInfo.profile.email,
                  //roles: {},
-                 username: socialAuthUser.user.displayName,
-                 email: socialAuthUser.user.email,                
-                 photoUrl: socialAuthUser.user.photoURL,               
+                 //username: socialAuthUser.user.displayName,
+                 //username: socialAuthUser.user.displayName,
+                 photoUrl: socialAuthUser.user.photoURL,
+                 //email: socialAuthUser.user.email,
                  roles: {},
           },
           { merge: true },
@@ -282,18 +303,12 @@ class SignInGoogleBase extends Component {
     const { error } = this.state;
 
    return (
-   
-       <form onSubmit={this.onSubmit}  ref={(el) => (this.myFormRef = el)}>
-         <div>  <button type="submit" style={{ fontSize: "20px" }} className="github"  >
-             <i class="fa fa-github" />{" "}</button></div>
-   <div className="message">
-      {error && <div className="errormessage">
-        {error.message} </div>}
-  </div>
-  
-     
+       <form onSubmit={this.onSubmit}>
+           <button type="submit" style={{ fontSize: "20px" }} className="github"><i className="fa fa-github" /></button>
+         
+      
+       {error && <p>{error.message}</p>}
       </form>
-     
     );
   }
  }
diff --git a/src/components/Userprofile/index.js b/src/components/Userprofile/index.js
index e3291c547..2787d443a 100644
--- a/src/components/Userprofile/index.js
+++ b/src/components/Userprofile/index.js
@@ -13,15 +13,13 @@ import { Link } from "react-router-dom";
 import * as ROUTES from "../../constants/routes.js";
 import SignOut from "../SignOut";
 import Setting from "../../containers/Account";
-// const options = ["username", "profile", "setting"];
+
 class Userprofile extends React.Component {
   constructor(props) {
-    // console.log("this is the props value:" + props)
-    super(props);
+   super(props);
     this.state = {
       article: [],
       username: "",
-      //photoUrl: " ",
       name: "",
       email: "",
       selectedFile: null,
@@ -31,6 +29,7 @@ class Userprofile extends React.Component {
       file: "",
       pics: [],
       url: "",
+      urlError:""
     };
   }
 
@@ -41,19 +40,36 @@ class Userprofile extends React.Component {
   };
 
   onUrlChange = (e) => {
+    
     this.setState({
       url: e.target.value,
     });
+  
   };
-
+validate = () => {
+let urlError= "";
+if(this.state.url === ""){
+urlError="Url cannot be blank"
+}
+if(urlError){
+  this.setState({urlError})
+  return false;
+}
+return true;
+}
   upload = (e, authUser) => {
     e.preventDefault();
-    console.log("my new url", authUser.uid);
     const autherId = authUser.uid;
-    this.props.firebase.user(autherId).update({
-      photoUrl: this.state.url,
-    });
-    this.setState({ showPopup: false });
+    const isValid = this.validate();
+    if (isValid) {
+   this.props.firebase.user(autherId).update({
+     photoUrl: this.state.url,
+    })}
+    if(this.state.url){
+    this.setState({
+     url:"",
+      urlError:""
+    })}
   };
   cancleButton = (e) => {
     this.setState({ showPopup: false });
@@ -113,13 +129,16 @@ class Userprofile extends React.Component {
                                   onChange={this.onUrlChange}
                                   required
                                 />
+                                
                                 <button
                                   className="imageupload"
                                   onClick={(e) => this.upload(e, authUser)}
                                 >
                                   upload Image
                                 </button>
+
                               </div>
+                        <div style={{fontSize:12 ,color:"red"}}>{this.state.urlError}</div>
                               <br />
 
                               <img
@@ -128,8 +147,7 @@ class Userprofile extends React.Component {
                                   "http://via.placeholder.com/100x100"
                                 }
                                 alt="Uploaded images"
-                                // height="100"
-                                //width="100"
+
                               />
                             </div>
                           </div>
@@ -151,17 +169,6 @@ class Userprofile extends React.Component {
                       {"  "}
                       UserSetting{" "}
                     </Link>
-
-                    {/* <Link to={ROUTES.SIGNOUT}>
-                      {" "}
-                      <i
-                        class="fa fa-sign-out"
-                        aria-hidden="true"
-                        style={{ Color: "#fae596" }}
-                      ></i>
-                      {"  "}
-                      SignOut{" "}
-                    </Link> */}
                    <span> 
                       <SignOut/>
                       </span>
diff --git a/src/containers/Create-article/index.js b/src/containers/Create-article/index.js
index 9eba604c1..1c4d170d5 100644
--- a/src/containers/Create-article/index.js
+++ b/src/containers/Create-article/index.js
@@ -12,25 +12,18 @@ import { messaging } from "firebase";
 export const options = [];
 //export const options = [{name:"React"}, {name:"Ruby"}, {name:"Javascript"}];
 const moment = require("moment");
-
   
   const getSuggestions = (value) => {
   //const{tags1}=this.props
+ // console.log("options ata authosaugetion",options.name,value)
   const inputValue = value.trim().toLowerCase();
   const inputLength = inputValue.length;
-
-  return inputLength === 0
-    ? []
-    :options.filter(
+  return inputLength === 0 ? [] :options.filter(
         (lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue
       );
 };
-
-
 const getSuggestionValue = (suggestion) => suggestion.name;
-
 const renderSuggestion = (suggestion) => <div>{suggestion.name}</div>;
-
 class Dialog extends React.Component {
   render() {
     return (
@@ -67,36 +60,31 @@ class Createarticle extends Component {
       inputTag:"",
       calculatedvote:0,
     
-
     };
   }
-
   componentDidMount = () => {
     this.unsubscribe = this.props.firebase.tags().onSnapshot((snapshot) => {
-      const totalTags = [];
+     
       snapshot.forEach((doc) => {
         const data = doc.data();
-       // totalTags.push(data);
+       
         options.push(data)
+        
       });
-console.log("tags from api call",options)
-      //this.setState({ tags1: totalTags },()=>console.log("Tags1",totalTags));
+
     });
     
   };
   onChange = (e, { newValue }) => {
-
     this.setState({
       value: newValue,
     });
   };
-
   onSuggestionsFetchRequested = ({ value }) => {
     this.setState({
       suggestions: getSuggestions(value),
     });
   };
-
   onSuggestionsClearRequested = () => {
     this.setState({
       suggestions: [],
@@ -107,20 +95,19 @@ console.log("tags from api call",options)
       showPopup: !this.state.showPopup,
     });
   };
-
   onUrlChange = (e) => {
     this.setState({
       url: e.target.value,
     });
   };
-  // onTagChange = (e) => {
-  //   console.log("Tag on change",e.target.value)
-  //   this.setState({
+  onTagChange = (e) => {
+    console.log("Tag on change",e.target.value)
+    this.setState({
       
-  //     tags: e.target.value,
-  //   });
-  //   getSuggestions.push(this.state.tags)
-  // };
+      tags: e.target.value,
+    });
+    getSuggestions.push(this.state.tags)
+  };
   onTitleChange = (e) => {
     this.setState({
       title: e.target.value,
@@ -131,18 +118,18 @@ console.log("tags from api call",options)
       description: e.target.value,
     });
   };
-
   
   handleSubmit = (e, authUser) => {
     const newtag1=this.state.value;
     const newtag=[{name:"newtag1"}]
-    // console.log("username on article submit",authUser.username)
+     console.log("Option.name",options.name)
+     console.log("new tag",newtag1)
      e.preventDefault();
      this.props.firebase
        .articles()
        .add({
          userId: authUser.uid,
-        // userName:this.state.userName,
+        
          title: this.state.title,
          description: this.state.description,
          tags: this.state.value,
@@ -160,14 +147,15 @@ console.log("tags from api call",options)
       alert("you've successfully created an article with ID: " + this.state.confirmmessage);
        
        });
-       if(newtag.name !== options.name){
+      options.map(tag =>{
+       if(newtag.name !== tag.name){
          
             this.props.firebase
             .tags()
             .add({
               name:this.state.value
-            })
-          };
+          })
+          }});
         
      this.setState({
        value: "",
@@ -184,14 +172,12 @@ console.log("tags from api call",options)
    }
   render() {
     const { value, suggestions } = this.state;
-
     // Autosuggest will pass through all these props to the input.
     const inputProps = {
       placeholder: "Tags",
       value,
       onChange: this.onChange,
     };
-
     return (
       <AuthUserContext.Consumer>
         {(authUser) => (
@@ -203,7 +189,7 @@ console.log("tags from api call",options)
               <Dialog closePopup={this.togglePopup}>
                 <div>
                   <div>
-                    {/* <div style={{fontSize:"legend"}}>Create new post</div>*/}
+                    
                     <legend className="devedit-form-legend1">
                       Create New Post
                     </legend>
@@ -226,18 +212,6 @@ console.log("tags from api call",options)
                                   
                                 </li>
                                 <li>
-                                  {/*<select
-                                    value={this.state.tags}
-                                    onChange={this.onTagChange}
-                                  >
-                                    {options.map(option => {
-                                      return (
-                                        <option value={option} key={option}>
-                                          {option}
-                                        </option>
-                                      );
-                                    })}
-                                  </select>*/}
                                   <div className="autosuggest_list">
                                   <Autosuggest
                                     suggestions={suggestions}
@@ -301,5 +275,4 @@ console.log("tags from api call",options)
     );
   }
 }
-
 export default compose(withFirebase)(Createarticle);
\ No newline at end of file
diff --git a/src/containers/IndividualView/index.js b/src/containers/IndividualView/index.js
index 154bc02c8..2c42064d7 100644
--- a/src/containers/IndividualView/index.js
+++ b/src/containers/IndividualView/index.js
@@ -5,8 +5,6 @@ import { compose } from "recompose";
 import { withFirebase } from "../../components/Firebase";
 import Comment from "../../components/Comment";
 import ListItem1 from "../../components/ListItem1";
-import ReplyComment from "../../components/ReplyComment";
-import AddReplys from "../../components/AddReplys";
 const moment = require("moment");
 class IndividualView extends React.Component {
   constructor(props) {
@@ -18,7 +16,6 @@ class IndividualView extends React.Component {
       TotallComment: "",
       totalcount: "",
       isOldestFirst: true,
-      //  commentId: "",
       username: "",
       sortType: "asc",
       commentList: [],
@@ -28,14 +25,11 @@ class IndividualView extends React.Component {
     };
   }
   componentDidMount = () => {
-    //this.sortByDtate(Comment)
     let articleId = this.props.match.params.articleId;
     this.unsubscribe = this.props.firebase
       .comments()
 
       .where("articleId", "==", articleId)
-
-      //.orderBy('timeCreated','desc')
       .limit(8)
 
       .onSnapshot((snapshot) => {
@@ -52,8 +46,6 @@ class IndividualView extends React.Component {
         });
       });
 
-    //get the ID for a particular article
-    // console.log("articleId", this.props.match.params);
     this.setState({ articleId });
 
     this.unsubscribe = this.props.firebase
@@ -61,24 +53,21 @@ class IndividualView extends React.Component {
 
       .onSnapshot((doc) => {
         if (doc.exists) {
-          // console.log(" this is my article", doc.data());
           this.setState({
             article: doc.data(),
           });
           this.setState({
             timeCreated: moment().format(` MMMM DD, YYYY  --  hh:mm:ss A  `),
-          }); // set data to local state
-          // console.log("this is a state article:" , this.state.article)
+          });
         } else {
           console.log("No such document!");
         }
         let autherId = this.state.article.userId;
-        // console.log("autherId of Article",autherId)
+
         this.props.firebase
           .user(autherId)
           .get()
           .then((doc) => {
-            // console.log("userdata", doc.data())
             let user = doc.data();
             this.setState({
               username: user.username,
@@ -86,7 +75,7 @@ class IndividualView extends React.Component {
             });
           });
       });
-    //This Helps to find the total commets for spesific articleId
+
     this.unsubscribe = this.props.firebase
       .comments()
       .where("articleId", "==", articleId)
@@ -102,27 +91,22 @@ class IndividualView extends React.Component {
       });
   };
   createComment = (comment, article) => {
-    //  console.log("here create comment", comment, this.state.articleId);
     this.props.firebase
       .comments()
       .add({
         ...comment,
         articleId: this.state.articleId,
       })
-      .then(function (docRef) {
-        //console.log("Document written with ID: ", docRef.id);
-      });
+      .then(function (docRef) {});
   };
 
-  
   render() {
-    // Access to local component state
     const {
       article,
       comment,
-comments,
+      comments,
       timeCreated,
-     sortType,
+      sortType,
       limited,
     } = this.state;
     if (comments) {
@@ -130,8 +114,7 @@ comments,
         const isReversed = sortType === "desc" ? 1 : -1;
         return isReversed * a.timeCreated.localeCompare(b.timeCreated);
       });
-      //console.log("sortedComment",sortedcomments)
-    }//}
+    }
 
     if (article) {
       return (
@@ -161,19 +144,11 @@ comments,
               <button
                 style={{ justifyContent: "spacebitween" }}
                 type="button"
-                //onClick={this.handleSubmit}
                 className="disabled"
               >
                 <i className="fa fa-comment"> </i> {this.state.totalcount}{" "}
                 Comment
               </button>
-              {/* <button
-                type="button"
-                onClick={this.handleRemove}
-                className="disabled"
-              >
-                Save
-              </button> */}
             </div>
           </div>
           <div>
@@ -183,9 +158,6 @@ comments,
           <div>
             {this.state.comments &&
               this.state.comments.map((comment, index) => {
-                
-                  /* console.log(comment) */
-                
                 return (
                   <div className="card-comment">
                     <Comment
@@ -195,7 +167,6 @@ comments,
                       timeCreated={timeCreated}
                       commentId={comment.commentId}
                     />
-                    {/* <ReplyComment     commentId={comment.commentId}/>*/}
                   </div>
                 );
               })}
@@ -209,7 +180,3 @@ comments,
   }
 }
 export default compose(withFirebase, withRouter)(IndividualView);
-
-
-
-
diff --git a/src/containers/IndividualView/sidebar.css b/src/containers/IndividualView/sidebar.css
index 26f7688c8..bbc9c01d4 100644
--- a/src/containers/IndividualView/sidebar.css
+++ b/src/containers/IndividualView/sidebar.css
@@ -1,4 +1,4 @@
-body {
+/* body {
     margin: 0;
     font-family: "Lato", sans-serif;
 }
@@ -57,4 +57,4 @@ div.content {
         text-align: center;
         float: none;
     }
-}
+} */