Display groups im in

Pipfile

@@ -0,0 +1,11 @@
+[[source]]
+name = "pypi"
+url = "https://pypi.org/simple"
+verify_ssl = true
+
+[dev-packages]
+
+[packages]
+
+[requires]
+python_version = "3.8"

api/accounts/models.py

@@ -42,6 +42,7 @@ class Profile(models.Model):
         'community.Event', related_name='people', null=True, blank=True)
     connections = models.ManyToManyField(
         'self', related_name='friends', null=True, blank=True)
+
     # Posts, comments, and replies to be defined as foreign key on those respective models within forum app
     # CoTrip media defined as foreign key in community app
     groups = models.ManyToManyField(

api/community/serializers.py

@@ -4,7 +4,7 @@
 class GroupSerializer(serializers.ModelSerializer):
     class Meta:
         model = Group
-        fields = '__all__'
+        fields = ['title', 'description', 'location', 'posts', 'members']
 
 class EventSerializer(serializers.ModelSerializer):
     group = serializers.CharField()

api/trip/urls.py

@@ -18,5 +18,5 @@
     path('activity', ActivityList.as_view(), name='activity_list'),
     path('location/bystate', LocationListByState.as_view(), name='location_list_by_state'),
     path('location/states', StateList.as_view(), name='state_list'),
-    path('activity/<int:pk>', ActivityDetail.as_view(), name='activity_detail')
+    path('activity/<int:pk>', ActivityDetail.as_view(), name='activity_detail'),
 ]

client/src/App.js

@@ -37,6 +37,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { BASE_URL } from "./services/constants";
 import { handleSignup, handleLogin, handleLogout } from "./services/User";
+import GroupPage from "./components/GroupPage/GroupPage"
 
 library.add(
   fab,

client/src/components/GroupPage/GroupPage.css

@@ -0,0 +1,2 @@
+
+

client/src/components/GroupPage/GroupPage.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import './GroupPage.css';
+import GroupCard from "../GroupCard/GroupCard";
+import Navbar from '../Navbar/Navbar';
+import Footer from '../Footer/Footer';
+import card1 from "assets/images/card-image-3.png";
+import card2 from "assets/images/card-image-2.png";
+import card3 from "assets/images/card-image.png";
+import people from "assets/images/profile_default.svg";
+
+
+const GroupPage = props => {
+
+    return (
+        <div>
+            <Navbar 
+            to={"/member-page"} 
+            profileImage={people}
+            />
+
+
+            <div className='wrapper'>
+                <h1>Groups You Can Join!</h1>
+            </div>
+            <div className="HomePage__group-cards-container">
+            <span className="HomePage__groupcard-1">
+                <GroupCard
+                name="DIY with your kids"
+                members="98"
+                location="Boston, MA"
+                picture={card1}
+                />
+            </span>
+            <span className="HomePage__groupcard-2">
+                <GroupCard name="Mystery Stories!" members="213" location="NYC" picture={card2} />
+            </span>
+            <span className="HomePage__groupcard-3">
+                <GroupCard name="Bay Cruise" members="98" location="Lisbon" picture={card3} />
+            </span>
+            </div>
+            <Footer />
+        </div>
+    )
+}
+
+
+export default GroupPage

client/src/components/GroupPage/GroupPage.stories.js

@@ -0,0 +1,2 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";

client/src/components/UpcomingTripsCard/UpcomingTripsCard.js

@@ -5,6 +5,7 @@ import Card from "../Card/Card";
 import TripCard from "../TripCard/TripCard";
 
 const UpcomingTripsCard = props => {
+
   return (
     <Card color="pink" className="UpcomingTripsCard" size="large">
       <header className="UpcomingTripsCard__header">Upcoming Trips</header>