Started with Mongo

2021-01-02 13:11:59 +01:00
parent 5294122f61
commit 30407cac0a
41 changed files with 33775 additions and 0 deletions
--- a/client/src/components/AppointmentList.js
+++ b/client/src/components/AppointmentList.js
@@ -0,0 +1,176 @@
+import React from 'react';
+import Appointment from './Appointment';
+import { useHistory } from 'react-router';
+import { APPOINTMENTS_PER_PAGE } from '../constants';
+import { useQuery, gql } from '@apollo/client';
+import { Link } from 'react-router-dom';
+
+export const FEED_QUERY = gql`
+  query FeedQuery(
+    $take: Int
+    $skip: Int
+    $orderBy: AppointmentOrderByInput
+  ) {
+    feed(take: $take, skip: $skip, orderBy: $orderBy) {
+      id
+      appointments {
+        id
+        createdAt
+        title
+        start
+        end
+        description
+        createdBy {
+          id
+          name
+        }
+        follows {
+          id
+          user {
+            id
+          }
+        }
+      }
+      count
+    }
+  }
+`;
+
+const NEW_APPOINTMENTS_SUBSCRIPTION = gql`
+  subscription {
+    newAppointment {
+      id
+      url
+      description
+      createdAt
+      createdBy {
+        id
+        name
+      }
+      follows {
+        id
+        user {
+          id
+        }
+      }
+    }
+  }
+`;
+
+const getQueryVariables = (isNewPage, page) => {
+  const skip = isNewPage ? (page - 1) * APPOINTMENTS_PER_PAGE : 0;
+  const take = isNewPage ? APPOINTMENTS_PER_PAGE : 100;
+  const orderBy = { createdAt: 'desc' };
+  console.log(isNewPage, page, APPOINTMENTS_PER_PAGE, skip, take, orderBy);
+  return { take, skip, orderBy };
+};
+
+const AppointmentList = () => {
+  const history = useHistory();
+  const isNewPage = history.location.pathname.includes(
+    'new'
+  );
+  const pageIndexParams = history.location.pathname.split(
+    '/'
+  );
+
+  const page = parseInt(
+    pageIndexParams[pageIndexParams.length - 1]
+  );
+
+  console.log(pageIndexParams.length, page);
+
+  const pageIndex = page ? (page - 1) * APPOINTMENTS_PER_PAGE : 0;
+
+  const {
+    data,
+    loading,
+    error,
+    subscribeToMore
+  } = useQuery(FEED_QUERY, {
+    variables: getQueryVariables(isNewPage, page)
+  });
+
+  // const { data } = useQuery(FEED_QUERY);
+
+  const getAppointmentsToRender = (isNewPage, data) => {
+    if (isNewPage) {
+      return data.feed.appointments;
+    }
+    const rankedAppointments = data.feed.appointments.slice();
+    rankedAppointments.sort(
+      (l1, l2) => l2.follows.length - l1.follows.length
+    );
+    return rankedAppointments;
+  };
+
+  subscribeToMore({
+    document: NEW_APPOINTMENTS_SUBSCRIPTION,
+    updateQuery: (prev, { subscriptionData }) => {
+      if (!subscriptionData.data) return prev;
+      const newAppointment = subscriptionData.data.newAppointment;
+      const exists = prev.feed.appointments.find(
+        ({ id }) => id === newAppointment.id
+      );
+      if (exists) return prev;
+
+      return Object.assign({}, prev, {
+        feed: {
+          appointments: [newAppointment, ...prev.feed.appointments],
+          count: prev.feed.appointments.length + 1,
+          __typename: prev.feed.__typename
+        }
+      });
+    }
+  });
+
+  return (
+    <>
+      {loading && <p>Loading...</p>}
+      {error && <pre>{JSON.stringify(error, null, 2)}</pre>}
+      {data && (
+        <>
+          {getAppointmentsToRender(isNewPage, data).map(
+            (appointment, index) => (
+              <Link
+                key={appointment.id}
+                link={appointment}
+                index={index + pageIndex}
+              />
+            )
+          )}
+          {isNewPage && (
+            <div className="flex ml4 mv3 gray">
+              <div
+                className="pointer mr2"
+                onClick={() => {
+                  if (page > 1) {
+                    history.push(`/new/${page - 1}`);
+                  }
+                }}
+              >
+                Previous
+            </div>
+              <div
+                className="pointer"
+                onClick={() => {
+                  if (
+                    page <=
+                    data.feed.count / APPOINTMENTS_PER_PAGE
+                  ) {
+                    const nextPage = page + 1;
+                    history.push(`/new/${nextPage}`);
+                  }
+                }}
+              >
+                Next
+            </div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default AppointmentList;