From 647a5b5be9466fa93c530da31a5031ad2736661a Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 4 Aug 2021 00:56:43 +0200 Subject: [PATCH] Format --- src/App.tsx | 30 ++++++++--------------- src/pages/HomePage/HomePage.tsx | 34 +++++++++++++------------- src/util/EchoLink.ts | 43 +++++++++++++-------------------- 3 files changed, 44 insertions(+), 63 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 260b49c..03446a2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ -import { Redirect, Router } from '@reach/router'; +import { ApolloClient, ApolloLink, ApolloProvider, HttpLink, InMemoryCache } from '@apollo/client'; +import { Router } from '@reach/router'; +import Echo from 'laravel-echo'; import React from 'react'; +import io from 'socket.io-client'; import classNames from './assets/scss/App.scss'; import { useSideBar } from './context/SideBar/SideBarContext'; import MenuBar from './layout/MenuBar/MenuBar'; @@ -11,19 +14,9 @@ import ProfilePage from './pages/user/ProfilePage/ProfilePage'; import ProfilePages from './pages/user/ProfilePages'; import UserPages from './pages/user/UserPages'; import routes from './routes'; +import EchoLink from './util/EchoLink'; import OnRouteChange from './util/OnRouteChange'; import resolveClassName from './util/resolveClassName'; -import EchoLink from './util/EchoLink'; -import Echo from 'laravel-echo'; -import io from 'socket.io-client'; -import { - ApolloLink, - ApolloClient, - ApolloProvider, - HttpLink, - InMemoryCache, - gql -} from '@apollo/client'; const App = (): React.ReactElement => { const { state, toggleState } = useSideBar(); @@ -39,18 +32,15 @@ const App = (): React.ReactElement => { client: io, auth: { headers: { - "Gql-Session": "SUPER_SECRET_KEY_HEADER" - } - } + 'Gql-Session': 'SUPER_SECRET_KEY_HEADER', + }, + }, }); const echoLink = new EchoLink(echoClient); - const httpLink = new HttpLink({uri: 'http://localhost/graphql/'}); + const httpLink = new HttpLink({ uri: 'http://localhost/graphql/' }); const client = new ApolloClient({ - link: ApolloLink.from([ - echoLink, - httpLink, - ]), + link: ApolloLink.from([echoLink, httpLink]), cache: new InMemoryCache(), }); diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 4129105..e7d7126 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,31 +1,28 @@ +import { gql, useQuery } from '@apollo/client'; import { RouteComponentProps } from '@reach/router'; import React from 'react'; -import { useQuery, useSubscription, gql } from '@apollo/client'; - -const QUERY = - gql` +const QUERY = gql` query ac { aircraft { id name registration } - }`; -const SUB = - gql` + } +`; +const SUB = gql` subscription acAdd { aircraftAdded { id name registration } - }`; + } +`; const HomePage: React.FunctionComponent = () => { - const {loading, data, error, subscribeToMore} = useQuery( - QUERY, - ); + const { loading, data, error, subscribeToMore } = useQuery(QUERY); const unsub = subscribeToMore({ document: SUB, @@ -44,12 +41,15 @@ const HomePage: React.FunctionComponent = () => { return ( <> HomePage - { - loading ? "Loading" : - data.aircraft.map((ac) => { - return
Name: {ac.name}, Reg: {ac.registration}
; - }) - } + {loading + ? 'Loading' + : data.aircraft.map((ac) => { + return ( +
+ Name: {ac.name}, Reg: {ac.registration} +
+ ); + })} ); }; diff --git a/src/util/EchoLink.ts b/src/util/EchoLink.ts index b2a7ba0..e5ae874 100644 --- a/src/util/EchoLink.ts +++ b/src/util/EchoLink.ts @@ -1,30 +1,18 @@ -import { ApolloLink, Observable } from "@apollo/client"; - -import type { - Operation, - NextLink, - FetchResult, - RequestHandler, -} from "apollo-link"; - -import type Echo from "laravel-echo"; -import { Observer } from "apollo-client/util/Observable"; - -import type { PresenceChannel, Channel } from "laravel-echo/dist/channel"; -import { OperationDefinitionNode, FieldNode } from "graphql"; +import { ApolloLink, Observable } from '@apollo/client'; +import { Observer } from 'apollo-client/util/Observable'; +import type { FetchResult, NextLink, Operation, RequestHandler } from 'apollo-link'; +import { FieldNode, OperationDefinitionNode } from 'graphql'; +import type Echo from 'laravel-echo'; +import type { Channel, PresenceChannel } from 'laravel-echo/dist/channel'; // The presence channel interface does not have the channel methods, // but in reality the actual object does, so I try to fix this here. type FixedEchoChannel = PresenceChannel & Channel; -function subscribeToEcho( - echoClient: Echo, - channelName: string, - observer: Observer -) { +function subscribeToEcho(echoClient: Echo, channelName: string, observer: Observer) { const channel = echoClient.private(channelName.replace(/^private\-/, '')) as FixedEchoChannel; - channel.listen(".lighthouse-subscription", (result: { data: any }) => + channel.listen('.lighthouse-subscription', (result: { data: any }) => observer.next(result.data?.data || result.data) ); } @@ -43,11 +31,14 @@ function createSubscriptionHandler( setChannelName: (name: string) => any ) { return (data: FetchResult) => { - const operationDefinition: OperationDefinitionNode = operation.query.definitions.find(definitionNode => definitionNode.kind === "OperationDefinition") as OperationDefinitionNode - const fieldNode: FieldNode = operationDefinition.selectionSet.selections.find(definitionNode => definitionNode.kind === "Field") as FieldNode - const subscriptionName: string | null = fieldNode.name.value - const channelName: string | null = - data?.extensions?.lighthouse_subscriptions?.channels?.[subscriptionName]; + const operationDefinition: OperationDefinitionNode = operation.query.definitions.find( + (definitionNode) => definitionNode.kind === 'OperationDefinition' + ) as OperationDefinitionNode; + const fieldNode: FieldNode = operationDefinition.selectionSet.selections.find( + (definitionNode) => definitionNode.kind === 'Field' + ) as FieldNode; + const subscriptionName: string | null = fieldNode.name.value; + const channelName: string | null = data?.extensions?.lighthouse_subscriptions?.channels?.[subscriptionName]; if (channelName) { setChannelName(channelName); @@ -65,7 +56,7 @@ function createRequestHandler(echoClient: Echo): RequestHandler { return new Observable((observer) => { forward(operation).subscribe( - createSubscriptionHandler(echoClient, operation, observer, (name) => channelName = name) + createSubscriptionHandler(echoClient, operation, observer, (name) => (channelName = name)) ); return () => unsubscribe(echoClient, () => channelName);