[REFACTOR] Add profile to comment and add more sharing options

app/static/js/detail_materi.js

+function copyToClipboard(element) {
+    var $temp = $("<input>");
+    $("body").append($temp);
+    $temp.val($(element).text()).select();
+    document.execCommand("copy");
+    $temp.remove();
+    window.alert("Link copied");
+}
\ No newline at end of file

app/templates/app/detail_materi.html

@@ -6,6 +6,7 @@
 <link rel="stylesheet" type="text/css" href="{% static 'app/css/detail_materi.css' %}">
 <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,100&display=swap" rel="stylesheet">
 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
+<script src="{% static 'js/detail_materi.js'%}"></script>
 {% endblock header %}
 
 {% block title %}
@@ -108,9 +109,14 @@
                             </div>
                             <a class="twitter-share-button dropdown-item"
                                 href="https://twitter.com/intent/tweet?text=Cek%20materi%20ini%20yuk%20https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F"
+                                target="_blank"
                                 data-size="large">
                                 Twitter
                             </a>
+                            <a class="dropdown-item" href="whatsapp://send?text=Cek materi ini yuk! https://digipus-staging-2.herokuapp.com{{request.path}}" target="_blank">Whatsapp</a>
+                            <a class="dropdown-item" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F" target="_blank">Line</a>
+                            <p id="url" style="display: none">https://digipus-staging-2.herokuapp.com{{request.path}}</p>
+                            <button class="dropdown-item btn-book" onclick="copyToClipboard('#url')">Bagikan Tautan</button>
                         </div>
                     </div>
                 </div>
@@ -153,12 +159,16 @@
                     {% for comment in comment_data %}
                         <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
                             <div class="d-flex bd-highlight mb-3 align-items-center user">
-                                <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
-                                <p class="p-1 bd-highligh m-0"><b>{{comment.user}}</b></p>
+                                {% if comment.user != Null %}
+                                    <img class="profile" src="{{ comment.user.profile_picture.url }}" alt="profile-picture">
+                                {% else %}
+                                    <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
+                                {% endif %}
+                                <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
                                 {% if user.is_admin %}
-                                <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
-                                    <span aria-hidden="true">&times;</span>
-                                </a>
+                                    <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
+                                        <span aria-hidden="true">&times;</span>
+                                    </a>
                                 {% endif %}
                             </div>
                             <p class="text">{{comment.comment}}</p>

app/views.py

@@ -101,6 +101,7 @@ class DetailMateri(TemplateView):
 
         materi = get_object_or_404(Materi, pk=kwargs["pk"])
         user_obj = request.user if request.user.is_authenticated else None
+        print(user_obj)
         comment = Comment.objects.create(comment=commentText,
                                          username=self.get_user_name(request), materi=materi, user=user_obj)
         comment.save()