Wrong profile picture in comment section

[pr4nshul]

I don't know whether this would be considered as an enhancement or a bug. But , yes I noticed I don't have a profile image and if I go to comment section of each post I get a profile image of another person (the same profile picture though).

P.S - and for some reason I can't resize these screenshots. Sorry for these huge images.

[pr4nshul]

@Sagar2366 Please let me know, if we are allowed to work on this rn. And if we are can you assign this to me.

[yasharth291]

hey these bugs related to news feed and comment section are already worked by me. you can do it but just compare it with my code so we don't have conflicts

[pr4nshul]

Ok, have you pushed a PR to which I can refer? @yasharth291

[pr4nshul]

@Sagar2366 Well I have looked over it and found that a particular image in the assets folder was assigned to the circle avatar. If we need the profile picture of the user , we need to fetch his details or at least his id to access his image in newsArticle.dart file. Should I do it this way? I was also wondering how are we storing which user has commented , because if we are already importing details for somewhere we can use that as well. I couldn't figure it out. Can you help me?

[yasharth291]

may be it is an enhancement for now and can be hold I am right @Sagar2366

[CyberWake]

@Sagar2366 Well I have looked over it and found that a particular image in the assets folder was assigned to the circle avatar. If we need the profile picture of the user , we need to fetch his details or at least his id to access his image in newsArticle.dart file. Should I do it this way? I was also wondering how are we storing which user has commented , because if we are already importing details for somewhere we can use that as well. I couldn't figure it out. Can you help me?

If this issue is currently open. I would like to help. @pr4nshul ✌

[pr4nshul]

Yes it's open . I wanted to figure out that how do we know which user has commented because I can't quite figure it out. Because with that information we can access the user image as well without making more query calls.

[pr4nshul]

@CyberWake We can discuss it on Slack , to avoid unnecessary comments on this issue.

[CyberWake]

Sure @pr4nshul

[CyberWake]

In the following code snippet:

String getPostsComments(String postId) {
    return """
query{
  commentsByPost(id: "$postId"){
    _id
    text
    createdAt
    creator{
      firstName
      lastName
    }
  }
}
""";
  }

Replace with this one:

String getPostsComments(String postId) {
    return """
query{
  commentsByPost(id: "$postId"){
    _id
    text
    createdAt
    creator{
      _id
      firstName
      lastName
    }
  }
}
""";
  }

This way you will be able to access the comment creators id and to fetch the image directly of the user user this one:

String getPostsComments(String postId) {
    return """
query{
  commentsByPost(id: "$postId"){
    _id
    text
    createdAt
    creator{
      image
      firstName
      lastName
    }
  }
}
""";
  }

This function is available in Queries.dart. The last one would give you the image url of the user which can be accessed by comments[index]['creator']['image'] in newsArticles.dart. Here is the solution to this one @pr4nshul

[pr4nshul]

Yeah , Thank you . Because I was making a query call similar to profile page one and I thought that would be redundant. Thanks for your help!

[pr4nshul]

Although, this has one issue. Only when getPostsComments would be called only then we would get the userId and we won't be able to display img before that. I will push my PR and let @Sagar2366 review it. What, I wanted was how are we submitting the name of the user while positing a comment. Because that function would always have access to the userId

[pr4nshul]

Although this could be used as an enhancement to display profile image of the user who has previously commented.

[CyberWake]

Add this function to accesss the user information.

Future fetchUserDetails() async {
    final String userID = await _preferences.getUserId();
    GraphQLClient _client = graphQLConfiguration.clientToQuery();
    QueryResult result = await _client.query(QueryOptions(
        documentNode: gql(_query.fetchUserInfo), variables: {'id': userID}));
    if (result.hasException) {
      print(result.exception);
    } else if (!result.hasException) {
      setState(() {
        loggedInUserImage = result.data['users']['image'];
      });
    }
  }

Access the user image user with the variable loggedInUserImage

[pr4nshul]

Yes , I have already done this, was looking if a more efficient way was possible

[CyberWake]

yes there is one more.

[CyberWake]

add these two functions in preferences.dart:

//saves the user image
  Future saveUserImage(String image) async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    await preferences.setString(userImage, image);
  }

  //gets the user image
  Future<String> getUserImage() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    String image = preferences.getString(userImage);
    notifyListeners();
    return image;
  }

with the following declarations: static const userImage = "UserImage";

and don't forget to add save the imageurl on login and signup use following lines respectively.

final String userImageUrl = result.data['login']['user']['image'];
await _pref.saveUserImage(userImageUrl);

final String userImageUrl = result.data['signUp']['user']['image'];
await _pref.saveUserImage(userImageUrl);

[pr4nshul]

This solution will only work , if user has saved a profile image. I would say the above one which I have previously done works better because we can create a user image with just initials in it if required. Thanks for your help though! I learned a lot.