Merge pull request #1225 from OpenTechFund/feature/1215-comment-editing-react

Feature/1215 comment editing react

Author: Todd Dembrey

opentech/apply/funds/api_views.py

@@ -146,7 +146,12 @@ class CommentFilter(filters.FilterSet):
 
     class Meta:
         model = Activity
-        fields = ['submission', 'visibility', 'since', 'before', 'newer']
+        fields = ['visibility', 'since', 'before', 'newer']
+
+
+class AllCommentFilter(CommentFilter):
+    class Meta(CommentFilter.Meta):
+        fields = CommentFilter.Meta.fields + ['submission']
 
 
 class CommentList(generics.ListAPIView):
@@ -156,15 +161,15 @@ class CommentList(generics.ListAPIView):
         permissions.IsAuthenticated, IsApplyStaffUser,
     )
     filter_backends = (filters.DjangoFilterBackend,)
-    filter_class = CommentFilter
+    filter_class = AllCommentFilter
     pagination_class = StandardResultsSetPagination
 
     def get_queryset(self):
         return super().get_queryset().visible_to(self.request.user)
 
 
 class CommentListCreate(generics.ListCreateAPIView):
-    queryset = Activity.comments.all()
+    queryset = Activity.comments.all().select_related('user')
     serializer_class = CommentCreateSerializer
     permission_classes = (
         permissions.IsAuthenticated, IsApplyStaffUser,
@@ -180,6 +185,7 @@ def get_queryset(self):
 
     def perform_create(self, serializer):
         obj = serializer.save(
+            timestamp=timezone.now(),
             type=COMMENT,
             user=self.request.user,
             submission_id=self.kwargs['pk']
@@ -198,7 +204,7 @@ class CommentEdit(
         mixins.CreateModelMixin,
         generics.GenericAPIView,
 ):
-    queryset = Activity.comments.all()
+    queryset = Activity.comments.all().select_related('user')
     serializer_class = CommentEditSerializer
     permission_classes = (
         permissions.IsAuthenticated, IsAuthor

opentech/apply/funds/serializers.py

@@ -124,7 +124,7 @@ def get_assigned(self, obj):
 
 class TimestampField(serializers.Field):
     def to_representation(self, value):
-        return value.timestamp()
+        return value.timestamp() * 1000
 
 
 class SubmissionListSerializer(serializers.ModelSerializer):
@@ -218,23 +218,34 @@ class CommentSerializer(serializers.ModelSerializer):
     user = serializers.StringRelatedField()
     message = serializers.SerializerMethodField()
     edit_url = serializers.HyperlinkedIdentityField(view_name='funds:api:comments:edit')
+    editable = serializers.SerializerMethodField()
+    timestamp = TimestampField(read_only=True)
+    edited = TimestampField(read_only=True)
 
     class Meta:
         model = Activity
-        fields = ('id', 'timestamp', 'user', 'submission', 'message', 'visibility', 'edited', 'edit_url')
+        fields = ('id', 'timestamp', 'user', 'submission', 'message', 'visibility', 'edited', 'edit_url', 'editable')
 
     def get_message(self, obj):
         return bleach_value(markdown(obj.message))
 
+    def get_editable(self, obj):
+        return self.context['request'].user == obj.user
+
 
 class CommentCreateSerializer(serializers.ModelSerializer):
     user = serializers.StringRelatedField()
     edit_url = serializers.HyperlinkedIdentityField(view_name='funds:api:comments:edit')
+    editable = serializers.SerializerMethodField()
+    timestamp = TimestampField(read_only=True)
+    edited = TimestampField(read_only=True)
 
     class Meta:
         model = Activity
-        fields = ('id', 'timestamp', 'user', 'message', 'visibility', 'edited', 'edit_url')
-        read_only_fields = ('timestamp', 'edited',)
+        fields = ('id', 'timestamp', 'user', 'message', 'visibility', 'edited', 'edit_url', 'editable')
+
+    def get_editable(self, obj):
+        return self.context['request'].user == obj.user
 
 
 class CommentEditSerializer(CommentCreateSerializer):

opentech/apply/funds/tests/test_api_views.py

@@ -1,6 +1,5 @@
 from django.test import TestCase, override_settings
 from django.urls import reverse_lazy
-from django.utils import timezone
 
 from opentech.apply.activity.models import Activity, PUBLIC, PRIVATE
 from opentech.apply.activity.tests.factories import CommentFactory
@@ -36,10 +35,7 @@ def test_edit_updates_correctly(self):
 
         comment.refresh_from_db()
 
-        # Match the behaviour of DRF
-        time = comment.timestamp.astimezone(timezone.get_current_timezone()).isoformat()
-        if time.endswith('+00:00'):
-            time = time[:-6] + 'Z'
+        time = comment.timestamp.timestamp() * 1000
 
         self.assertEqual(time, response.json()['timestamp'])
         self.assertFalse(comment.current)

opentech/static_src/src/app/src/api/index.js

@@ -5,7 +5,7 @@ import {
     fetchSubmissionsByStatuses
 } from '@api/submissions';
 import { fetchRound, fetchRounds } from '@api/rounds';
-import { createNoteForSubmission, fetchNotesForSubmission, fetchNewNotesForSubmission } from '@api/notes';
+import { createNoteForSubmission, fetchNotesForSubmission, fetchNewNotesForSubmission, editNoteForSubmission } from '@api/notes';
 
 export default {
     executeSubmissionAction,
@@ -20,4 +20,5 @@ export default {
     fetchNotesForSubmission,
     fetchNewNotesForSubmission,
     createNoteForSubmission,
+    editNoteForSubmission,
 };

opentech/static_src/src/app/src/api/notes.js

@@ -30,3 +30,13 @@ export function createNoteForSubmission(submissionID, note) {
         }
     };
 }
+
+export function editNoteForSubmission(note) {
+    return {
+        path: `/apply/api/comments/${note.id}/edit/`,
+        method: 'POST',
+        options: {
+            body: JSON.stringify({ message: note.message }),
+        }
+    }
+}

opentech/static_src/src/app/src/components/Listing/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-//import { TransitionGroup } from 'react-transition-group';
 
 import LoadingPanel from '@components/LoadingPanel';
 import InlineLoading from '@components/InlineLoading'
@@ -35,12 +34,7 @@ export default class Listing extends React.Component {
         return (
             <>
                 { isErrored && this.renderErrorItem() }
-                {/* This seems to cause a bug when after updating a status
-                    of the only one item in the group, it does not
-                    dissapear from the old status*/}
-                {/*<TransitionGroup component={null} >*/}
-                    {items.map(v => renderItem(v))}
-                {/*</TransitionGroup>*/}
+                {items.map(v => renderItem(v))}
             </>
         );
     }
@@ -96,7 +90,6 @@ export default class Listing extends React.Component {
             listRef,
         } = this.props;
 
-
         if ( items.length === 0 ) {
             if (isLoading) {
                 return (

opentech/static_src/src/app/src/components/Listing/style.scss

@@ -1,15 +1,16 @@
 .listing {
     overflow-y: overlay;
     flex-grow: 3;
+    transition: opacity $transition;
 
     @include target-ie11 {
         max-width: 390px;
         width: 100%;
     }
 
-    &__header {
-        height: $listing-header-height;
+    &.is-blank {
         padding: 20px;
+        text-align: center;
     }
 
     // ensures the last item will be at the top of the column after navigating to it via the dropdown
@@ -29,9 +30,9 @@
         box-shadow: inset 0 -20px 20px -10px $color--light-mid-grey;
     }
 
-    &.is-blank {
+    &__header {
+        height: $listing-header-height;
         padding: 20px;
-        text-align: center;
     }
 
     // inner <li>'s

opentech/static_src/src/app/src/components/LoadingPanel/styles.scss

@@ -1,4 +1,5 @@
 .loading-panel {
+    height: 100%;
     text-align: center;
     padding: 20px;
 

opentech/static_src/src/app/src/components/NoteListingItem/index.js

@@ -5,29 +5,45 @@ import './styles.scss';
 
 export default class NoteListingItem extends React.Component {
     static propTypes = {
-        user: PropTypes.string.isRequired,
+        author: PropTypes.string.isRequired,
         message: PropTypes.string.isRequired,
         timestamp: PropTypes.string.isRequired,
+        handleEditNote: PropTypes.func.isRequired,
+        disabled: PropTypes.bool,
+        editable: PropTypes.bool,
+        edited: PropTypes.string,
     };
 
     parseUser() {
-        const { user } = this.props;
+        const { author } = this.props;
 
-        if (user.length > 16) {
-            return `${user.substring(0, 16)}...`
+        if (author.length > 16) {
+            return `${author.substring(0, 16)}...`
         } else {
-            return user;
+            return author;
         }
     }
 
     render() {
-        const { timestamp, message } = this.props;
+        const { timestamp, message, handleEditNote, disabled, editable, edited} = this.props;
 
         return (
-            <li className="note">
+            <li className={`note ${disabled ? 'disabled' : ''}`}>
                 <p className="note__meta">
-                    <span>{this.parseUser()}</span>
-                    <span className="note__date">{timestamp}</span>
+                    <span className="note__meta note__meta--inner">
+                        <span>{this.parseUser()}</span>
+                        { editable &&
+                            <a onClick={(e) => handleEditNote(e.preventDefault())} className="note__edit" href="#">
+                                Edit
+                                <svg className="icon icon--pen"><use xlinkHref="#pen"></use></svg>
+                            </a>
+                        }
+                    </span>
+
+                    <span className="note__date">
+                        <span className="note__date_created">{timestamp}</span><br/>
+                        {edited && <span className="note__date_edited">(edited: {edited})</span>}
+                    </span>
                 </p>
                 <div className="note__content" dangerouslySetInnerHTML={{__html: message}} />
             </li>

opentech/static_src/src/app/src/components/NoteListingItem/styles.scss

@@ -1,16 +1,12 @@
 .note {
     margin: 20px;
+    margin-top: 0px;
     font-size: 14px;
-    transition: opacity 200ms ease-out 200ms, transform 200ms ease-out 200ms;
+    border-top: 3px solid $color--light-grey;
 
-    &.add-note-enter {
-        opacity: 0;
-        transform: translate(0, 10px);
-    }
-
-    &.add-note-enter-done {
-        opacity: 1;
-        transform: translate(0, 0);
+    &.disabled {
+        opacity: .5;
+        pointer-events: none;
     }
 
     &__meta {
@@ -25,13 +21,21 @@
     }
 
     &__date {
-        color: $color--dark-blue;
         margin-left: 10px;
+
+        &_created {
+            color: $color--dark-blue;
+            float: right;
+        }
+
+        &_edited {
+            font-size: 12px;
+        }
     }
 
     &__content {
         margin: 0;
-        word-break: break-all;
+        word-break: break-word;
         hyphens: auto;
 
         ul {
@@ -52,4 +56,16 @@
             border-left: 2px solid $color--dark-blue;
         }
     }
+
+    &__edit {
+        color: $color--dark-blue;
+        padding-left: 10px;
+        margin-left: 10px;
+        max-height: 1.5rem;
+        border-left: 2px solid $color--mid-grey;
+
+        svg {
+            fill: $color--dark-blue;
+        }
+    }
 }