implemented review rendering for both user view org profile, as well …

…as regular org profile

Took 41 minutes

app/imports/ui/components/OrgReview.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Meteor from 'meteor/meteor';
+import { useTracker } from 'meteor/react-meteor-data';
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Star } from 'react-bootstrap-icons';
+import { UserProfiles } from '../../api/user/UserProfileCollection';
+import LoadingSpinner from './LoadingSpinner';
+
+const OrgReview = ({ review }) => {
+  const { ready, profile } = useTracker(() => {
+    // Note that this subscription will get cleaned up
+    // when your component is unmounted or deps change.
+    // Get access to Stuff documents.
+    const profileSubscription = UserProfiles.subscribeUser();
+    // Determine if the subscription is ready
+    const rdy = profileSubscription.ready();
+    // Get the profile whose email matches the reviewer's
+    const reviewerProfile = UserProfiles.findOne({ _id: { $eq: review.reviewerID } });
+    return {
+      profile: reviewerProfile,
+      ready: rdy,
+    };
+  }, []);
+  return (ready ? (
+    <Container>
+      <Container className="d-inline-block">
+        <h6>{profile.firstName} {profile.lastName}</h6>
+        {review.rating === null ? (
+          <h6>Rating: <Star className="pb-1" /> 0</h6>
+        ) : (
+          <h6>Rating: <Star className="pb-1" /> {review.rating}</h6>
+        )}
+        {review.content}
+        <hr />
+      </Container>
+    </Container>
+  ) : (<LoadingSpinner />));
+};
+
+// Require a document to be passed to this component.
+OrgReview.propTypes = {
+  review: PropTypes.shape({
+    rating: { type: Number, min: 1, max: 5 },
+    reviewerID: { type: String }, // userID
+    reviewFor: { type: Object },
+    'reviewFor.type': { type: String, allowedValues: ['event', 'organization'] }, // ["event", "organization"]
+    'reviewFor.ID': { type: String }, // eventID/organizationID
+    content: { type: String },
+  }).isRequired,
+};
+
+export default OrgReview;

app/imports/ui/pages/OrganizationProfile.jsx

@@ -9,17 +9,23 @@ import { PAGE_IDS } from '../utilities/PageIDs';
 import '../css/OrganizationProfile.css';
 import OrganizationEvents from '../components/OrganizationEvents';
 import GoBackButton from '../components/GoBackButton';
+import OrgReview from '../components/OrgReview';
+import { Review } from '../../api/review/ReviewCollection';
 
 /** Organization profile page which can only be viewed by org owner. */
 const OrganizationProfile = () => {
   const { _id } = useParams();
 
-  const { ready, orgProfile } = useTracker(() => {
+  const { ready, orgProfile, orgReviews } = useTracker(() => {
     const subscription = Organization.subscribeOrganization(); // Subscribe to organization publication
+    const sub2 = Review.subscribeReviewOrganization(_id); // Subscribe to review publication
     const profile = Organization.findOne({ _id: _id }); // Query organization
+    const review = Review.find({ 'reviewFor.ID': _id }).fetch(); // Query reviews
+    console.log(review);
     return {
-      ready: subscription ? subscription.ready() : false,
+      ready: subscription ? subscription.ready() && sub2.ready() : false,
       orgProfile: profile,
+      orgReviews: review,
     };
   });
 
@@ -90,6 +96,14 @@ const OrganizationProfile = () => {
           <Col sm={12} md={1} />
         </Row>
       </Container>
+      <Container className="my-3 rounded-4 color2">
+        <Row>
+          <Col>
+            <h1 className="text-center">Reviews</h1>
+            {orgReviews.map((review, index) => <Row key={index}><OrgReview review={review} /></Row>)}
+          </Col>
+        </Row>
+      </Container>
     </Container>
   ) : (
     <LoadingSpinner />

app/imports/ui/pages/UserViewOrgProfile.jsx

@@ -10,18 +10,24 @@ import LoadingSpinner from '../components/LoadingSpinner';
 import { PAGE_IDS } from '../utilities/PageIDs';
 import '../css/OrganizationProfile.css';
 import GoBackButton from '../components/GoBackButton';
+import OrgReview from '../components/OrgReview';
+import { Review } from '../../api/review/ReviewCollection';
 
 /** Organization profile page which can be viewed by everyone. */
 const UserViewOrgProfile = () => {
   const { _id } = useParams();
   const theUser = Meteor.user();
   console.log(theUser);
-  const { ready, orgProfile } = useTracker(() => {
+  const { ready, orgProfile, theReviews } = useTracker(() => {
     const subscription = Organization.subscribeOrganization(); // Subscribe to organization publication
+    const sub2 = Review.subscribeReviewOrganization(_id); // Subscribe to review publication
     const profile = Organization.findOne({ _id: _id }); // Query organization
+    const review = Review.find({ 'reviewFor.ID': _id }).fetch(); // Query reviews
+    console.log(review);
     return {
-      ready: subscription ? subscription.ready() : false,
+      ready: subscription ? subscription.ready() && sub2.ready() : false,
       orgProfile: profile,
+      theReviews: review,
     };
   });
 
@@ -95,6 +101,14 @@ const UserViewOrgProfile = () => {
           <Col md={1} />
         </Row>
       </Container>
+      <Container className="my-3 rounded-4 color2">
+        <Row>
+          <Col>
+            <h1 className="text-center">Reviews</h1>
+            {theReviews.map((review, index) => <Row key={index}><OrgReview review={review} /></Row>)}
+          </Col>
+        </Row>
+      </Container>
     </Container>
   ) : (
     <LoadingSpinner />