Implement authentication

src/app/config/dialogues.ts

@@ -4,7 +4,9 @@ export type DialogueType = {
   character: string
 }
 
-// TODO: keep dialogues on the back end side
+/**
+ * @TODO store dialogues in back end
+ */
 export const DialoguesMemo: DialogueType[] = [
   {
     level: 1,

src/app/config/paths.ts

@@ -41,3 +41,7 @@ export const pathActivationSent = (): string => {
 export const pathActivation = (): string => {
   return `/user/confirm`
 }
+
+export const pathUnknownError = (): string => {
+  return `/unknown-error`
+}

src/app/graphql/mutations/register.ts

@@ -1,20 +1,35 @@
-import {  gql } from '@apollo/client';
+import { gql } from '@apollo/client'
 
-export const REGISTER_MUTATION = "REGISTER_MUTATION";
+export const REGISTER_MUTATION = 'REGISTER_MUTATION'
 export const registerMutation = gql`
-  mutation Register($email: String!, $password: String!, $confirm_password: String!, $username: String!) {
-    register(email: $email, password: $password, confirm_password: $confirm_password, username: $username) {
-      user{
-        username
-        email
-        id
-        createdAt
-        updatedAt
-    }
-     error{
-       field,
-       message
-     }
+  mutation Mutation(
+    $username: String!
+    $email: String!
+    $password: String!
+    $confirmPassword: String!
+  ) {
+    createUser(
+      username: $username
+      email: $email
+      password: $password
+      confirmPassword: $confirmPassword
+    ) {
+      ... on FieldError {
+        success
+        error {
+          field
+          message
+          status
+        }
+      }
+      ... on SuccessResponse {
+        success
+        user {
+          username
+          id
+          email
+        }
+      }
     }
   }
-`;
+`

src/components/useCustomQuery.tsx

@@ -1,14 +1,16 @@
+import * as Apollo from '@apollo/client'
 import * as React from 'react'
 
 import State from '@/context/state'
-import { useQuery } from '@apollo/client'
 
-export const useCustomQuery = (name: string, query: any) => {
+export const useCustomQuery = (
+  name: string, 
+  query: Apollo.DocumentNode
+) => {
+
   const { dispatch } = React.useContext(State)
-  const { loading, error, data } = useQuery(query)
+  const { loading, error, data } = Apollo.useQuery(query)
 
-
-  // Dispatch data
   React.useEffect(() => {
     if (data) {
       dispatch({ type: name, payload: data })

src/components/useGenerateLevelMemo.tsx

@@ -1,11 +1,12 @@
 import { boardRules } from '@/utils/board-rules'
 import { getRandomIntInclusive } from '@/utils/get-random'
 
-const size = 30
+const BOARD_SIZE = 30
 
 export const isStartOfTheRow = (number: number): boolean => {
   return (number - 1) % 5 === 0
 }
+
 export const isEndOfTheRow = (number: number): boolean => {
   return number % 5 === 0
 }
@@ -48,7 +49,7 @@ export const filterPossibilities = (
   possibilities: number[],
   avoid: number[],
 ): number[] => {
-  const filter_range = possibilities.filter((el) => el > 0 && el < size) // our of range
+  const filter_range = possibilities.filter((el) => el > 0 && el < BOARD_SIZE) // our of range
   const filter_avoid = filter_range.filter((val) => !avoid.includes(val)) // not in avoid list
 
   return filter_avoid
@@ -63,25 +64,38 @@ export const generateNext = (number: number, avoid: number[]): number => {
   return selected_possibility
 }
 
-const generateLevelMemo = (player_level: number | string) => {
-  /* Variables */
+/**
+ * @name generateLevelMemo
+ * 
+ * This functions generates array of numbers
+ * representing the sequence of the path on the game 
+ * board.
+ *  
+ * (!) There is a minor chance of a combination
+ * that will not allow to construct the full path
+ * of required number of tiles. In this case it is 
+ * recommended to re-run function.
+ * 
+ * @param player_level {number|string}
+ * @returns {number[]}
+ */
+
+function generateLevelMemo (player_level: number | string):number[]  {
+
   const current_rule = boardRules.find((el) => el.level === player_level)
   const level_arr: number[] = []
   const avoid: number[] = []
   const number_of_tiles: number = current_rule.level
 
-  /** @LevelGenerator */
-
-  /* Previous Step */
   let previous_step: number | null = null
 
-  /* Get First Tile */
-  const first_tile = getRandomIntInclusive(1, 30)
+  // get first tile
+  const first_tile = getRandomIntInclusive(1, BOARD_SIZE)
   level_arr.push(first_tile)
   avoid.push(first_tile)
   previous_step = first_tile
 
-  /* Get the next step */
+  // get the next step
   for (let i = 0; i <= number_of_tiles; i++) {
     const next = generateNext(previous_step, avoid)
 

src/pages/Activate.tsx

@@ -8,6 +8,8 @@ import LayoutMenu from '@/components/layouts/layout-menu'
 import { confirmQuery } from '@/app/graphql/mutations/confirm'
 import { pathLogin } from '@/app/config/paths'
 
+
+
 export default function Activation() {
   const [activated, setActivated] = React.useState<boolean>(false)
   const [confirmUser, { data }] = Apollo.useMutation(confirmQuery)