Add Inputs

App.tsx

@@ -24,10 +24,10 @@ function App(): React.JSX.Element {
     console.log('inside useeffect');
     const fetchForm = async () => {
       if (!form) {
-        console.log('fetchiiiing forrmmm!!!');
         let form = await getFormTemplate(
           'eb3df1f89653475f0bcbd22da35f8d2f126db8a68a88a7abedc53535c76c39b4',
         )
+        console.log("Form isss", form)
         setForm(form);
       }
     };
@@ -43,7 +43,7 @@ function App(): React.JSX.Element {
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
-        <PrescriptionCreator />
+        <PrescriptionCreator form={form}/>
       </ScrollView>
     </SafeAreaView>
   );

components/Inputs/Inputs.tsx

@@ -0,0 +1,110 @@
+import { DatePicker, DatePickerView, InputItem, List, Text, TextareaItem, View } from "@ant-design/react-native";
+import { V1AnswerSettings, AnswerTypes } from "@formstr/sdk/dist/interfaces";
+import { useState } from "react";
+import RNPickerSelect from "react-native-picker-select"
+
+interface InputFillerProps {
+  answerType: AnswerTypes;
+  answerSettings: V1AnswerSettings;
+  onChange: (answer: string, message?: string) => void;
+  defaultValue?: string | number | boolean;
+}
+
+export const InputFiller: React.FC<InputFillerProps> = ({
+  answerType,
+  answerSettings,
+  onChange,
+  defaultValue,
+}) => {
+
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (
+    e: any
+  ) => {
+    setInputValue(e.target.value)
+  };
+
+  const handleValueChange = (value: string | null) => {
+    if (!value) return;
+    onChange(value);
+  };
+
+  const getInput = (
+    answerType: AnswerTypes,
+    answerSettings: V1AnswerSettings
+  ) => {
+    const dropdownItems = (answerSettings.choices || []).map((choice) => {
+      return {
+          label: choice.label, value: choice.choiceId, key: choice.choiceId
+  }})
+    const INPUT_TYPE_COMPONENT_MAP: { [key in AnswerTypes]?: JSX.Element } = {
+      [AnswerTypes.label]: <></>,
+      [AnswerTypes.shortText]: (
+        <InputItem
+        onChange={handleInputChange}
+        defaultValue={defaultValue as string}
+        placeholder="enter a value...">
+      </InputItem>
+      ),
+      [AnswerTypes.paragraph]: (
+        <TextareaItem
+        rows={10}
+        placeholder="enter a value.."
+        onChange={handleInputChange}
+        autoHeight
+        style={{ paddingVertical: 5 }}
+      />
+      ),
+      [AnswerTypes.number]: (
+        // <InputNumber
+        //   defaultValue={defaultValue as string}
+        //   onChange={handleValueChange}
+        //   style={{ width: "100%" }}
+        //   placeholder="Please enter your response"
+        // />
+        <View></View>
+      ),
+      [AnswerTypes.radioButton]: (
+        // <ChoiceFiller
+        //   answerType={answerType as AnswerTypes.radioButton}
+        //   answerSettings={answerSettings}
+        //   defaultValue={defaultValue as string}
+        //   onChange={handleValueChange}
+        // />
+        <View></View>
+      ),
+      [AnswerTypes.checkboxes]: (
+        // <ChoiceFiller
+        //   defaultValue={defaultValue as string}
+        //   answerType={answerType as AnswerTypes.checkboxes}
+        //   answerSettings={answerSettings}
+        //   onChange={handleValueChange}
+        // />
+        <View></View>
+      ),
+      [AnswerTypes.dropdown]: (
+            <RNPickerSelect 
+                onValueChange={(value) => { setInputValue(value), console.log("selected value is: ", value)}} 
+                items={dropdownItems}
+                placeholder={{}}
+                key="picker" 
+                value={inputValue}
+            ><Text>{inputValue ? answerSettings.choices?.filter((choice) => { return choice.choiceId === inputValue})[0].label : "Select an option"}</Text></RNPickerSelect>
+      ),
+      [AnswerTypes.date]: (
+        <List>
+            <DatePicker key="Datepicker" />
+        </List>
+      ),
+      [AnswerTypes.time]: (
+        <List>
+            <DatePicker key="time" />
+        </List>
+      ),
+    };
+
+    return INPUT_TYPE_COMPONENT_MAP[answerType];
+  };
+
+  return <>{getInput(answerType, answerSettings)}</>;
+};

components/PrescriptionCreator/index.tsx

@@ -1,8 +1,9 @@
 import {Dimensions, Image, StyleSheet, Text, View} from 'react-native';
-import SampleJSON from '../../formstr/sample.json';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {PropsWithChildren} from 'react';
-import {Card} from '@ant-design/react-native';
+import {Button, Card} from '@ant-design/react-native';
+import { V1Field } from '@formstr/sdk/dist/interfaces';
+import { InputFiller } from '../Inputs/Inputs';
 
 type SectionProps = PropsWithChildren<{
   title: string;
@@ -57,7 +58,9 @@ function Section({children, title}: SectionProps): React.JSX.Element {
   );
 }
 
-export const PrescriptionCreator = () => {
+export const PrescriptionCreator = ({form} : {form: any}) => {
+  if(form === null) return <View><Text>Loading...</Text></View>
+
   return (
     <View
       style={{
@@ -69,16 +72,16 @@ export const PrescriptionCreator = () => {
           width: Dimensions.get('window').width,
         }}
         source={{
-          uri: SampleJSON.settings.titleImageUrl,
+          uri: form.settings.titleImageUrl,
         }}
       />
       <Section title="PeerScribe">
-        From the practice of {SampleJSON.name}
+        From the practice of {form.name}
       </Section>
 
       <Section title="Prescription">
-        <View style={{display: 'flex', flexDirection: 'column'}}>
-          {SampleJSON.fields.map(field => {
+        <View style={{display: 'flex', flexDirection: 'column', width: "100%"}}>
+          {form.fields.map((field: V1Field) => {
             return (
               <Card
                 key={field.questionId}
@@ -88,7 +91,7 @@ export const PrescriptionCreator = () => {
                   padding: 10,
                   backgroundColor: Colors.white,
                   margin: 10,
-                  width: 500,
+                  width: 350,
                   height: 'auto',
                 }}>
                 <Text
@@ -97,15 +100,17 @@ export const PrescriptionCreator = () => {
                   }}>
                   {field.question}
                 </Text>
-                <Text
+                {/* <Text
                   style={{
                     color: Colors.light,
                   }}>
                   {field.answerType}
-                </Text>
+                </Text> */}
+                <InputFiller answerSettings={field.answerSettings} answerType={field.answerType} onChange={() => {}} />
               </Card>
             );
           })}
+          <Button type='primary'> Create RX </Button>
         </View>
       </Section>
     </View>

formstr/formstr.ts

@@ -7,14 +7,13 @@ export const getFormTemplate = async (formId: string): Promise<{}> => {
   console.log('inside getFormTemplate');
   const pool = new SimplePool();
   let formIdPubkey = formId;
-  console.log('everything initialised');
   const filter = {
     kinds: [0],
     authors: [formIdPubkey], //formId is the npub of the form
   };
   let kind0 = null
   try {
-    console.log('inside trydasdsad');
+    console.log('inside try');
     kind0 = await pool.get(relayList, filter)
     console.log('Main thread is working, got event', kind0);
   } catch (e) {

package.json

@@ -14,9 +14,11 @@
     "@formstr/sdk": "^0.0.4-alpha",
     "@react-native-community/segmented-control": "^2.2.2",
     "@react-native-community/slider": "^4.5.0",
+    "@react-native-picker/picker": "^2.6.1",
     "nostr-tools": "^2.3.1",
     "react": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-picker-select": "^9.0.1",
     "react-native-url-polyfill": "^2.0.0",
     "text-encoding-polyfill": "^0.6.7"
   },

yarn.lock

@@ -1785,6 +1785,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.5.0.tgz#5c55488ee30060cd87100fb746b9d8655dbab04e"
   integrity sha512-pyUvNTvu5IfCI5abzqRfO/dd3A009RC66RXZE6t0gyOwI/j0QDlq9VZRv3rjkpuIvNTnsYj+m5BHlh0DkSYUyA==
 
+"@react-native-picker/picker@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.6.1.tgz#3b20ddd1385fab0487db103dc6519570f8892e6d"
+  integrity sha512-oJftvmLOj6Y6/bF4kPcK6L83yNBALGmqNYugf94BzP0FQGpHBwimVN2ygqkQ2Sn2ZU3pGUZMs0jV6+Gku2GyYg==
+
 "@react-native/assets-registry@0.73.1":
   version "0.73.1"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.73.1.tgz#e2a6b73b16c183a270f338dc69c36039b3946e85"
@@ -5247,6 +5252,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
+
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6254,6 +6264,13 @@ react-native-modal-popover@^2.0.1:
     lodash ">4.17.0"
     prop-types "^15.8.1"
 
+react-native-picker-select@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-picker-select/-/react-native-picker-select-9.0.1.tgz#af454433061a18b7307a725fc045c05ad494e300"
+  integrity sha512-iIhb82OSH1vqB/HoipvbuX3RCzmeaQmIASlaRbv6X8imNjzh1DH/LaKoF4+DAZJLT0iX7QG79vpwZu8wjWap3Q==
+  dependencies:
+    lodash.isequal "^4.5.0"
+
 react-native-url-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz#db714520a2985cff1d50ab2e66279b9f91ffd589"