react-native-paper#Card JavaScript Examples

SmallCardsCarousel = ({
  puenteForms, navigateToNewRecord, setView, surveyee, setUser, pinForm
}) => (
  <ScrollView horizontal>
    {puenteForms.map((form) => (
      <Card
        key={form.tag}
        style={styles.cardSmallStyle}
        onPress={() => {
          if (setUser) {
            setView('Forms');
            navigateToNewRecord(form.tag, surveyee);
          } else {
            navigateToNewRecord(form.tag);
          }
        }}
        onLongPress={pinForm ? () => pinForm(form) : null}
      >
        <View style={styles.cardContainer}>
          <form.image height={40} style={styles.svg} />
          <View style={styles.textContainer}>
            <Text style={styles.text}>
              {I18n.t(form.name)}
            </Text>
          </View>
        </View>

      </Card>
    ))}
  </ScrollView>
)

export default function profileCard({
  name,
  avatar,

  onSelected,
  disableRightBtn,
}) {
  const LeftContent = props => (
    <Avatar.Image
      {...props}
      source={{
        uri: avatar,
      }}
    />
  );
  const RightContent = props => (
    <IconButton
      icon="arrow-right"
      color="#0097e8"
      size={20}
      onPress={onSelected}
      style={{ marginBottom: 24 }}
    />
  );
  return (
    <Card.Title
      title={name}
      subtitle="View profile"
      left={LeftContent}
      right={disableRightBtn ? null : RightContent}
      titleStyle={styles.cardTitle}
      subtitleStyle={styles.cardSub}
    />
  );
}

export default function JobList(props) {
    const [data, setdata] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {
        fetch('https://getplaced.pythonanywhere.com/api/blog/', {
            method: "GET"
        })
            .then(resp => resp.json())
            .then(data => {
                setdata(data)
                setLoading(false)
            })
            .catch(error => Alert.alert("error", error))
    }

    useEffect(() => {
        loadData();
    }, [])

    const clickedItem = (data) => {
        props.navigation.navigate("Blog-Detail", { data: data })
    }

    const renderData = (item) => {
        var date = new Date(`${item.post_date}`)
        return (
            <>
                <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                    <View style={{ flex: 1 }}>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#000", fontSize: 16, marginLeft: 15, }}>
                            {item.title}
                            <Text style={{ fontSize: 13, color: '#808080' }}>    -   ({date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text>
                        </Text>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#808080", fontSize: 12, marginLeft: 17, }}>
                            {item.snippet}
                        </Text>

                    </View>
                </Card>
            </>
        )
    }
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)
                }}
                onRefresh={() => loadData()}
                refreshing={loading}
                keyExtractor={item => `${item.id}`}
            />
            <FAB
                style={styles.fab}
                small={false}
                icon="plus"

                onPress={() => props.navigation.navigate("Create")}
            />
        </View>


    )
}

export default function Resources(props) {
    const [data, setdata] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {
        fetch('https://getplaced.pythonanywhere.com/api/resources/', {
            method: "GET"
        })
            .then(resp => resp.json())
            .then(data => {
                setdata(data)
                setLoading(false)
            })
            .catch(error => Alert.alert("error", error))
    }

    useEffect(() => {
        loadData();
    }, [])

    const clickedItem = (data) => {
        props.navigation.navigate("Resource-Detail", { data: data })
    }

    const renderData = (item) => {
        return (
            <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                <Text style={{ fontSize: 25 }}>{item.title}</Text>
            </Card>
        )
    }
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)
                }}
                onRefresh={() => loadData()}
                refreshing={loading}
                keyExtractor={item => `${item.id}`}
            />
            {/* <FAB
                style={styles.fab}
                small={false}
                icon="plus"

                onPress={() => props.navigation.navigate("Create")}
            /> */}
        </View>


    )
}

AssetFormSelect = ({ setSelectedForm, surveyingOrganization }) => {
  const [assetForms, setAssetForms] = useState([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    assetFormsQuery(surveyingOrganization).then((forms) => {
      setLoading(false);
      setAssetForms(forms);
    });
  }, []);

  const refreshAssetForms = async () => {
    setLoading(true);
    await assetFormsQuery(surveyingOrganization).then((forms) => {
      setAssetForms(forms);
      setLoading(false);
    });
  };

  const selectForm = (form) => {
    setSelectedForm(form);
  };

  return (
    <View>
      <View style={{ flexDirection: 'row' }}>
        <Text style={styles.header}>{I18n.t('assetFormSelect.supAssetForms')}</Text>
        <IconButton
          style={{ bottom: 7 }}
          color={theme.colors.primary}
          size={20}
          icon="refresh"
          onPress={refreshAssetForms}
        />
      </View>
      {loading
        && <ActivityIndicator />}
      <ScrollView horizontal style={styles.componentContainer}>
        {assetForms && assetForms.map((form) => (
          <Card
            key={form.objectId}
            style={layout.cardSmallStyle}
            onPress={() => selectForm(form)}
          >
            <View style={styles.cardContainer}>
              <View style={styles.textContainer}>
                <Text style={styles.text}>
                  {form.name}
                </Text>
              </View>
            </View>
          </Card>
        ))}
      </ScrollView>
    </View>
  );
}

FormsHorizontalView = ({
  forms, header, navigateToCustomForm, pinForm
}) => (
  <View key={() => uuid.v4()} style={layout.screenRow}>
    {header && (
    <View style={{ flexDirection: 'row' }}>
      <Text style={styles.mediumHeader}>{header}</Text>
    </View>
    )}
    <ScrollView horizontal>
      {forms.map((form) => (
        <Card
          key={() => uuid.v4()}
          style={layout.cardSmallStyle}
          onPress={() => {
            navigateToCustomForm(form);
          }}
          onLongPress={() => pinForm(form)}
        >
          <View style={styles.cardContainer}>
            <View style={styles.textContainer}>
              <Text style={styles.text}>
                {form.name}
              </Text>
            </View>
          </View>
        </Card>
      ))}
      {forms?.length < 1 && (
        <View style={layout.screenRow}>
          <Card key={() => uuid.v4()}>
            <Card.Title title={I18n.t('formsGallery.noCustomForms')} />
            {/* To be used when marketplace is available */}
            {/* <Card.Content>
                <Text>{I18n.t('formsGallery.checkOutMarketplace')}</Text>
                <Button>{I18n.t('formsGallery.viewMarketplace')}</Button>
            </Card.Content> */}
          </Card>
        </View>
      )}
    </ScrollView>
  </View>
)

HomeScreen = () => {
  const [tasks, setTasks] = useState(null);
  // const { navigation } = props;

  const showTasks = async () => {
    await getTasksAsync().then((result) => {
      setTasks(result);
    });
  };

  return (
    <View style={layout.screenContainer}>
      <Header />
      <ScrollView>
        <View style={layout.screenRow}>
          <Title>{I18n.t('home.myTasks')}</Title>
          <Card>
            <Card.Content>
              <ComingSoonSVG width={200} height={200} />
              <Paragraph>{I18n.t('home.comingSoon')}</Paragraph>
              <Button onPress={showTasks} mode="contained">
                <Text>{I18n.t('home.tasks')}</Text>
              </Button>
              {tasks != null
                && tasks.map((task) => (
                  <View key={task.task_id}>
                    <Text>{task.name}</Text>
                  </View>
                ))}
            </Card.Content>
          </Card>
        </View>
        {/* <View style={layout.screenRow}>
          <Text>My Pinned Forms</Text>
        </View> */}
        {/* <View style={layout.screenRow}>
          <Title>My Community Board</Title>
          <Card>
            <Card.Content>
              <ComingSoonSVG width={200} height={200} />

              <Paragraph>Coming Soon</Paragraph>
            </Card.Content>
          </Card>
        </View> */}
      </ScrollView>
    </View>
  );
}

render() {
    const {enrolledBy, btnLoading, isBottomSheetOpen} = this.state;

    return (
      <View style={styles.boxScreenContainer}>
        <View style={styles.authorContainer}>
          <Headline style={Styles.fontMedium}>
            Author: {this.state.auth[0]}
          </Headline>
        </View>
        <View style={styles.addPartConatiner}>
          <Text style={Styles.fontSmall}>Add Participant</Text>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder="Email"
            maxLength={50}
            value={this.state.email}
            dense={true}
            onChangeText={(email) => this.setAddParticipant(email)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            loading={btnLoading}
            icon="plus"
            onPress={() => this.handleAddUser()}>
            Add Member
          </Button>
        </View>
        <FlatList
          ListHeaderComponent={() => {
            return (
              <Text style={Styles.fontSmall}>
                Enrolled Users: {enrolledBy.length}
              </Text>
            );
          }}
          ListHeaderComponentStyle={{margin: 10}}
          ListEmptyComponent={() => {
            return <ActivityIndicator />;
          }}
          data={enrolledBy}
          keyExtractor={(item) => item.uid}
          renderItem={({item, index}) => {
            return (
              <Card
                style={styles.card}
                onPress={() => this.handleOptions(index)}>
                <Card.Content>
                  <Subheading style={Styles.fontMedium}>{item.name}</Subheading>
                </Card.Content>
              </Card>
            );
          }}
          ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
        />
        <BottomSheet
          isOpen={isBottomSheetOpen}
          closeBottomSheet={() => this.setBottomSheet(false)}
          options={[{text: 'Remove User', onPress: this.handleRemoveUser}]}
        />
      </View>
    );
  }

render() {
    const {state} = this.context;
    const {enrolledBoxes, newBoxName, btnLoading} = this.state;
    return (
      <View style={styles.listCircleContainer}>
        <Text style={[Styles.fontSmall, styles.helpText]}>
          Boxes are your personal Friend/Family/Work groups where you share
          relevant posts which interest a perticular group. You can either join
          an existing group or create a new group.
        </Text>
        <View style={styles.addPartConatiner}>
          <Text style={Styles.fontSmall}>Create New Box</Text>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder="Box Name"
            maxLength={30}
            dense={true}
            value={newBoxName}
            onChangeText={(nb) => this.setNewBoxName(nb)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            loading={btnLoading}
            icon="plus"
            onPress={() => this.handleCreateBox()}>
            Create Box
          </Button>
        </View>
        <Divider />
        <FlatList
          ListHeaderComponent={() => {
            return <Text style={Styles.fontSmall}>Enrolled Boxes</Text>;
          }}
          ListHeaderComponentStyle={{margin: 10}}
          ListEmptyComponent={() => {
            return (
              <View style={styles.emptyComponentContainer}>
                <Planet
                  size={width / 2.5}
                  mood={newBoxName.length !== 0 ? 'lovestruck' : 'blissful'}
                  color="#FCCB7E"
                />
                <Headline style={[Styles.fontMedium, styles.noBoxesYet]}>
                  Here you create new Boxes and see what boxes you are enrolled
                  in. To switch boxes you just tap on them from the given list.
                  To get started create a New Box, don't forget to give it
                  exciting name.
                </Headline>
              </View>
            );
          }}
          data={enrolledBoxes}
          keyExtractor={(item) => item}
          renderItem={({item}) => {
            return (
              <Card
                onPress={() => this.handleSelectBox(item)}
                style={styles.card}>
                <Card.Content style={styles.cardContent}>
                  <Subheading styles={Styles.fontMedium}>{item}</Subheading>
                  {state.box === item ? (
                    <Icons
                      name="check"
                      size={20}
                      color={DarkTheme.colors.primary}
                    />
                  ) : null}
                </Card.Content>
              </Card>
            );
          }}
          ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
        />
      </View>
    );
  }

function PatientInfo({ theme }) {
  const { colors } = theme;
  const selectedID = useSelector(state => state.appointmentReducer.selectedID);
  const appointments = useSelector(
    state => state.appointmentReducer.appointments,
  );
  const appointment = appointments.find(itx => itx.id === selectedID);

  return (
    <React.Fragment>
      <Text style={styles.title}>Patient Information</Text>
      <Card style={styles.card}>
        <React.Fragment>
          <ProfileCard
            name={appointment.name}
            avatar={appointment.avatar}
            disableRightBtn={true}
          />
          <View style={styles.content}>
            <Detail title="Date of Birth" value="02/14/1980" />
            <Detail title="Gender" value="Male" />
            <Detail title="Previous Visit" value="02/03/2020" />

            <Text style={[styles.title, styles.head]}>Contacts</Text>
            <Section
              name="+1-202-555-0194"
              icon="phone-outline"
              color={colors.accent}
            />
            <Section
              name="[email protected]"
              icon="email-outline"
              color={colors.accent}
            />
            <Section
              name="615 CArter Roadus Suitr 286"
              icon="home-outline"
              color={colors.accent}
            />
          </View>
        </React.Fragment>
      </Card>
    </React.Fragment>
  );
}

Item = ({ item }) => {
  const { id, name, startTime, endTime, tags, avatar } = item;
  const navigation = useNavigation();
  const isTablet = DeviceInfo.isTablet();

  const dispatch = useDispatch();
  const onSelected = () => {
    dispatch(appointmentActions.appointmentSelected(id));
    if (!isTablet) {
      navigation.navigate('AppointmentDetail');
    }
  };

  return (
    <Card style={styles.card}>
      <ProfileCard name={name} avatar={avatar} onSelected={onSelected} />
      <Card.Content>
        <Divider />
        <Text style={styles.duration}>
          {startTime} - {endTime}
        </Text>
        <View style={styles.tags}>
          {tags.map((itx, i) => {
            const { labelColor, buttonColor } = random_rgba();
            return (
              <Button
                key={i}
                mode="contained"
                disabled
                compact
                uppercase={false}
                style={[styles.tag, { backgroundColor: buttonColor }]}
                labelStyle={[styles.tagLabel, { color: labelColor }]}>
                {itx}
              </Button>
            );
          })}
        </View>
      </Card.Content>
    </Card>
  );
}

FormGallery = ({
  navigateToNewRecord, navigateToCustomForm,
  puenteForms,
  pinnedForms, setPinnedForms,
  setLoading, surveyingOrganization
}) => {
  const [customForms, setCustomForms] = useState([]);
  const [workflowData, setWorkflowData] = useState({});
  const [noWorkflowData, setNoWorkflowData] = useState([]);

  useEffect(() => {
    getData('customForms').then((forms) => {
      setCustomForms(forms || []);
      filterWorkflows(forms || []);
    });
  }, [customForms]);

  const filterWorkflows = (forms) => {
    const tableDataByCategory = {};
    forms.forEach((record) => {
      if (!Array.isArray(record.workflows) || record.workflows.length < 1) {
        if ('No Workflow Assigned' in tableDataByCategory) {
          tableDataByCategory['No Workflow Assigned'] = tableDataByCategory['No Workflow Assigned'].concat([record]);
        } else {
          tableDataByCategory['No Workflow Assigned'] = [record];
        }
      } else if (Array.isArray(record.workflows)) {
        record.workflows.forEach((workflow) => {
          if (workflow in tableDataByCategory) {
            tableDataByCategory[workflow] = tableDataByCategory[workflow].concat([record]);
          } else {
            tableDataByCategory[workflow] = [record];
          }
        });
      }
    });
    setNoWorkflowData(tableDataByCategory['No Workflow Assigned']);
    delete tableDataByCategory['No Workflow Assigned'];
    delete tableDataByCategory.Puente;
    setWorkflowData(tableDataByCategory);
  };

  const refreshCustomForms = () => {
    setLoading(true);
    customFormsQuery(surveyingOrganization).then((forms) => {
      setCustomForms(forms);
      setLoading(false);
    });
  };

  const pinForm = async (form) => {
    setPinnedForms([...pinnedForms, form]);
    storeData(pinnedForms, 'pinnedForms');
  };

  const removePinnedForm = async (form) => {
    const filteredPinnedForms = pinnedForms.filter((pinnedForm) => pinnedForm !== form);
    setPinnedForms(filteredPinnedForms);
    storeData(filteredPinnedForms, 'pinnedForms');
  };

  return (
    <View>
      <View key="pinnedForms" style={layout.screenRow}>
        <Text style={styles.header}>{I18n.t('formsGallery.pinnedForms')}</Text>
        <ScrollView horizontal>
          {pinnedForms?.map((form) => (
            <Card
              key={form.objectId ?? form.tag}
              style={layout.cardSmallStyle}
              onPress={() => {
                if (!form.tag) return navigateToCustomForm(form);
                return navigateToNewRecord(form.tag);
              }}
              onLongPress={() => removePinnedForm(form)}
            >

              <View style={styles.cardContainer}>
                {form.image !== undefined && (
                  <form.image height={40} style={styles.svg} />
                )}
                <View style={styles.textContainer}>
                  <Text style={styles.text}>
                    { form.customForm === false ? I18n.t(form.name) : form.name}
                  </Text>
                </View>
              </View>
            </Card>
          ))}
          {pinnedForms?.length < 1 && (
            <View style={layout.screenRow}>
              <Card>
                <Card.Title title={I18n.t('formsGallery.noPinnedForms')} />
              </Card>
            </View>
          )}
        </ScrollView>
      </View>
      <View key="puenteForms" style={layout.screenRow}>
        <Text style={styles.header}>{I18n.t('formsGallery.puenteForms')}</Text>
        <SmallCardsCarousel
          puenteForms={puenteForms}
          navigateToNewRecord={navigateToNewRecord}
          pinForm={pinForm}
          setUser={false}
        />
      </View>
      {/* ALL custom forms */}
      <View key="customForms" style={{ marginHorizontal: 20 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={styles.header}>{I18n.t('formsGallery.customForms')}</Text>
          <IconButton
            style={{ bottom: 7 }}
            color={theme.colors.primary}
            size={20}
            icon="refresh"
            onPress={refreshCustomForms}
          />
        </View>
      </View>
      {customForms && (
        <FormsHorizontalView
          forms={customForms}
          navigateToCustomForm={navigateToCustomForm}
          pinForm={pinForm}
        />
      )}
      {/* Workflows */}
      <View key="workflows" style={{ marginHorizontal: 20 }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={styles.header}>{I18n.t('formsGallery.workflows')}</Text>
          <IconButton
            style={{ bottom: 7 }}
            color={theme.colors.primary}
            size={20}
            icon="refresh"
            onPress={refreshCustomForms}
          />
        </View>
      </View>
      {/* custom forms with workflows */}
      {Object.keys(workflowData).length > 0 && Object.keys(workflowData).map((key) => (
        <FormsHorizontalView
          forms={workflowData[key]}
          header={key}
          navigateToCustomForm={navigateToCustomForm}
          pinForm={pinForm}
        />
      ))}
      {/* custom forms with no workflow assigned */}
      {noWorkflowData && noWorkflowData.length > 0 && (
        <FormsHorizontalView
          forms={noWorkflowData}
          header={I18n.t('formsGallery.noWorflowAssigned')}
          navigateToCustomForm={navigateToCustomForm}
          pinForm={pinForm}
        />
      )}
      <View style={layout.screenRow}>
        <Text style={styles.header}>{I18n.t('formsGallery.marketPlace')}</Text>
      </View>
      <View key="marketplace" style={layout.screenRow}>
        <Card>
          <Card.Content>
            <ComingSoonSVG width={200} height={200} />
            <Title>{I18n.t('formsGallery.ourMarketPlace')}</Title>
            <Paragraph>{I18n.t('formsGallery.discoverForms')}</Paragraph>
            <Button>
              <Text>{I18n.t('formsGallery.exploreForms')}</Text>
            </Button>
          </Card.Content>
        </Card>
      </View>
    </View>
  );
}

Forms = (props) => {
  const {
    navigation, navigateToGallery, navigateToCustomForm,
    selectedForm, setSelectedForm, navigateToNewRecord,
    scrollViewScroll, setScrollViewScroll,
    pinnedForms,
    surveyingUser, surveyingOrganization,
    surveyee, setSurveyee,
    customForm, navigateToRoot
  } = props;

  const [consent, setConsent] = useState(false);

  return (
    <View style={layout.screenContainer}>
      {consent === true && selectedForm === 'id' && (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
          <IdentificationForm
            navigation={navigation}
            scrollViewScroll={scrollViewScroll}
            setScrollViewScroll={setScrollViewScroll}
            setSelectedForm={setSelectedForm}
            setSurveyee={setSurveyee}
            surveyingOrganization={surveyingOrganization}
            surveyingUser={surveyingUser}
          />
        </TouchableWithoutFeedback>
      )}
      {consent === true && selectedForm !== 'id' && selectedForm !== '' && (
        <View>
          <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
            <View>
              <View style={layout.container}>
                <ResidentIdSearchbar
                  surveyee={surveyee}
                  setSurveyee={setSurveyee}
                  surveyingOrganization={surveyingOrganization}
                />
              </View>
              <SupplementaryForm
                navigation={navigation}
                selectedForm={selectedForm}
                setSelectedForm={setSelectedForm}
                surveyee={surveyee}
                surveyingUser={surveyingUser}
                surveyingOrganization={surveyingOrganization}
                customForm={customForm}
              />
            </View>
          </TouchableWithoutFeedback>
        </View>
      )}
      {consent === false && (
        <GdprCompliance
          navigation={navigation}
          setConsent={setConsent}
        />
      )}
      {selectedForm === '' && (
        <View>
          <View style={{
            justifyContent: 'center',
            alignItems: 'center'
          }}
          >
            <PostSubmissionSVG width={350} height={350} />
            <Text style={{ color: theme.colors.primary, fontSize: 25, fontWeight: 'bold' }}>{I18n.t('forms.successfullySubmitted')}</Text>
            <Text style={{ fontSize: 15, marginTop: 10, marginBottom: 10 }}>{I18n.t('forms.grabCoffee')}</Text>
          </View>
          <View style={layout.container}>
            <Text style={{ fontSize: 15, marginBottom: 5 }}>{I18n.t('forms.suggestedForms')}</Text>
            <ScrollView horizontal>
              {pinnedForms && pinnedForms.map((form) => (
                <Card
                  key={form.objectId ?? form.tag}
                  style={layout.cardSmallStyle}
                  onPress={() => {
                    if (!form.tag) return navigateToCustomForm(form);
                    return navigateToNewRecord(form.tag);
                  }}
                >
                  <View style={styles.cardContainer}>
                    <View style={styles.textContainer}>
                      <Text style={styles.text}>
                        {form.name}
                      </Text>
                    </View>
                  </View>
                </Card>
              ))}
              {pinnedForms.length < 1 && (
                <View style={layout.screenRow}>
                  <Card>
                    <Card.Title title={I18n.t('formsGallery.noPinnedForms')} />
                  </Card>
                </View>
              )}
            </ScrollView>
            <Button mode="contained" onPress={navigateToGallery}>
              <Text style={{ color: 'white' }}>{I18n.t('forms.viewGallery')}</Text>
            </Button>
            <Button mode="text" onPress={navigateToRoot} style={{ marginTop: 5 }}>
              <Text style={{ color: theme.colors.primary }}>{I18n.t('forms.returnHome')}</Text>
            </Button>
          </View>
        </View>
      )}
    </View>
  );
}

DataCollection = ({ navigation }) => {
  const [scrollViewScroll, setScrollViewScroll] = useState();
  const [loading, setLoading] = useState(false);
  const [settings, setSettings] = useState(false);

  const [view, setView] = useState('Root');

  const [selectedForm, setSelectedForm] = useState('id');
  const [selectedAsset, setSelectedAsset] = useState(null);

  const [customForm, setCustomForm] = useState();
  const [pinnedForms, setPinnedForms] = useState([]);

  const [selectPerson, setSelectPerson] = useState();
  const [surveyee, setSurveyee] = useState({});

  const [surveyingOrganization, setSurveyingOrganization] = useState('');
  const [surveyingUser, setSurveyingUser] = useState();

  const { onLogout } = useContext(UserContext);

  useFocusEffect(
    useCallback(() => {
      const fetchData = async () => {
        getData('currentUser').then((user) => {
          setSurveyingUser(`${user.firstname || ''} ${user.lastname || ''}`);
          setSurveyingOrganization(user.organization || surveyingOrganization);
        });
        getData('pinnedForms').then((forms) => {
          if (forms) setPinnedForms(forms);
        });
      };

      fetchData();
    }, [surveyingUser, surveyingOrganization])
  );

  const navigateToRoot = async () => {
    setView('Root');
  };

  const navigateToNewRecord = async (formTag, surveyeePerson) => {
    setView('Forms');
    setSurveyee(surveyeePerson || surveyee);
    setSelectedForm(formTag || 'id');
  };

  const navigateToGallery = async () => {
    setView('Gallery');
  };

  const navigateToNewAssets = async () => {
    setView('Assets');
    setSelectedAsset({});
  };

  const navigateToViewAllAssets = async () => {
    setView('Assets');
    setSelectedAsset(null);
  };

  const navigateToCustomForm = async (form, surveyeePerson) => {
    setView('Forms');
    setSurveyee(surveyeePerson || surveyee);
    setSelectedForm('custom');
    setCustomForm(form || '');
  };

  const navigateToFindRecords = async () => {
    setView('Find Records');
  };

  const logOut = () => onLogout().then(() => navigation.navigate('Sign In'));

  return (
    <View
      style={layout.screenContainer}
      onStartShouldSetResponderCapture={() => {
        setScrollViewScroll(true);
      }}
    >
      <Header
        view={view}
        setView={setView}
        setSettings={setSettings}
      />
      <KeyboardAvoidingView
        enabled
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ flex: 1 }}
      >
        {loading === true
        && <ActivityIndicator />}
        <ScrollView keyboardShouldPersistTaps="never" scrollEnabled={scrollViewScroll}>
          {settings === true ? (
            <SettingsView
              setView={setView}
              setSettings={setSettings}
              logOut={logOut}
              surveyingOrganization={surveyingOrganization}
              scrollViewScroll={scrollViewScroll}
              setScrollViewScroll={setScrollViewScroll}
            />
          ) : (
            <View>
              { view === 'Root' && (
                <View>
                  <MapView organization={surveyingOrganization} />
                  <View style={styles.screenFlexRowWrap}>
                    <View style={styles.cardContainer}>
                      <Card style={styles.cardSmallStyle} onPress={() => navigateToNewRecord()}>
                        <NewRecordSVG height={70} style={styles.svg} />
                        <Text style={styles.text}>{I18n.t('dataCollection.newRecord')}</Text>
                      </Card>
                      <Card style={styles.cardSmallStyle} onPress={navigateToFindRecords}>
                        <FindRecordSVG height={65} style={styles.svg} />
                        <Text style={styles.text}>{I18n.t('dataCollection.findRecord')}</Text>
                      </Card>
                    </View>
                    <Card style={styles.cardSmallStyle} onPress={navigateToGallery}>
                      <ComingSoonSVG height={65} style={styles.svg} />
                      <Text style={styles.text}>{I18n.t('dataCollection.viewAll')}</Text>
                    </Card>
                    <View style={styles.cardContainer}>
                      <Card style={styles.cardSmallStyle} onPress={navigateToNewAssets}>
                        <ResearchSVG height={70} width={70} style={styles.svg} />
                        <Text style={styles.text}>{I18n.t('dataCollection.newAsset')}</Text>
                      </Card>
                      <Card style={styles.cardSmallStyle} onPress={navigateToViewAllAssets}>
                        <ResearchSVG height={70} width={70} style={styles.svg} />
                        <Text style={styles.text}>{I18n.t('dataCollection.viewAssets')}</Text>
                      </Card>
                    </View>
                  </View>
                </View>
              )}
              {view === 'Forms' && (
                <View>
                  <Button icon="arrow-left" width={100} onPress={navigateToRoot}>
                    <Text>{I18n.t('dataCollection.back')}</Text>
                  </Button>
                  <Forms
                    style={layout.line}
                    navigation={navigation}
                    scrollViewScroll={scrollViewScroll}
                    setScrollViewScroll={setScrollViewScroll}
                    navigateToGallery={navigateToGallery}
                    navigateToNewRecord={navigateToNewRecord}
                    navigateToRoot={navigateToRoot}
                    navigateToCustomForm={navigateToCustomForm}
                    selectedForm={selectedForm}
                    setSelectedForm={setSelectedForm}
                    surveyingUser={surveyingUser}
                    surveyingOrganization={surveyingOrganization}
                    surveyee={surveyee}
                    setSurveyee={setSurveyee}
                    customForm={customForm}
                    setView={setView}
                    pinnedForms={pinnedForms}
                  />
                </View>
              )}
              {view === 'Assets' && (
                <View>
                  <Button icon="arrow-left" width={100} onPress={navigateToRoot}>
                    <Text>{I18n.t('dataCollection.back')}</Text>
                  </Button>
                  <Assets
                    surveyingOrganization={surveyingOrganization}
                    surveyingUser={surveyingUser}
                    selectedAsset={selectedAsset}
                    setSelectedAsset={setSelectedAsset}
                    navigateToNewAssets={navigateToNewAssets}
                    navigateToViewAllAssets={navigateToViewAllAssets}
                    scrollViewScroll={scrollViewScroll}
                    setScrollViewScroll={setScrollViewScroll}
                  />
                </View>
              )}
              {view === 'Gallery' && (
                <View>
                  <Button icon="arrow-left" width={100} onPress={navigateToRoot}>
                    <Text>{I18n.t('dataCollection.back')}</Text>
                  </Button>
                  <FormGallery
                    navigation={navigation}
                    navigateToNewRecord={navigateToNewRecord}
                    puenteForms={puenteForms}
                    navigateToCustomForm={navigateToCustomForm}
                    setLoading={setLoading}
                    surveyingOrganization={surveyingOrganization}
                    pinnedForms={pinnedForms}
                    setPinnedForms={setPinnedForms}
                  />
                </View>
              )}
              {view === 'Find Records'
                && (
                  <View>
                    {!selectPerson && (
                      <Button icon="arrow-left" width={100} onPress={navigateToRoot}>
                        <Text>{I18n.t('dataCollection.back')}</Text>
                      </Button>
                    )}
                    <FindResidents
                      selectPerson={selectPerson}
                      setSelectPerson={setSelectPerson}
                      organization={surveyingOrganization}
                      puenteForms={puenteForms}
                      navigateToNewRecord={navigateToNewRecord}
                      surveyee={surveyee}
                      setSurveyee={setSurveyee}
                      navigateToRoot={navigateToRoot}
                      setView={setView}
                    />
                  </View>
                )}
            </View>
          )}
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );
}

Post = ({
  item,
  uid,
  postOptions,
  handleOpenPost = null,
  handleOpenAccount = null,
  handleOpenComment = () => {},
  fullPost = false,
}) => {
  const {state} = useContext(UserContext);
  const [reactionsVisible, setReactionVisibility] = useState(false);
  const hasReacted = (reactionType) => {
    if (Object.keys(item).includes(reactionType)) {
      return !!item[reactionType].find((u) => u === uid);
    }
    return false;
  };
  return (
    <Card style={styles.mainPostContainer}>
      <Card.Title
        style={styles.postTitleContainer}
        titleStyle={[styles.textHeaderContainer]}
        title={item.createdBy ? item.createdBy : 'Name'}
        left={() => {
          if (handleOpenAccount === null) {
            return (
              <LeftContent
                size={width * 0.1}
                src={item.createdByPhoto ? item.createdByPhoto : null}
              />
            );
          }
          return (
            <TouchableOpacity onPress={handleOpenAccount}>
              <LeftContent
                size={width * 0.1}
                src={item.createdByPhoto ? item.createdByPhoto : null}
              />
            </TouchableOpacity>
          );
        }}
        right={() => {
          if (item.uid === uid) {
            return (
              <TouchableOpacity
                style={styles.rightOptions}
                onPress={postOptions}>
                <Icon name="more-vertical" size={width * 0.06} color="white" />
              </TouchableOpacity>
            );
          }
          return null;
        }}
      />
      <PostBox
        onSingleTap={() => {
          if (fullPost) {
            return;
          }
          handleOpenPost();
        }}
        onDoubleTap={() => {
          if (hasReacted('love')) {
            return null;
          }
          reactToPost(state.box, item.name, 'love');
        }}>
        <ActiveImage size={width} uri={item.postURL} />
      </PostBox>
      <Card.Actions style={styles.reactionIconContainer}>
        <ReactionIcon
          iconName="heart"
          pressAction={() => reactToPost(state.box, item.name, 'love')}
          longPressAction={() => setReactionVisibility(!reactionsVisible)}
          hasReacted={hasReacted('love')}
        />
        <ReactionIcon
          iconName="meh"
          pressAction={() => reactToPost(state.box, item.name, 'meh')}
          longPressAction={() => setReactionVisibility(!reactionsVisible)}
          hasReacted={hasReacted('meh')}
        />
        <ReactionIcon
          iconName="frown"
          pressAction={() => reactToPost(state.box, item.name, 'sad')}
          longPressAction={() => setReactionVisibility(!reactionsVisible)}
          hasReacted={hasReacted('sad')}
        />
        <ReactionIcon
          style={{
            alignSelf: 'flex-start',
            position: 'absolute',
            right: 6,
          }}
          iconName="comment"
          pressAction={() => handleOpenComment()}
        />
      </Card.Actions>
      <Card.Content style={styles.cardComponent}>
        <Text style={Styles.fontSmall}>
          {item.love ? item.love.length : 0} Likes
        </Text>
        <TouchableOpacity
          onPress={() => {
            if (handleOpenPost === null) {
              return;
            }
            handleOpenPost();
          }}>
          {fullPost ? (
            <Text style={Styles.fontMedium}>{item.postCaption}</Text>
          ) : (
            <Text style={Styles.fontMedium}>
              {item.postCaption.length > 60
                ? `${item.postCaption.slice(0, 60)}... See More`
                : item.postCaption}
            </Text>
          )}
        </TouchableOpacity>
      </Card.Content>
      <Reactions
        isVisible={reactionsVisible}
        hideModal={() => setReactionVisibility(false)}
        data={[
          item.love ? item.love.length : 0,
          item.meh ? item.meh.length : 0,
          item.sad ? item.sad.length : 0,
        ]}
      />
    </Card>
  );
}