Refactor - CreatePost component

src/common/graphql/fragments/postInFeed.graphql.ts

@@ -0,0 +1,30 @@
+import { gql } from "@apollo/client";
+
+export const FRAGMENT_POST = gql`
+  fragment PostInFeed on Post {
+    id
+    amount
+    message
+    images {
+      imageUrl
+      imageThumbnailUrl
+    }
+    createdAt
+    receivers {
+      id
+      avatar
+      name
+    }
+    sender {
+      id
+      name
+      avatar
+    }
+    votes {
+      voter {
+        id
+        name
+      }
+    }
+  }
+`;

src/common/graphql/mutations/createPost.graphql.ts

@@ -0,0 +1,27 @@
+import { gql } from "@apollo/client";
+
+const CREATE_POST = gql`
+  mutation CreatePost(
+    $message: String
+    $kudos: Int
+    $receivers: [ID!]
+    $virtual_receivers: [String!]
+    $team_id: ID
+    $images: [UploadedFile!]!
+  ) {
+    createPost(
+      message: $message
+      amount: $kudos
+      receiverIds: $receivers
+      nullReceivers: $virtual_receivers
+      teamId: $team_id
+      images: $images
+    ) {
+      post {
+        id
+        amount
+      }
+    }
+  }
+`;
+export default CREATE_POST;

src/common/graphql/queries/getGoalPercentage.graphql.ts

@@ -0,0 +1,18 @@
+import { gql } from "@apollo/client";
+
+export const GET_GOAL_PERCENTAGE = gql`
+  query getGoalPercentage($team_id: ID!) {
+    teamById(id: $team_id) {
+      id
+      activeKudosMeter {
+        amount
+      }
+      activeGoals {
+        id
+        amount
+        name
+        achievedOn
+      }
+    }
+  }
+`;

src/common/graphql/queries/getGuidelines.graphql.ts

@@ -0,0 +1,13 @@
+import { gql } from "@apollo/client";
+
+export const GET_GUIDELINES = gql`
+  query Guidelines($team_id: ID!) {
+    teamById(id: $team_id) {
+      guidelines {
+        id
+        kudos
+        name
+      }
+    }
+  }
+`;

src/common/graphql/queries/getPosts.graphql.ts

@@ -0,0 +1,23 @@
+import { gql } from "@apollo/client";
+import { FRAGMENT_POST } from "../fragments/postInFeed.graphql";
+
+export const GET_POSTS = gql`
+  query postsConnection($team_id: ID!, $end: String) {
+    teamById(id: $team_id) {
+      id
+      posts(first: 10, after: $end, orderBy: "created_at desc") {
+        edges {
+          cursor
+          node {
+            ...PostInFeed
+          }
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
+      }
+    }
+  }
+  ${FRAGMENT_POST}
+`;

src/common/graphql/queries/getUsers.graphql.ts

@@ -0,0 +1,14 @@
+import { gql } from "@apollo/client";
+
+export const GET_USERS = gql`
+  query getUsers($team_id: ID!) {
+    teamById(id: $team_id) {
+      id
+      users {
+        id
+        name
+        virtualUser
+      }
+    }
+  }
+`;

src/common/hooks/useFormValidation.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export type ErrorState = {
+  errors: string[];
+};
+
+type ValidationFunction<T> = (state: T) => ErrorState;
+
+const useFormValidation = <T extends Record<string, any>>(
+  initialState: T,
+  validate: ValidationFunction<T>,
+) => {
+  const [state, setState] = useState<T>(initialState);
+  const [errors, setErrors] = useState<ErrorState>({ errors: [] });
+
+  useEffect(() => {
+    const errorState = validate(state);
+    setErrors(errorState);
+  }, [])
+
+  const updateState = (state: T) => {
+    setState((prevState) => ({ ...prevState, ...state }));
+
+    const errorState = validate(state);
+    setErrors(errorState);
+  };
+
+  return { state, errors, updateState };
+};
+
+export default useFormValidation;

src/components/organisms/RepoList/RepoList.spec.tsx

@@ -1,13 +1,13 @@
 import { mount, ReactWrapper } from "enzyme";
 import { act } from "react-dom/test-utils";
-import { GET_POSTS } from "../../../modules/feed/queries";
 import {
   findByTestId,
   mockLocalstorage,
   wait,
   withMockedProviders,
 } from "../../../spec_helper";
 import { RepoList } from "./RepoList";
+import { GET_POSTS } from "../../../common/graphql/queries/getPosts.graphql";
 
 const mocks = (hasNextPage: boolean) => [
   {

src/components/organisms/RepoList/RepoList.tsx

@@ -1,12 +1,13 @@
 import { Query } from "@apollo/client/react/components";
 import { Icon, TileList } from "@kabisa/ui-components";
 
-import { GET_POSTS, GetPostsResult } from "../../../modules/feed/queries";
+import { GetPostsResult } from "../../../modules/feed/queries";
 import settings from "../../../config/settings";
 import { Transaction } from "../../../modules/feed/components/Transaction";
 import { Storage } from "../../../support/storage";
 
 import s from "./RepoList.module.scss";
+import { GET_POSTS } from "../../../common/graphql/queries/getPosts.graphql";
 
 export function RepoList() {
   return (

src/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module '*.graphql' {
+    import { DocumentNode } from 'graphql'
+    const Schema: DocumentNode
+
+    export = Schema
+  }

src/modules/feed/components/CreatePost/CreatePost.module.css

@@ -10,6 +10,7 @@
   resize: vertical;
   border: 0.1rem solid var(--subtle-color);
   border-radius: var(--radii-level-1);
+  width: 100%;
 }
 
 .button {

src/modules/feed/components/CreatePost/CreatePost.spec.tsx

@@ -8,8 +8,10 @@ import {
   wait,
   withMockedProviders,
 } from "../../../../spec_helper";
-import { CREATE_POST, CreatePost } from "./CreatePost";
-import { GET_GOAL_PERCENTAGE, GET_POSTS } from "../../queries";
+import { GET_GOAL_PERCENTAGE } from "../../../../common/graphql/queries/getGoalPercentage.graphql";
+import { GET_POSTS } from "../../../../common/graphql/queries/getPosts.graphql";
+import CreatePost from "./CreatePost";
+import CREATE_POST from "../../../../common/graphql/mutations/createPost.graphql";
 
 let mutationCalled = false;
 let goalPercentageQueryCalled = false;