feat: enable auto select for votes-ai

Signed-off-by: Manuel Ruck <[email protected]>
demokratie-live · May 9, 2024 · 012c3b2 · 012c3b2
1 parent 5fad2e2
commit 012c3b2
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 11 deletions.
diff --git a/bundestag.io/admin/src/components/Procedures/AiVotes.tsx b/bundestag.io/admin/src/components/Procedures/AiVotes.tsx
@@ -2,9 +2,10 @@ import { Maybe, Vote, VoteResult } from '@/__generated/gql-ai/graphql';
 import { Button, Spin } from 'antd';
 import { useState } from 'react';
 
-type AiVotesProps = {
+export type AiVotesProps = {
   decision: string;
   period: number;
+  onResult?: (result: Vote[]) => void;
 };
 
 /**
@@ -15,7 +16,7 @@ type AiVotesProps = {
  * @param decision
  * @param period
  */
-export const AiVotes: React.FC<AiVotesProps> = ({ decision, period }) => {
+export const AiVotes: React.FC<AiVotesProps> = ({ decision, period, onResult }) => {
   const [votes, setVotes] = useState<Vote[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -41,6 +42,7 @@ export const AiVotes: React.FC<AiVotesProps> = ({ decision, period }) => {
       });
 
       setVotes(response);
+      onResult?.(response);
     } catch (error) {
       console.error(error);
     } finally {

diff --git a/bundestag.io/admin/src/components/Procedures/VoteResultsForm.tsx b/bundestag.io/admin/src/components/Procedures/VoteResultsForm.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
-import { Form, Input, Button, InputNumber, Radio, Row, Col, notification, Switch } from 'antd';
+import React, { useRef, useState } from 'react';
+import { Form, Input, Button, InputNumber, Radio, Row, Col, notification, Switch, FormInstance } from 'antd';
 import { axiosClient } from '../../lib/axios';
-import { AiVotes } from './AiVotes';
+import { AiVotes, AiVotesProps } from './AiVotes';
+import { Vote } from '@/__generated/gql-ai/graphql';
 
 // Ant Design Sub-Elements
 const { TextArea } = Input;
@@ -29,6 +30,8 @@ const FRACTIONS = [
 ];
 
 const VoteResultsForm = ({ data, type, procedureId, period }) => {
+  const [form] = Form.useForm();
+
   const onFinish = (values) => {
     notification.info({
       key: 'saveProcedure',
@@ -85,8 +88,17 @@ const VoteResultsForm = ({ data, type, procedureId, period }) => {
     }));
   }
 
+  const onAiVoteResult: AiVotesProps['onResult'] = (votes) => {
+    const fieldValue = form.getFieldValue('partyVotes');
+    form.setFieldValue(
+      'partyVotes',
+      votes.map((vote, i) => ({ ...fieldValue[i], main: vote.vote })),
+    );
+  };
+
   return (
     <Form
+      form={form}
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
       className="login-form"
@@ -102,6 +114,7 @@ const VoteResultsForm = ({ data, type, procedureId, period }) => {
         })),
       }}
     >
+      <div>HELLO</div>
       <FormItem
         label="Abstimmung über"
         name="votingDocument"
@@ -124,7 +137,7 @@ const VoteResultsForm = ({ data, type, procedureId, period }) => {
       >
         {({ getFieldValue }) => {
           if (getFieldValue('decisionText') && period) {
-            return <AiVotes decision={getFieldValue('decisionText')} period={period} />;
+            return <AiVotes decision={getFieldValue('decisionText')} period={period} onResult={onAiVoteResult} />;
           }
           return null;
         }}

diff --git a/bundestag.io/admin/src/lib/config.ts b/bundestag.io/admin/src/lib/config.ts
@@ -1,11 +1,13 @@
 let errors: string[] = [];
+const AI_SIMULATION = process.env.AI_SIMULATION === 'true';
+
 if (!process.env.BUNDESTAGIO_SERVER_URL) {
   errors.push('Please define the BUNDESTAGIO_SERVER_URL environment variable inside .env.local');
 }
-if (!process.env.AI_SERVER_URL) {
+if (!AI_SIMULATION && !process.env.AI_SERVER_URL) {
   errors.push('Please define the AI_SERVER_URL environment variable inside .env.local');
 }
-if (!process.env.AI_ACCESS_TOKEN) {
+if (!AI_SIMULATION && !process.env.AI_ACCESS_TOKEN) {
   errors.push('Please define the AI_ACCESS_TOKEN environment variable inside .env.local');
 }
 
@@ -15,6 +17,7 @@ if (errors.length > 0) {
 
 export const config = {
   BUNDESTAGIO_SERVER_URL: process.env.BUNDESTAGIO_SERVER_URL!,
-  AI_SERVER_URL: process.env.AI_SERVER_URL!,
-  AI_ACCESS_TOKEN: process.env.AI_ACCESS_TOKEN!,
+  AI_SERVER_URL: process.env.AI_SERVER_URL,
+  AI_ACCESS_TOKEN: process.env.AI_ACCESS_TOKEN,
+  AI_SIMULATION: AI_SIMULATION,
 };
diff --git a/bundestag.io/admin/src/pages/api/graphql-ai/index.ts b/bundestag.io/admin/src/pages/api/graphql-ai/index.ts
@@ -5,15 +5,45 @@ import { config } from '@/lib/config';
 import request from 'graphql-request';
 import { ParseDecisionDocument, ParseDecisionQuery, ParseDecisionQueryVariables } from '@/__generated/gql-ai/graphql';
 
+const aiSimulationData = [
+  {
+    name: 'Union',
+    vote: 'YES',
+  },
+  {
+    name: 'SPD',
+    vote: 'ABSTINATION',
+  },
+  {
+    name: 'FDP',
+    vote: 'NO',
+  },
+  {
+    name: 'Grüne',
+    vote: 'YES',
+  },
+  {
+    name: 'AfD',
+    vote: 'NO',
+  },
+  {
+    name: 'Linke',
+    vote: 'YES',
+  },
+];
+
 const graphqlAi = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (config.AI_SIMULATION) {
+    return res.status(200).send(aiSimulationData);
+  }
   const session = await getServerSession(req, res, authOptions);
 
   const { decision, period } = req.body.variables;
 
   if (!!session?.user && decision && period) {
     try {
       const response = await request<ParseDecisionQuery, ParseDecisionQueryVariables>(
-        config.AI_SERVER_URL,
+        config.AI_SERVER_URL!,
         ParseDecisionDocument,
         {
           decision,