community: streaming chat app - add graphql query tab

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6196 GitOrigin-RevId: 01ccf4e424428936a4a7bdc44bb37c480cfb92fc
2024-09-11 02:35:32 +03:00 · 2022-10-05 15:02:01 +05:30 · 2022-10-05 15:02:01 +05:30 · 24863e4601
commit 24863e4601
parent d76636a5a3
3 changed files with 101 additions and 33 deletions
--- a/community/sample-apps/streaming-subscriptions-chat/public/index.html
+++ b/community/sample-apps/streaming-subscriptions-chat/public/index.html
@ -34,7 +34,10 @@
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
-
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap"
+      rel="stylesheet"
+    />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@ -55,9 +58,9 @@
      function gtag() {
        dataLayer.push(arguments);
      }
-      gtag('js', new Date());
+      gtag("js", new Date());

-      gtag('config', 'UA-129818961-1');
+      gtag("config", "UA-129818961-1");
    </script>
  </head>
  <body>
--- a/community/sample-apps/streaming-subscriptions-chat/src/components/OnlineUsers.js
+++ b/community/sample-apps/streaming-subscriptions-chat/src/components/OnlineUsers.js
@ -1,12 +1,51 @@
-import React, { useState } from 'react';
-import { gql, useSubscription } from '@apollo/client';
+import React, { useState } from "react";
+import styled from "styled-components";
+import { gql, useSubscription } from "@apollo/client";

 import {
  StyledLeftSection,
  StyledOnlineUsers,
  StyledOnlineUserCircle,
-} from '../styles/StyledChatApp';
-import { getUserBgColor } from './MessageList';
+} from "../styles/StyledChatApp";
+import { getUserBgColor } from "./MessageList";
+
+const StyledQueryTab = styled.div`
+  display: flex;
+  padding: 12px !important;
+
+  p {
+    flex: 1;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .active {
+    background: #344658;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+  code {
+    background: #141c22 !important;
+  }
+`;
+
+const streamingSubQuery = `{
+  subscription ($last_received_ts: timestamptz) {
+    message_stream(
+      cursor: { initial_value: { timestamp: $last_received_ts } }
+      batch_size: 10
+    ) {
+      id
+      username
+      text
+      timestamp
+    }
+  }
+}`;

 const fetchOnlineUsersSubscription = gql`
  subscription {
@ -24,29 +63,52 @@ function OnlineUsers({ dataStream }) {

  const { data } = useSubscription(fetchOnlineUsersSubscription);

+  const [isSubscriptionTabActive, toggleSubscriptionTab] = useState(true);
+
  const toggleMobileView = () => {
    setMobileView(!showMobileView);
  };

  const subscriptionStreamData = (isMobileView) => (
    <StyledOnlineUsers>
-      <p
-        className={isMobileView ? 'mobileuserListHeading' : 'userListHeading'}
-        onClick={toggleMobileView}
+      <StyledQueryTab
+        className={isMobileView ? "mobileuserListHeading" : "userListHeading"}
      >
-        Subscription Stream
-        {isMobileView && <i className="fa fa-angle-up"></i>}
-      </p>
-      {((isMobileView && showMobileView) || !isMobileView) && (
+        <p
+          className={isSubscriptionTabActive ? "active" : ""}
+          role="button"
+          onClick={() => toggleSubscriptionTab(true)}
+        >
+          Subscription
+          {isMobileView && <i className="fa fa-angle-up"></i>}
+        </p>
+        <p
+          className={isSubscriptionTabActive ? "" : "active"}
+          role="button"
+          onClick={() => toggleSubscriptionTab(false)}
+        >
+          GraphQL Query
+          {isMobileView && <i className="fa fa-angle-up"></i>}
+        </p>
+      </StyledQueryTab>
+      {isSubscriptionTabActive ? (
        <ul
          className={
-            isMobileView ? 'mobileUserList' : 'userList subscription-stream'
+            isMobileView ? "mobileUserList" : "userList subscription-stream"
          }
        >
          <p className="subscription-stream">
-            {JSON.stringify(dataStream, undefined, 4)}
+            {JSON.stringify(dataStream?.message_stream, undefined, "\t")}
          </p>
        </ul>
+      ) : (
+        <ul
+          className={
+            isMobileView ? "mobileUserList" : "userList subscription-stream"
+          }
+        >
+          <p className="subscription-stream">{streamingSubQuery}</p>
+        </ul>
      )}
    </StyledOnlineUsers>
  );
@ -54,14 +116,14 @@ function OnlineUsers({ dataStream }) {
  const subscriptionData = (isMobileView) => (
    <StyledOnlineUsers>
      <p
-        className={isMobileView ? 'mobileuserListHeading' : 'userListHeading'}
+        className={isMobileView ? "mobileuserListHeading" : "userListHeading"}
        onClick={toggleMobileView}
      >
-        Online Users ({!data?.user_online ? 0 : data?.user_online.length}){' '}
+        Online Users ({!data?.user_online ? 0 : data?.user_online.length}){" "}
        {isMobileView && <i className="fa fa-angle-up"></i>}
      </p>
      {((isMobileView && showMobileView) || !isMobileView) && (
-        <ul className={isMobileView ? 'mobileUserList' : 'userList'}>
+        <ul className={isMobileView ? "mobileUserList" : "userList"}>
          {data?.user_online.map((u) => {
            return (
              <StyledOnlineUserCircle
@ -93,10 +155,10 @@ function OnlineUsers({ dataStream }) {
          <div className="flex-div">
            <p onClick={() => toggleMobileMenu(true)}>
              Online Users&nbsp;(
-              {!data?.user_online ? 0 : data?.user_online.length}){' '}
+              {!data?.user_online ? 0 : data?.user_online.length}){" "}
            </p>
            <i
-              className={showMobileMenu ? 'fa fa-angle-down' : 'fa fa-angle-up'}
+              className={showMobileMenu ? "fa fa-angle-down" : "fa fa-angle-up"}
            ></i>
          </div>
        )}
@ -105,7 +167,9 @@ function OnlineUsers({ dataStream }) {
            <p className="close-btn" onClick={() => toggleMobileMenu(false)}>
              <i className="fa fa-times"></i>
            </p>
-            <div className="onlineUsers">{subscriptionData(false)}</div>
+            <div className="onlineUsers online-users-wrapper-div">
+              {subscriptionData(false)}
+            </div>
            <div className="onlineUsers">{subscriptionStreamData(false)}</div>
          </div>
        )}
--- a/community/sample-apps/streaming-subscriptions-chat/src/styles/StyledChatApp.js
+++ b/community/sample-apps/streaming-subscriptions-chat/src/styles/StyledChatApp.js
@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";

 export const ThemeSwitch = styled.div`
  display: flex;
@ -41,7 +41,7 @@ export const ThemeSwitch = styled.div`

  .slider:before {
    position: absolute;
-    content: '';
+    content: "";
    height: 28px;
    width: 28px;
    left: 3px;
@ -53,7 +53,7 @@ export const ThemeSwitch = styled.div`
    box-shadow: 3.21429px 1.28571px 8.35714px -1.28571px rgba(0, 0, 0, 0.3),
      0px 2.57143px 3.85714px -0.642857px rgba(0, 0, 0, 0.1);
    background: #344658
-      url('https://graphql-engine-cdn.hasura.io/assets/main-site/bulb_night.svg');
+      url("https://graphql-engine-cdn.hasura.io/assets/main-site/bulb_night.svg");
    background-repeat: no-repeat;
    background-position: center;
  }
@ -68,7 +68,7 @@ export const ThemeSwitch = styled.div`
    -ms-transform: translateX(36px);
    transform: translateX(36px);
    background: #fff
-      url('https://graphql-engine-cdn.hasura.io/assets/main-site/bulb_day.svg');
+      url("https://graphql-engine-cdn.hasura.io/assets/main-site/bulb_day.svg");
    background-repeat: no-repeat;
    background-position: center;
  }
@ -331,13 +331,13 @@ export const StyledLeftSection = styled.div`
      display: flex;
      align-items: flex-start;

-      flex-direction: ${(props) => (props?.showMobileMenu ? 'column' : '')};
+      flex-direction: ${(props) => (props?.showMobileMenu ? "column" : "")};

      justify-content: space-between;
      padding: 24px 24px 0;

-      min-height: ${(props) => (props?.showMobileMenu ? '100vh' : '80px')};
-      height: ${(props) => (props?.showMobileMenu ? '100%' : '80px')};
+      min-height: ${(props) => (props?.showMobileMenu ? "100vh" : "80px")};
+      height: ${(props) => (props?.showMobileMenu ? "100%" : "80px")};
      overflow-y: scroll;

      .mobile-data-wrapper {
@ -439,19 +439,20 @@ export const StyledOnlineUsers = styled.div`

    ::-webkit-scrollbar {
      background: ${({ theme }) =>
-        theme.name === 'dark' ? '#1c262f' : '#FAFAFA'};
+        theme.name === "dark" ? "#1c262f" : "#FAFAFA"};
      width: 12px;
    }

    ::-webkit-scrollbar-thumb {
      background: ${({ theme }) =>
-        theme.name === 'dark' ? '#394e60' : '#A6B6C4'};
+        theme.name === "dark" ? "#394e60" : "#A6B6C4"};
      border-radius: 80px;
      width: 12px;
    }
  }

  .subscription-stream {
+    font-family: "IBM Plex Mono", monospace;
    color: ${({ theme }) => theme.colors.text};
    font-size: 14px;
    font-weight: 500;
@ -529,13 +530,13 @@ export const StyledMessagesList = styled.div`

  ::-webkit-scrollbar {
    background: ${({ theme }) =>
-      theme.name === 'dark' ? '#1c262f' : '#FAFAFA'};
+      theme.name === "dark" ? "#1c262f" : "#FAFAFA"};
    width: 12px;
  }

  ::-webkit-scrollbar-thumb {
    background: ${({ theme }) =>
-      theme.name === 'dark' ? '#394e60' : '#A6B6C4'};
+      theme.name === "dark" ? "#394e60" : "#A6B6C4"};
    border-radius: 80px;
    width: 12px;
  }