Community group page detail

api/community/serializers.py

@@ -4,9 +4,13 @@
 
 
 class GroupSerializer(serializers.ModelSerializer):
+    posts = PostSerializer(many=True)
+
     class Meta:
         model = Group
-        fields = '__all__'
+        depth = 1
+        fields = ['id', 'title', 'description', 'location', 'posts', 'members']
+
 
 
 class EventSerializer(serializers.ModelSerializer):
@@ -27,6 +31,7 @@ class Meta:
         fields = ['id', 'title', 'description', 'posts']
 
 
+
 class HashtagSerializer(serializers.ModelSerializer):
     posts = PostSerializer(many=True)
 
@@ -36,6 +41,7 @@ class Meta:
         fields = ['id', 'title', 'description', 'posts']
 
 
+
 class MediaSerializer(serializers.ModelSerializer):
     hashtag = serializers.CharField()
     group = serializers.CharField()

api/forum/fixtures/forum.json

@@ -38,7 +38,7 @@
       "likes": 0,
       "author": 3,
       "parent": [],
-      "group": 1
+      "group": 3
     }
   },
   {

api/forum/models.py

@@ -5,7 +5,7 @@
 
 class Post(models.Model):
     parent = models.ManyToManyField(
-        'self', related_name='comments', null=True, blank=True)
+        'self', related_name='comments', symmetrical=False, null=True, blank=True)
     post_type = models.CharField(max_length=200, null=True, blank=True)
     title = models.CharField(max_length=200)
     time = models.DateTimeField(auto_now=True)
@@ -14,7 +14,7 @@ class Post(models.Model):
     author = models.ForeignKey(Profile,
                                on_delete=models.CASCADE, related_name='posts', null=True)
     group = models.ForeignKey(
-        Group, on_delete=models.CASCADE, related_name='posts', null=True)
+        Group, on_delete=models.CASCADE, related_name='posts', null=True, blank=True)
 
     hashtags = models.ManyToManyField(
         'community.hashtag', related_name='posts', null=True, blank=True)

api/forum/serializers.py

@@ -4,7 +4,10 @@
 
 
 class PostSerializer(serializers.ModelSerializer):
-    # author = ProfileSerializer()
+    author = ProfileSerializer()
+
     class Meta:
         model = Post
-        fields = '__all__'
+        depth = 2
+        fields = ['id', 'parent', 'comments', 'post_type', 'title',
+                  'time', 'body', 'likes', 'author', 'group', 'hashtags', 'topics']

api/forum/views.py

@@ -4,17 +4,15 @@
 from .serializers import PostSerializer
 
 
-
 class PostList(generics.ListCreateAPIView):
-    queryset = Post.objects.all()
+    queryset = Post.objects.all().order_by('time')
     serializer_class = PostSerializer
     permission_classes = (permissions.IsAuthenticated,)
 
 
 class PostDetail(generics.RetrieveUpdateDestroyAPIView):
     serializer_class = PostSerializer
+
     def get_queryset(self):
         user = self.request.user
         return Post.objects.filter(author=user.id)
-
-

client/src/App.js

@@ -118,10 +118,10 @@ class App extends Component {
             )}
           ></Route>
           <Route
-            path="/community/view-group"
+            path="/community/view-group/:id"
             exact
             render={routerProps => (
-              <CommunityPageGroup handle_logout={this.handleLogout} {...routerProps} />
+              <CommunityPageGroup handle_logout={this.handleLogout} {...this.state} {...routerProps} />
             )}
           ></Route>
           <Route
@@ -203,6 +203,7 @@ class App extends Component {
               <DirectoryGroup handle_logout={this.handleLogout} {...routerProps} />
             )}
           ></Route>
+
         </Layout>
 
         <Route path="/welcome" exact component={SplashPage}></Route>

client/src/components/Comment/Comment.js

@@ -6,23 +6,19 @@ import Profile2 from "../../assets/images/card_profile3.png";
 
 // Function based React Component
 const Comment = props => {
-  // Default Class to apply to Component
-  // No props right now but when there is data we can use
-  // this.props.comment and this.props.date
-  const { body, date, time, to, image, name, likes, replies, type } = props;
+  const { body, date, time, to, image, name, likes } = props;
 
   return (
     <div className="Comment">
       <div className="Comment__column Comment__profile">
-        <ProfilePicture type="small" to={to} image={Profile2} />
+        <ProfilePicture type="small" to={to} image={image} />
         <h4 className="Comment__name">{name}</h4>
       </div>
       <div className="Comment__column Comment__content">
         <div className="Comment__column--left">
           <p className="Comment__body">{body}</p>
           <div className="Comment__activities">
             <div className="Comment__likes">{likes} Likes</div>
-            <div className="Comment__replies">{replies} Replies</div>
           </div>
         </div>
         <div className="Comment__column Comment__timing--container">
@@ -31,7 +27,7 @@ const Comment = props => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
 export default Comment;

client/src/components/Connections/Connections.js

@@ -16,13 +16,12 @@ function Connections(props) {
   }
 
   let userArray = props.users.map((person, index) => {
-    let userLastInitial = person.userSurname.slice(0, 1) + ".";
     if (index < 4) {
       return (
-        <div key={person.userId} className="Connections__person">
-          <ProfilePicture type="small" image={person.userPic} />
+        <div key={person.user} className="Connections__person">
+          <ProfilePicture type="small" image={person.image} />
           <p className="Connections--name">
-            {person.userFirstName} {userLastInitial}
+            {`${person.first_name} ${person.last_name[0].toUpperCase()}`}
           </p>
         </div>
       );

client/src/components/ForumPost/ForumPost.js

@@ -27,24 +27,24 @@ export default function ForumPost(props) {
               hashtags={props.post.hashtags}
             />
           ) : (
-            <PostBody />
-          )}
+              <PostBody />
+            )}
         </div>
         <div className="ForumPost__middle">
           <div className="ForumPost__topic-pills">
             {props.topics
               ? props.topics.map(topic => (
-                  <Pill
-                    key={topic}
-                    text={topic}
-                    active={false}
-                    size={"small"}
-                    color={"red"}
-                    inactiveColor={"pink"}
-                    onClick={props.pillClick}
-                    selectId={0}
-                  />
-                ))
+                <Pill
+                  key={topic}
+                  text={topic}
+                  active={false}
+                  size={"small"}
+                  color={"red"}
+                  inactiveColor={"pink"}
+                  onClick={props.pillClick}
+                  selectId={0}
+                />
+              ))
               : null}
           </div>
           <div className="ForumPost__likes-comments">
@@ -53,8 +53,7 @@ export default function ForumPost(props) {
               {" Likes"}
             </p>
             <p>
-              {props.comments}
-              {" Comments"}
+              {`${props.comments.length} ${props.comments.length === 1 ? " Comment" : " Comments"}`}
             </p>
           </div>
         </div>
@@ -75,11 +74,11 @@ ForumPost.defaultProps = {
 };
 ForumPost.propTypes = {
   commentClick: PropTypes.func.isRequired,
-  likeClick: PropTypes.func.isRequired,
+  // likeClick: PropTypes.func.isRequired,
   pillClick: PropTypes.func.isRequired,
   to: PropTypes.string,
   likes: PropTypes.number,
-  comments: PropTypes.number,
+  comments: PropTypes.array,
   name: PropTypes.string,
   image: PropTypes.string,
   topics: PropTypes.array,

client/src/components/ForumPostContainer/ForumPostContainer.js

@@ -5,11 +5,13 @@ import Comment from '../Comment/Comment'
 
 
 export default function ForumPostContainer(props) {
+  const comments = props.forumPost.comments
   return (
     <div className="PostContainer">
       <div>
         {props.forumPost ? (
           <ForumPost
+            key={props.postId}
             pillClick={props.forumPost.pillClick}
             commentClick={props.forumPost.commentClick}
             likeClick={props.forumPost.likeClick}
@@ -20,30 +22,24 @@ export default function ForumPostContainer(props) {
             topics={props.forumPost.topics}
             image={props.forumPost.image}
             post={props.forumPost.post}
+            topic={props.forumPost.topic}
+            hashtags={props.forumPost.hashtags}
           />
         ) : (
-          <ForumPost />
-        )}
+            <ForumPost />
+          )}
       </div>
       <div>
-        {props.comments ? (
-          props.comments.map((comment, i) => {
+        {!comments ? "" : (
+          comments.map((comment, i) => {
             return (
               <Comment
-                name={comment.name}
-                likes={comment.likes}
-                replies={comment.replies}
-                image= {comment.image}
-                date={comment.date}
-                time={comment.time}
-                body={comment.body}
-                key={i}
+                key={comment.id}
+                {...comment}
               />
             );
           })
-
-        ) : (
-          <Comment />
+
         )}
       </div>
     </div>

client/src/components/GroupCard/GroupCard.js

@@ -4,15 +4,15 @@ import { Link } from "react-router-dom";
 import Card from "../Card/Card";
 
 const GroupCard = props => {
-  let { picture, name, members, location } = props;
+  let { picture, name, members, location, id } = props;
   return (
     <Card size="medium-short" picture={picture}>
-      <Link className="GroupCard" to="#">
+      <Link className="GroupCard" to={`../community/view-group/${id}`}>
         <div className="GroupCard__text-container">
           <h2 className="GroupCard__group-name">{name}</h2>
           <footer className="GroupCard__details">
             <p className="GroupCard__members">{members} members</p>
-            <p className="GroupCard__location">{location}</p>
+            <p className="GroupCard__location">{location.name}</p>
           </footer>
         </div>
       </Link>

client/src/components/InputSelect/InputSelect.js

@@ -37,7 +37,7 @@ InputSelect.defaultProps = {
     { value: "option1", title: "Option 1" },
     { value: "option2", title: "Option 2" }
   ],
-  onSelect:function(){}
+  onSelect: function () { }
 };
 InputSelect.propTypes = {
   optionPrefix: PropTypes.string,

client/src/components/InputTextField/InputTextField.js

@@ -4,8 +4,9 @@ import "./InputTextField.css";
 const InputTextField = props => {
   let { variation = "default", type, name, placeholder, onChange } = props;
 
-  if(props.loadcallback && props.loadcallbackarg) props.loadcallback(props.loadcallbackarg);
-  console.log(props);
+  if (props.loadcallback && props.loadcallbackarg) {
+    props.loadcallback(props.loadcallbackarg)
+  }
   return (
     <input
       className={`InputTextField__container--${variation}`}

client/src/components/Modal/Modal.js

@@ -2,7 +2,6 @@ import React from "react";
 import "./Modal.css";
 
 const Modal = props => {
-  console.log(props);
   return (
     <div
       className="Modal"

client/src/components/Modal/_ModalContainer-join.js

@@ -18,7 +18,6 @@ class ModalContainerJoin extends Component {
   };
 
   render() {
-    console.log(this.props);
     return (
       <div className="Modal__container">
         <Button

client/src/components/NavLink/NavLink.js

@@ -19,7 +19,6 @@ class NavLink extends React.Component {
     }
   }
   render() {
-    console.log(this.props);
     if (this.props.text === "Community") {
       return (
         <div