Skip to content
Snippets Groups Projects
NotificationListItem.tsx 3.47 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React, { useEffect, useState } from 'react';
    import { useTranslation } from 'react-i18next';
    import {StyleSheet, View, Text, Pressable} from 'react-native';
    import {borderRadius, ColorPallet, TextTheme} from 'src/theme/theme';
    import Button, { ButtonType } from 'src/components/Button';
    
    import {AgentNotification} from "src/utils/agentUtils";
    
    import rootStore from "src/store/rootStore";
    import {hashCode, hashToRGBA, parseCredDef} from "src/utils/helpers";
    import NewConnectionSvg from 'src/assets/svg/new_connection.svg';
    
    interface NotificationListItemProps {
    
      notification: AgentNotification;
    
      onView?: () => void;
    }
    
    const NotificationListItem: React.FC<NotificationListItemProps> = ({
      notification,
      onView
    }) => {
      const { t } = useTranslation();
      const [title, setTitle] = useState('');
      const [body, setBody] = useState('');
    
      useEffect(() => {
        (async () => {
    
          console.log(JSON.stringify(notification, null, 2));
    
          if (notification.proofRequest) {
            setTitle(t<string>('ProofRequest.ProofRequest'));
            setBody(notification.connection?.theirLabel ?? 'Connectionless proof request');
          } else if (notification.credentialOffer) {
            setTitle(t<string>('CredentialOffer.CredentialOffer'));
            const credentialRecord = await rootStore.agentStore.agent.credentials.getFormatData(
              notification.credentialOffer.id,
            );
    
    Alexey Lunin's avatar
    Alexey Lunin committed
            const credentialDefinitionId = credentialRecord?.offer?.anoncreds?.cred_def_id;
    
    Alexey Lunin's avatar
    Alexey Lunin committed
            setBody(credentialDefinitionId);
    
      // console.log('title');
      // console.log(title);
      // console.log(body);
    
    
    
      return (
        <Pressable testID="notification-list-item" onPress={onView}>
          <View style={styles.container}>
            <View
              style={[
                styles.avatar,
                { backgroundColor: hashToRGBA(hashCode(body)) },
              ]}
            >
              <NewConnectionSvg style={styles.svg} />
            </View>
            <View style={styles.details}>
              <View style={styles.headerContainer}>
                <Text style={styles.headerText}>{title}</Text>
              </View>
              <View style={styles.bodyContainer}>
                <Text style={styles.bodyText}>{body}</Text>
                <Button
                  buttonType={ButtonType.Primary}
                  title={t<string>('Global.View')}
                  buttonStyle={styles.buttonView}
                  onPress={onView}
                />
              </View>
            </View>
          </View>
        </Pressable>
      );
    };
    
    export default NotificationListItem;
    
    const styles = StyleSheet.create({
      container: {
        backgroundColor: ColorPallet.grayscale.veryLightGrey,
        borderRadius: borderRadius,
        padding: 8,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
      },
      avatar: {
        width: 50,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: borderRadius,
      },
      svg: {
        width: 30,
        height: 30,
      },
      details: {
        flex: 1,
        flexDirection: 'column',
        marginLeft: 10,
        flexShrink: 1,
        justifyContent: 'flex-start',
      },
      headerContainer: {
        flexDirection: 'row',
      },
      headerText: {
        ...TextTheme.normal,
        fontSize: 19,
        flexShrink: 1,
        fontWeight: 'bold',
        alignSelf: 'center',
      },
      bodyContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      },
      bodyText: {
        ...TextTheme.normal,
        flexShrink: 1,
        fontSize: 16,
      },
      buttonView: {
        paddingTop: 5,
        paddingBottom: 5,
        height: 36,
      },
    });