More updates to realtime.

pages/404.js

@@ -1,18 +1,20 @@
+import { Row, Column, Flexbox } from 'react-basics';
+import { useIntl } from 'react-intl';
 import AppLayout from 'components/layout/AppLayout';
-import { useIntl, defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  notFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
-});
+import { labels } from 'components/messages';
 
 export default function Custom404() {
   const { formatMessage } = useIntl();
 
   return (
     <AppLayout>
-      <div className="row justify-content-center">
-        <h1 style={{ textAlign: 'center' }}>{formatMessage(messages.notFound)}</h1>
-      </div>
+      <Row>
+        <Column>
+          <Flexbox alignItems="center" justifyContent="center" flex={1} style={{ minHeight: 600 }}>
+            <h1>{formatMessage(labels.pageNotFound)}</h1>
+          </Flexbox>
+        </Column>
+      </Row>
     </AppLayout>
   );
 }

pages/api/realtime/[id].ts

@@ -0,0 +1,20 @@
+import { subMinutes } from 'date-fns';
+import { RealtimeInit, NextApiRequestAuth } from 'lib/types';
+import { useAuth } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok } from 'next-basics';
+import { getRealtimeData } from 'queries';
+
+export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit>) => {
+  await useAuth(req, res);
+
+  if (req.method === 'GET') {
+    const { id } = req.query;
+
+    const data = await getRealtimeData(id, subMinutes(new Date(), 30));
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};

pages/api/realtime/init.ts

@@ -1,28 +0,0 @@
-import { subMinutes } from 'date-fns';
-import { RealtimeInit, NextApiRequestAuth } from 'lib/types';
-import { secret } from 'lib/crypto';
-import { useAuth } from 'lib/middleware';
-import { NextApiResponse } from 'next';
-import { createToken, methodNotAllowed, ok } from 'next-basics';
-import { getRealtimeData, getUserWebsites } from 'queries';
-
-export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit>) => {
-  await useAuth(req, res);
-
-  if (req.method === 'GET') {
-    const { id: userId } = req.auth.user;
-
-    const websites = await getUserWebsites(userId);
-    const ids = websites.map(({ id }) => id);
-    const token = createToken({ websites: ids }, secret());
-    const data = await getRealtimeData(ids, subMinutes(new Date(), 30));
-
-    return ok(res, {
-      websites,
-      token,
-      data,
-    });
-  }
-
-  return methodNotAllowed(res);
-};

pages/api/realtime/update.ts

@@ -1,36 +0,0 @@
-import { ok, methodNotAllowed, badRequest, parseToken } from 'next-basics';
-import { useAuth } from 'lib/middleware';
-import { getRealtimeData } from 'queries';
-import { SHARE_TOKEN_HEADER } from 'lib/constants';
-import { secret } from 'lib/crypto';
-import { NextApiRequestQueryBody, RealtimeUpdate } from 'lib/types';
-import { NextApiResponse } from 'next';
-
-export interface InitUpdateRequestQuery {
-  startAt: string;
-}
-
-export default async (
-  req: NextApiRequestQueryBody<InitUpdateRequestQuery>,
-  res: NextApiResponse<RealtimeUpdate>,
-) => {
-  await useAuth(req, res);
-
-  if (req.method === 'GET') {
-    const { startAt } = req.query;
-
-    const token = req.headers[SHARE_TOKEN_HEADER];
-
-    if (!token) {
-      return badRequest(res);
-    }
-
-    const { websites } = parseToken(token, secret());
-
-    const data = await getRealtimeData(websites, new Date(+startAt));
-
-    return ok(res, data);
-  }
-
-  return methodNotAllowed(res);
-};

pages/realtime/[id]/index.js

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
+
+export default function RealtimeDetailsPage() {
+  const router = useRouter();
+  const { id: websiteId } = router.query;
+
+  if (!websiteId) {
+    return null;
+  }
+
+  return (
+    <AppLayout>
+      <RealtimeDashboard websiteId={websiteId} />
+    </AppLayout>
+  );
+}

pages/realtime/index.js

@@ -1,10 +1,10 @@
 import AppLayout from 'components/layout/AppLayout';
-import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
+import RealtimeHome from 'components/pages/realtime/RealtimeHome';
 
 export default function RealtimePage() {
   return (
     <AppLayout>
-      <RealtimeDashboard />
+      <RealtimeHome />
     </AppLayout>
   );
 }