refact: Move everythin to GraphQL, remove redux

Author: Betree

app/API/graphql_api.js

@@ -1,9 +1,27 @@
-import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
+import * as AbsintheSocket from '@absinthe/socket'
+import {
+  ApolloClient,
+  ApolloLink,
+  createHttpLink,
+  InMemoryCache,
+  Observable,
+  split,
+} from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { print } from 'graphql'
+import { Socket as PhoenixSocket } from 'phoenix'
 
 import { GRAPHQL_API_URL } from '../config'
 import { getFromLocalStorage, LOCAL_STORAGE_KEYS } from '../lib/local_storage'
 
+// Convert HTTP URL to WebSocket URL
+const getWebSocketUrl = (httpUrl) => {
+  const url = new URL(httpUrl)
+  const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+  return `${protocol}//${url.host}/socket`
+}
+
 const httpLink = createHttpLink({
   uri: GRAPHQL_API_URL,
 })
@@ -17,8 +35,78 @@ const authLink = setContext((_, { headers }) => {
   }
 })
 
+const authedHttpLink = authLink.concat(httpLink)
+
+// Create Phoenix socket connection
+const phoenixSocket = new PhoenixSocket(getWebSocketUrl(GRAPHQL_API_URL), {
+  params: () => {
+    const token = getFromLocalStorage(LOCAL_STORAGE_KEYS.TOKEN)
+    if (token) {
+      return { token }
+    } else {
+      return {}
+    }
+  },
+})
+
+// Wrap Phoenix socket in AbsintheSocket
+const absintheSocket = AbsintheSocket.create(phoenixSocket)
+
+// Create custom websocket link for Absinthe subscriptions
+const createAbsintheLink = () => {
+  return new ApolloLink((operation) => {
+    const { query, variables, operationName } = operation
+    const queryString = print(query)
+
+    return new Observable((observer) => {
+      const notifier = AbsintheSocket.send(absintheSocket, {
+        operation: queryString,
+        variables: variables || {},
+        operationName: operationName,
+      })
+
+      AbsintheSocket.observe(absintheSocket, notifier, {
+        onAbort: () => {
+          observer.error(new Error('Subscription aborted'))
+        },
+        onError: (error) => {
+          observer.error(error)
+        },
+        onStart: () => {
+          // Subscription started
+        },
+        onResult: (result) => {
+          if (result.data) {
+            observer.next({ data: result.data })
+          }
+          if (result.errors) {
+            observer.error(result.errors)
+          }
+        },
+      })
+
+      // Return cleanup function
+      return () => {
+        AbsintheSocket.cancel(absintheSocket, notifier)
+      }
+    })
+  })
+}
+
+const websocketLink = createAbsintheLink()
+
+// Split link: subscriptions go through websocket, queries/mutations through HTTP
+const link = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
+  },
+  websocketLink,
+  authedHttpLink,
+)
+
 const GraphQLClient = new ApolloClient({
-  link: authLink.concat(httpLink),
+  link,
   cache: new InMemoryCache(),
 })
 

app/API/graphql_queries.js

@@ -7,14 +7,14 @@ export const VideosQuery = gql`
       totalPages
       entries {
         id
-        hash_id: hashId
-        youtube_id: youtubeId
+        hashId
+        youtubeId
         title
         insertedAt
         isPartner
         thumbnail
         speakers {
-          full_name: fullName
+          fullName
           id
           slug
         }
@@ -23,6 +23,21 @@ export const VideosQuery = gql`
   }
 `
 
+export const UserQuery = gql`
+  query User($username: String!) {
+    user(username: $username) {
+      id
+      username
+      name
+      reputation
+      registeredAt
+      pictureUrl
+      miniPictureUrl
+      achievements
+    }
+  }
+`
+
 export const VideosAddedByUserQuery = gql`
   query UserAddedVideosIndex($offset: Int! = 1, $limit: Int! = 16, $username: String!) {
     user(username: $username) {
@@ -32,14 +47,14 @@ export const VideosAddedByUserQuery = gql`
         totalPages
         entries {
           id
-          hash_id: hashId
-          youtube_id: youtubeId
+          hashId
+          youtubeId
           title
           insertedAt
           isPartner
           thumbnail
           speakers {
-            full_name: fullName
+            fullName
             id
             slug
           }
@@ -82,7 +97,7 @@ export const loggedInUserPendingModerationCount = gql`
   query LoggedInUserUnreadNotificationsCount {
     loggedInUser {
       id
-      actions_pending_moderation
+      actionsPendingModeration
     }
   }
 `
@@ -95,3 +110,135 @@ export const loggedInUserTodayReputationGain = gql`
     }
   }
 `
+
+export const VideoDebateQuery = gql`
+  query VideoDebate($id: ID!) {
+    video(hashId: $id) {
+      id
+      hashId
+      title
+      url
+      thumbnail
+      language
+      unlisted
+      youtubeOffset
+      speakers {
+        id
+        fullName
+        slug
+        picture
+      }
+      statements {
+        id
+        text
+        time
+        isDraft
+        speaker {
+          id
+          fullName
+          picture
+        }
+        comments {
+          id
+          text
+          approve
+          score
+          insertedAt
+          replyToId
+          user {
+            id
+            username
+            pictureUrl
+          }
+          source {
+            id
+            url
+          }
+        }
+      }
+    }
+  }
+`
+
+export const DELETE_STATEMENT_MUTATION = gql`
+  mutation DeleteStatement($id: ID!) {
+    deleteStatement(id: $id) {
+      id
+    }
+  }
+`
+
+export const UPDATE_STATEMENT_MUTATION = gql`
+  mutation UpdateStatement($id: ID!, $text: String, $time: Int, $speakerId: ID, $isDraft: Boolean) {
+    updateStatement(id: $id, text: $text, time: $time, speakerId: $speakerId, isDraft: $isDraft) {
+      id
+      time
+      text
+      isDraft
+      video {
+        id
+      }
+    }
+  }
+`
+
+export const CREATE_COMMENT_MUTATION = gql`
+  mutation CreateComment(
+    $statementId: ID!
+    $text: String
+    $source: String
+    $replyToId: ID
+    $approve: Boolean
+  ) {
+    createComment(
+      statementId: $statementId
+      text: $text
+      source: $source
+      replyToId: $replyToId
+      approve: $approve
+    ) {
+      id
+      text
+      approve
+      insertedAt
+      replyToId
+      statementId
+      user {
+        id
+        username
+        pictureUrl
+      }
+      source {
+        id
+        url
+      }
+    }
+  }
+`
+
+export const DELETE_COMMENT_MUTATION = gql`
+  mutation DeleteComment($id: ID!) {
+    deleteComment(id: $id) {
+      id
+      statementId
+      replyToId
+    }
+  }
+`
+
+export const VOTE_COMMENT_MUTATION = gql`
+  mutation VoteComment($commentId: ID!, $value: Int!) {
+    voteComment(commentId: $commentId, value: $value) {
+      id
+      score
+    }
+  }
+`
+
+export const FLAG_COMMENT_MUTATION = gql`
+  mutation FlagComment($commentId: ID!, $reason: Int!) {
+    flagComment(commentId: $commentId, reason: $reason) {
+      id
+    }
+  }
+`