mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-09-11 02:35:32 +03:00
community: streaming chat app - add graphql query tab
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6196 GitOrigin-RevId: 01ccf4e424428936a4a7bdc44bb37c480cfb92fc
This commit is contained in:
parent
d76636a5a3
commit
24863e4601
@ -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>
|
||||
|
@ -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 (
|
||||
{!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>
|
||||
)}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user