Removing Redundant Profile View:

This part we need to reduce some redundant codes.

  • We move contents of user_follow_view into profile_detail_api_view, and delete user_follow_view in /profiles/api/views.py ```python import random from django.http import HttpResponse, JsonResponse, HttpResponseRedirect from django.shortcuts import render, redirect from django.utils.http import is_safe_url from django.conf import settings from django.contrib.auth import get_user_model

from rest_framework.authentication import SessionAuthentication from rest_framework.decorators import api_view, permission_classes, authentication_classes from rest_framework.permissions import IsAuthenticated from rest_framework.response import Response

from ..models import Profile from ..serializers import PublicProfileSerializer

User = get_user_model() ALLOWED_HOSTS = settings.ALLOWED_HOSTS

‘’’ @api_view([‘GET’, ‘POST’]) @permission_classes([IsAuthenticated]) def user_follow_view(request, username, args, *kwargs): me = request.user other_user_qs = User.objects.filter(username=username) if me.username == username: my_followers = me.profile.followers.all() return Response({“count”: my_followers.count()}, status=200) if not other_user_qs.exists(): return Response({}, status=404)

  1. other = other_user_qs.first()
  2. profile = other.profile
  3. data = request.data or {}
  4. action = data.get("action")
  6. if action == "follow":
  7.     profile.followers.add(me)
  8. elif action == "unfollow":
  9.     profile.followers.remove(me)
  10. else:
  11.     pass
  13. data = PublicProfileSerializer(
  14.     instance=profile, context={"request": request})
  15. return Response(data.data, status=200)

‘’’

@api_view([‘GET’])

@api_view([‘GET’, ‘POST’]) def profile_detail_api_view(request, username, args, *kwargs): qs = Profile.objects.filter(user__username=username) if not qs.exists(): return Response({“detail”: “User not found”}, status=404) profile_obj = qs.first()

  1. # data = PublicProfileSerializer(instance=profile_obj, context={"request": request})
  3. # new
  4. data = request.data or {}
  5. if request.method == "POST":
  6.     me = request.user
  7.     action = data.get("action")
  8.     if profile_obj.user != me:
  9.         if action == "follow":
  10.             profile_obj.followers.add(me)
  11.         elif action == "unfollow":
  12.             profile_obj.followers.remove(me)
  13.         else:
  14.             pass
  16. serializer = PublicProfileSerializer(
  17.     instance=profile_obj, context={"request": request})
  19. # return Response(data.data, status=200)
  20. return Response(serializer.data, status=200)
  2. - remove user_follow_view in /profiles/api/urls.py
  3. ```python
  4. from django.urls import path
  6. from .views import (
  7.     # user_follow_view,
  8.     profile_detail_api_view, 
  9. )
  12. urlpatterns = [
  13.     path('<str:username>/', profile_detail_api_view), 
  14.     # path('<str:username>/follow', user_follow_view),
  15.     path('<str:username>/follow', profile_detail_api_view),
  16. ]

to test, npm start and runserver, access http://localhost/api/profiles/root/follow and http://localhost:30/
image.png
image.png
both work exactly same as before.

Display Follower Count with Numeral.js:

In this part, we can add the follower count into profile badge to see how many users are following a profile, or the user of this profile following how many other users.

follower and following:

  • add follower and following display in /twittme-web/src/profiles/badge.js

    1. function ProfileBadge(props) {
    2. const { user, didFollowToggle, profileLoading } = props;
    4. let currentVerb = user && user.is_following ? "Unfollow" : "Follow";
    5. currentVerb = profileLoading ? "Loading..." : currentVerb;
    6. const handleFollowToggle = (event) => {
    7.  event.preventDefault();
    8.  if (didFollowToggle && !profileLoading) {
    9.    didFollowToggle(currentVerb);
    10.  }
    11. };
    13. /*
    14. return user ? (
    15.  <div>
    16.    <UserPicture user={user} hideLink />
    17.    <p>
    18.      <UserDisplay user={user} includeFullName hideLink />
    19.    </p>
    20.    <button className="btn btn-primary" onClick={handleFollowToggle}>
    21.      {currentVerb}
    22.    </button>
    23.  </div>
    24. ) : null;
    25. */
    26. return user ? (
    27.  <div>
    28.    <UserPicture user={user} hideLink />
    29.    <p>
    30.      <UserDisplay user={user} includeFullName hideLink />
    31.    </p>
    32.    <p>
    33.      Followers: {user.follower_count}
    34.    </p>
    35.    <p>
    36.      Following: {user.following_count}
    37.    </p>
    38.    <button className="btn btn-primary" onClick={handleFollowToggle}>
    39.      {currentVerb}
    40.    </button>
    41.  </div>
    42. ) : null;
    43. }

    runserver and npm start, access http://localhost:30/
    image.png

    for large numbers:

    because we are build this individually, so we mostly don’t have a large count of followings and followers, we need to consider some extreme cases.

  • temporarily change returns of get_following_count in /profiles/serializers.py

    • just some randomly big numbers

      1. class PublicProfileSerializer(serializers.ModelSerializer):
      2. # ...
      4. def get_following_count(self, obj):
      5.    return 1234567898712386786385 # obj.user.following.count()
      7. def get_follower_count(self, obj):
      8.    return 912467362897 # obj.followers.count()

      access http://localhost:30/
      image.png
      so if the number is too big, it might be shown as the following count above with “e+n” or something, and actually users don’t need to get too detailed numbers.

  • we npm install “numeral” in /twittme-web ```bash [root@localhost twittme-web]# npm install numeral npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64”}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/watchpack/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64”}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64”})

  • numeral@2.0.6 added 1 package from 1 contributor and audited 1951 packages in 24.243s

35 packages are looking for funding run npm fund for details

found 1041 vulnerabilities (1032 low, 2 moderate, 7 high) run npm audit fix to fix them, or npm audit for details

  2. - apply this in /twittme-web/src/profiles/badge.js
  3. ```javascript
  4. import React, { useState, useEffect } from "react";
  6. import { apiProfileDetail, apiProfileFollowToggle } from "./lookup";
  8. import numeral from "numeral"; //new
  10. import { UserDisplay, UserPicture } from "./components";
  12. //new
  13. function DisplayCount(props) {
  14.   return (
  15.     <span className={props.className}>
  16.       {numeral(props.children).format("0a")}
  17.     </span>
  18.   );
  19. }
  21. function ProfileBadge(props) {
  22.   const { user, didFollowToggle, profileLoading } = props;
  24.   let currentVerb = user && user.is_following ? "Unfollow" : "Follow";
  25.   currentVerb = profileLoading ? "Loading..." : currentVerb;
  26.   const handleFollowToggle = (event) => {
  27.     event.preventDefault();
  28.     if (didFollowToggle && !profileLoading) {
  29.       didFollowToggle(currentVerb);
  30.     }
  31.   };
  33.   /*
  34.   return user ? (
  35.     <div>
  36.       <UserPicture user={user} hideLink />
  37.       <p>
  38.         <UserDisplay user={user} includeFullName hideLink />
  39.       </p>
  40.       <p>Followers: {user.follower_count}</p>
  41.       <p>Following: {user.following_count}</p>
  42.       <button className="btn btn-primary" onClick={handleFollowToggle}>
  43.         {currentVerb}
  44.       </button>
  45.     </div>
  46.   ) : null;
  47.   */
  48.   return user ? (
  49.     <div>
  50.       <UserPicture user={user} hideLink />
  51.       <p>
  52.         <UserDisplay user={user} includeFullName hideLink />
  53.       </p>
  54.       <p>
  55.         Followers: <DisplayCount>{user.follower_count}</DisplayCount>
  56.       </p>
  57.       <p>
  58.         Following: <DisplayCount>{user.following_count}</DisplayCount>
  59.       </p>
  60.       <button className="btn btn-primary" onClick={handleFollowToggle}>
  61.         {currentVerb}
  62.       </button>
  63.     </div>
  64.   ) : null;
  65. }

access http://localhost:30/
image.png
b as “billion”
t as “thousand”

  • now we can change methods in /profiles/serializers.py back to return correct values

    more details:

  • in /twittme-web/src/profiles/badge.js

    • if only 1 follower, show “1 follower” instead of “1 followers“
    • show user location and bio infomation ```javascript function ProfileBadge(props) { const { user, didFollowToggle, profileLoading } = props;

    let currentVerb = user && user.is_following ? “Unfollow” : “Follow”; currentVerb = profileLoading ? “Loading…” : currentVerb; const handleFollowToggle = (event) => { event.preventDefault(); if (didFollowToggle && !profileLoading) {

    1. didFollowToggle(currentVerb);

    } };

    /* return user ? ( 

    1. <UserPicture user={user} hideLink />
    2. <p>
    3.   <UserDisplay user={user} includeFullName hideLink />
    4. </p>
    5. <p>
    6.   Followers: <DisplayCount>{user.follower_count}</DisplayCount>
    7. </p>
    8. <p>
    9.   Following: <DisplayCount>{user.following_count}</DisplayCount>
    10. </p>
    11. <button className="btn btn-primary" onClick={handleFollowToggle}>
    12.   {currentVerb}
    13. </button>

    ) : null; */ return user ? ( 

    1. <UserPicture user={user} hideLink />
    2. <p>
    3.   <UserDisplay user={user} includeFullName hideLink />
    4. </p>
    5. <p>
    6.   <DisplayCount>{user.follower_count}</DisplayCount>{" "}
    7.   {user.follower_count === 1 ? "follower" : "followers"}{" "}
    8. </p>
    9. <p>
    10.   <DisplayCount>{user.following_count}</DisplayCount> following
    11. </p>
    12. <p>{user.location}</p>
    13. <p>{user.bio}</p>
    14. <button className="btn btn-primary" onClick={handleFollowToggle}>
    15.   {currentVerb}
    16. </button>

    ) : null; } ``` access http://localhost:30/
    image.png

  • in order to increase code reuse

    • create /twittme-web/src/profiles/utils.js
      • copy DisplayCount from /twittme-web/src/profiles/badge.js and export ```javascript import React from “react”; import numeral from “numeral”;

export function DisplayCount(props) { return ( {numeral(props.children).format(“0a”)} ); }

  2.    - import DisplayCount in /twittme-web/src/profiles/badge.js
  3. ```javascript
  4. //...
  6. //import numeral from "numeral";
  8. //...
  10. import { DisplayCount } from "./utils"; //new
  12. /*
  13. function DisplayCount(props) {
  14.   return (
  15.     <span className={props.className}>
  16.       {numeral(props.children).format("0a")}
  17.     </span>
  18.   );
  19. }
  20. */
  22. //...