feat: select point estimate from frontend

client/components/point-estimate/estimate-select.tsx

@@ -0,0 +1,74 @@
+import React, { useRef } from 'react';
+import { useQuery, useMutation } from 'urql';
+import { useSelector } from 'react-redux';
+
+import { ReduxState } from '~redux/reducers';
+
+const getValidEstimates = `query GetValidEstimates($projectId: String!) {
+  pointingSchema(projectId: $projectId) {
+    ... on EstimateSchema {
+      all
+    }
+    ... on DbError {
+      message
+    }
+    ... on PtError {
+      code
+      error
+      kind
+      possibleFix
+    }
+  }
+}`;
+
+const addEstimate = `mutation AddStoryEstimate($storyId: String!, $pointValue: Int!, $userEmail: String!) {
+  createEstimate(storyId: $storyId, pointValue: $pointValue, userEmail: $userEmail) {
+    id
+    pointValue
+    userId
+  }
+}`;
+
+interface Props {
+  storyId: string;
+}
+
+const EstimateSelect = ({ storyId }: Props) => {
+  const currentProject = useSelector((state: ReduxState) => state.project);
+  const currentUser = useSelector((state: ReduxState) => state.user);
+
+  const [, executeMutation] = useMutation(addEstimate);
+
+  const onChange = e => {
+    executeMutation({
+      storyId,
+      pointValue: parseInt(e.target.value, 10),
+      userEmail: currentUser.email,
+    });
+  };
+
+  const [res] = useQuery({
+    query: getValidEstimates,
+    variables: { projectId: currentProject.id },
+  });
+
+  if (res.fetching) {
+    return <>Loading GraphQL...</>;
+  } else if (res.error) {
+    return <>GraphQL Error</>;
+  }
+
+  return (
+    <select onChange={onChange}>
+      {res.data.pointingSchema.all.map((value: number) => {
+        return (
+          <option key={value} value={value}>
+            {value}
+          </option>
+        );
+      })}
+    </select>
+  );
+};
+
+export default EstimateSelect;

client/components/projects/projects.tsx

@@ -9,7 +9,7 @@ import Project from '~components/projects/project';
 
 const fetchProjects = `query FetchProjects($filter: String!) {
   projects(filter: $filter) {
-    ... on Error {
+    ... on PtError {
       code
       error
       kind
@@ -40,6 +40,12 @@ const fetchProjects = `query FetchProjects($filter: String!) {
             name
           }
           estimate
+          userEstimates {
+            id
+            pointValue
+            storyId
+            userId
+          }
         }
       }
     }

client/components/projects/types.ts

@@ -12,7 +12,8 @@ export interface Story {
   comments: Comment[];
   tasks: Task[];
   labels: Label[];
-  estimate: number;
+  estimate: Number;
+  userEstimates: Estimate[];
 }
 
 export interface Comment {
@@ -32,3 +33,9 @@ export interface Label {
   id: string;
   name: string;
 }
+
+export interface Estimate {
+  id: string;
+  pointValue: number;
+  userId: string;
+}

client/components/story/story.tsx

@@ -5,6 +5,8 @@ import Description from '~components/story/story-description';
 import Details from '~components/story/story-details';
 import Tasks from '~components/story/story-tasks';
 import { colors, fontSizes, spacing } from '~lib/theme';
+import EstimateSelect from '~components/point-estimate/estimate-select';
+import * as Types from '~components/projects/types';
 
 const StoryWrapper = styled.div`
   padding-top: 138px;
@@ -29,7 +31,7 @@ interface StoryProps {
 }
 
 const Story = ({
-  data: { id, name, description, storyType, comments, tasks, labels },
+  data: { id, name, description, storyType, comments, tasks, labels, userEstimates },
 }: StoryProps) => {
   return (
     <>
@@ -39,6 +41,17 @@ const Story = ({
         <Tasks tasks={tasks} />
         <CommentTitle>{`Comments (${comments.length})`}</CommentTitle>
         <CommentDivider />
+        {console.log(userEstimates)}
+        {userEstimates.map((est: Types.Estimate) => {
+          return (
+            <div key={est.id}>
+              <h4>User estimates</h4>
+              <p>user: {est.userId}</p>
+              <p>estimate: {est.pointValue}</p>
+            </div>
+          );
+        })}
+        <EstimateSelect storyId={id} />
       </StoryWrapper>
     </>
   );

client/redux/reducers/story.ts

@@ -16,6 +16,7 @@ const initialState = {
     storyType: null,
     tasks: null,
     labels: null,
+    userEstimates: null,
   },
   storyPosition: null,
 };