react-bootstrap#Col TypeScript Examples

RowTransactions: React.FC<IProps> = ({ addr }) => {
  const ACCOUNT_TRANSACTIONS = gql`
    query GetTransactions($addr: String!) {
      txnsByAddr(addr: $addr) {
        ID
      }
    }
  `;

  const { loading, error, data } = useQuery(ACCOUNT_TRANSACTIONS, {
    variables: { addr },
  });

  if (data) {
    console.log(data);
  }

  return loading ? (
    <div className="center-spinner">
      <Spinner animation="border" />
    </div>
  ) : (
    <Row>
      <Col>
        <div className="address-detail">
          <span>Transactions:</span>
          <span>{data.txnsByAddr.length}</span>
        </div>
      </Col>
    </Row>
  );
}

SupportServantTable = (props: { region: Region; supportServant: SupportServant.SupportServant }) => {
    const { region, supportServant } = props;
    return (
        <>
            <h4>
                {supportServant.id}.{" "}
                <EntityDescriptor
                    region={region}
                    entity={supportServant.svt}
                    overwriteName={supportServant.name === "NONE" ? supportServant.svt.name : supportServant.name}
                    iconHeight={40}
                />{" "}
                <span className="quest-svt-lv">Lv. {supportServant.lv}</span>
            </h4>
            <Row className="quest-svt-tables">
                <Col xs={{ span: 12 }} lg={{ span: 6 }}>
                    <SupportServantMainData region={region} supportServant={supportServant} />
                </Col>
                <Col xs={{ span: 12 }} lg={{ span: 6 }}>
                    <SupportServantSubData region={region} supportServant={supportServant} />
                </Col>
            </Row>
        </>
    );
}

export default function AboutInfoCard({ title, bodytext }: AboutInfoCardProps) {
  return (
    <Col className="my-3">
      <Card className="h-100">
        <Card.Header
          as="h3"
          className={`text-center align-self-center text-white rounded-0 ${styles.cardHeader}`}
        >
          {title}
        </Card.Header>
        <Card.Body className={`${styles.cardBody}`}>
          <p className={`${styles.cardBodyParagraph}`}>{bodytext}</p>
        </Card.Body>
      </Card>
    </Col>
  )
}

CardFooter = (props: any) => {

    const { t } = useTranslation();

    return (!props ? <></> :
        <Card.Footer id='data-footer'>
            <Row>
                <Col sm='6' md='3' className=''>
                    <Button
                        className='my-1 my-md-0 p-0'
                        variant='outline-primary'
                        block
                        onClick={props.handleCancel}
                    >
                        {props.cancelText
                            ? props.cancelText
                            : t('translation:cancel')}
                    </Button>
                </Col>
                <Col sm='6' md='3' className='pr-md-0'>
                    <Button
                        className='my-1 my-md-0 p-0'
                        block
                        type='submit'
                        onClick={props.handleOk}
                        disabled={props.disabled}
                    >
                        {props.okText
                            ? props.okText
                            :t('translation:next')}
                    </Button>
                </Col>
            </Row>
        </Card.Footer>
    )

}

Banner = () => {
  return (
    <Section fullWidth={false} className={classes.bannerSection}>
      <Col lg={6}>
        <div className={classes.wrapper}>
          <h1>
            <Trans>ONE NOUN,</Trans>
            <br />
            <Trans>EVERY DAY,</Trans>
            <br />
            <Trans>FOREVER.</Trans>
          </h1>
        </div>
      </Col>
      <Col lg={6}>
        <div style={{ padding: '2rem' }}>
          <Noun imgPath={calendar_noun} alt="noun" />
        </div>
      </Col>
    </Section>
  );
}

function chartCell(chartNode:JSX.Element, title: string, colSize:number = 6): JSX.Element{
    return(<Col md={colSize}>
        <Row className={"mb-md-5"}>
            <Col md={12}>
                <Row className={"mb-md-2"}>
                    <Col md={12} style={{paddingLeft:ChartTools.paddingLeft + ChartTools.xDomainPadding}}><strong>{title}</strong></Col>
                </Row>
                <Row>
                    <Col md={12}>{chartNode}</Col>
                </Row>
            </Col>
        </Row>
    </Col>);
}

MeetingDetails = (props: MeetingDetailsProps) => {
    return (
        <Row>
            <Col md={6} className='mb-1'>
                <Badge variant='secondary' aria-label='Meeting Type'>{props.readableMeetingType}</Badge>
            </Col>
            <Col md={6}>
                <Button
                    variant='link'
                    size='sm'
                    onClick={() => props.onShowMeetingInfo(props.meeting)}
                    disabled={props.disabled}
                >
                    Join Info
                </Button>
            </Col>
        </Row>
    );
}

export function CommunityTile(props: any) {
  const reflink = useMemo(() => {
    return RefLink.parse(props.reflink)
  }, [props.reflink])

  const [communityPicture, setCommunityPicture] = useState('')

  useEffect(() => {
    const load = async () => {
      setCommunityPicture(await AccountService.getProfilePictureURL(props.reflink))
    }

    void load()
  }, [])

  return (
    <Col className="col-md-3 col-sm-3 mb-3" md={3} sm={3}>
      <a href={`#/community/${props.reflink}`} className="font-weight-bold">
        <div className="community-card channels-card">
          <div className="text-left" style={{ display: 'inline-block', float: 'left' }}>
            <img
              style={{
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                verticalAlign: 'middle',
              }}
              src={communityPicture + '?size=icon'}
            />
            {props.info.title}
          </div>
          <div
            className="text-right"
            style={{
              display: 'inline-block',
              paddingTop: '2px',
              float: 'right',
            }}
          >
            <div></div>
            <span className="text-success"></span>
            <FaChevronCircleRight />
          </div>
          <div style={{ clear: 'both' }}></div>
        </div>
      </a>
    </Col>
  )
}

/**
    *Get wrapper for page which acts as container for all child components
    */
    private getWrapperPage = () => {
        // Cards component array to be rendered in grid.
        const cards = new Array<any>();

        this.state.projectDetails!.map((value: IProjectDetails, index) => {
            if (!value.isRemoved) {
                cards.push(<Col lg={3} sm={6} md={4} className="grid-column d-flex justify-content-center">
                    <Card loggedInUserId={this.loggedInUserObjectId} projectDetails={this.state.projectDetails} onJoinMenuItemClick={this.onProjectJoin} onCloseProjectButtonClick={this.handleCloseProjectButtonClick} onLeaveButtonClick={this.handleLeaveButtonClick} showLeaveProjects={true} showJoinProjectMenu={false} index={index} cardDetails={value} onCardUpdate={this.onCardUpdate} onDeleteButtonClick={this.handleDeleteButtonClick} />
                </Col>)
            }
        });

        let scrollViewStyle = { height: this.state.isFilterApplied === true ? "84vh" : "92vh" };
        return (
            <div className="container-subdiv">
                <div className="container-subdiv-cardview">
                    <Container fluid className="container-fluid-overriden">
                        <NotificationMessage
                            onClose={this.hideAlert}
                            showAlert={this.state.showAlert}
                            content={this.state.alertMessage}
                            notificationType={this.state.alertprojectStatus}
                        />
                        <div key={this.state.infiniteScrollParentKey} className="scroll-view scroll-view-mobile" style={scrollViewStyle}>
                            <InfiniteScroll
                                pageStart={this.state.pageLoadStart}
                                loadMore={this.loadMoreProjects}
                                hasMore={this.state.hasMoreProjects}
                                initialLoad={this.state.isPageInitialLoad}
                                useWindow={false}
                                loader={<div className="loader"><Loader /></div>}>

                                <Row>
                                    {
                                        cards.length ? cards : this.state.hasMoreProjects ? <></> : <FilterNoPostContentPage />
                                    }
                                </Row>

                            </InfiniteScroll>
                        </div>
                    </Container>
                </div>
            </div>
        );
    }

Dashboard: React.FC = () => {

  const networkContext = useContext(NetworkContext)
  const { isIsolatedServer } = networkContext!

  return (
    <div>
      {isIsolatedServer
        ? <>
          <Container className='dashboard-container'>
            <Row>
              <ISInfo />
            </Row>
            <Row>
              <Col className='p-0'>
                <ValTxnList />
              </Col>
            </Row>
          </Container>
        </>
        : <>
          <Container className='dashboard-container'>
            <Row>
              <BCInfo />
            </Row>
            <Row>
              <Col className='p-0' sm={5} md={5} lg={5}>
                <DSBlockList />
              </Col>
              <Col className='p-0 ml-4'>
                <TxBlockList />
              </Col>
            </Row>
            <Row className='mt-3'>
              <Col className='p-0'>
                <ValTxnList />
              </Col>
            </Row>
            {/* <Row className='mt-3'>
              <Col className='p-0'>
                <PendTxnList />
              </Col>
            </Row> */}
          </Container>
        </>
      }
    </div>
  )
}

render() {
        if (this.state.error) return <ErrorStatus error={this.state.error} />;

        if (this.state.loading || !this.state.commandCode) return <Loading />;

        const commandCode = this.state.commandCode;

        return (
            <div>
                <CommandCodePicker
                    region={this.props.region}
                    commandCodes={this.state.commandCodes}
                    id={commandCode.id}
                />
                <hr />

                <Row
                    style={{
                        marginBottom: "3%",
                    }}
                >
                    <Col xs={{ span: 12, order: 2 }} lg={{ span: 6, order: 1 }}>
                        <CommandCodeMainData region={this.props.region} commandCode={commandCode} />
                    </Col>
                    <Col xs={{ span: 12, order: 1 }} lg={{ span: 6, order: 2 }}>
                        <CommandCodePortrait commandCode={commandCode} />
                    </Col>
                </Row>

                <Tabs
                    id={"cc-tabs"}
                    defaultActiveKey={this.props.tab ?? "effects"}
                    mountOnEnter={false}
                    onSelect={(key: string | null) => {
                        this.props.history.replace(`/${this.props.region}/command-code/${this.props.id}/${key}`);
                    }}
                >
                    <Tab eventKey={"effects"} title={"Effects"}>
                        <br />
                        {commandCode.skills.map((skill) => {
                            return (
                                <SkillBreakdown
                                    key={skill.id}
                                    region={this.props.region}
                                    skill={skill}
                                    cooldowns={true}
                                />
                            );
                        })}
                    </Tab>

                    <Tab eventKey={"assets"} title={"Assets"}>
                        <br />
                        <CommandCodeAsset region={this.props.region} commandCode={commandCode} />
                    </Tab>
                </Tabs>
            </div>
        );
    }

export default function TestimonyCallout(props: Testimony) {
  const { authorDisplayName, billId, position, content } = props

  return (
    <Col className="m-auto">
      <Row className={`row-col-2 ${styles[position]} m-2`}>
        <Col className="col-auto">
          <Row className="h-100">
            <Col
              className={`${styles.testimonyCalloutContainerTriangle}`}
            ></Col>
            <Col className="col-auto my-auto">
              <VoteHand position={position} />
            </Col>
          </Row>
        </Col>
        <Col className="">
          <Row className="m-2">
            <Col>
              <Row>
                <Col
                  className={`${styles.testimonyCalloutBodyText} align-items-start my-2`}
                >
                  {content}
                </Col>
              </Row>
              <Row className="mt-auto mb-2 w-100 justify-content-start">
                <Col className="col-auto text-white">
                  Bill {formatBillId(billId)}
                </Col>
                <Col className="col-auto text-white ms-auto">
                  -{authorDisplayName}
                </Col>
              </Row>
            </Col>
          </Row>
        </Col>{" "}
      </Row>
    </Col>
  )
}

ConfirmModal = (props: any) => {
    const { t } = useTranslation();
    const [btnOkDisabled, setBtnOkDisabled] = React.useState(true);

    const handleEnter = () => {
        setBtnOkDisabled(false);
    }

    const handleOk = () => {
        if (props.handleOk) {
            setBtnOkDisabled(true);
            props.handleOk();
        }
    }

    return (
        <Modal
            contentClassName='data-modal'
            show={props.show}
            backdrop="static"
            keyboard={false}
            onEnter={handleEnter}
            centered
        >
            <Modal.Header id='data-header' className='pb-0' >
                <Card.Title className='m-0 jcc-xs-jcfs-md' as={'h3'} >{props.title}</Card.Title>
            </Modal.Header>
            <Modal.Body className='bg-light'>
                {props.message}
            </Modal.Body>
            <Modal.Footer id='data-footer'>

                <Container className='p-0'>
                    <Row>
                        <Col sm='6' lg='4' className='mb-2 mb-sm-0 p-0 pr-sm-2'>
                            <Button
                                className='p-0'
                                block
                                variant='outline-primary'
                                onClick={props.onCancel}
                            >
                                {t('translation:cancel')}
                            </Button>
                        </Col>
                        <Col sm='6' lg='4' className='p-0 pl-sm-2'>
                            <Button
                                className='p-0'
                                block
                                onClick={handleOk}
                                disabled={btnOkDisabled}
                            >
                                {t('translation:ok')}

                                <Spinner
                                    as="span"
                                    className='btn-spinner'
                                    animation="border"
                                    hidden={!btnOkDisabled}
                                    size="sm"
                                    role="status"
                                    aria-hidden="true"
                                />
                            </Button>
                        </Col>
                    </Row>
                </Container>
            </Modal.Footer>
        </Modal>
    )
}

FileNameEditForm = ({ filename, saveEdits, discardEdits, extension }) => {
    const [loading, setLoading] = useState(false);

    const onSubmit = async (values: formValues) => {
        try {
            setLoading(true);
            await saveEdits(values.filename);
        } finally {
            setLoading(false);
        }
    };
    return (
        <Formik<formValues>
            initialValues={{ filename }}
            validationSchema={Yup.object().shape({
                filename: Yup.string()
                    .required(constants.REQUIRED)
                    .max(
                        MAX_EDITED_FILE_NAME_LENGTH,
                        constants.FILE_NAME_CHARACTER_LIMIT
                    ),
            })}
            validateOnBlur={false}
            onSubmit={onSubmit}>
            {({ values, errors, handleChange, handleSubmit }) => (
                <Form noValidate onSubmit={handleSubmit}>
                    <Form.Row>
                        <Form.Group
                            bsPrefix="ente-form-group"
                            as={Col}
                            xs={extension ? 7 : 8}>
                            <Form.Control
                                as="textarea"
                                placeholder={constants.FILE_NAME}
                                value={values.filename}
                                onChange={handleChange('filename')}
                                isInvalid={Boolean(errors.filename)}
                                autoFocus
                                disabled={loading}
                            />
                            <FormControl.Feedback
                                type="invalid"
                                style={{ textAlign: 'center' }}>
                                {errors.filename}
                            </FormControl.Feedback>
                        </Form.Group>
                        {extension && (
                            <Form.Group
                                bsPrefix="ente-form-group"
                                as={Col}
                                xs={1}
                                controlId="formHorizontalFileName">
                                <FlexWrapper style={{ padding: '5px' }}>
                                    {`.${extension}`}
                                </FlexWrapper>
                            </Form.Group>
                        )}
                        <Form.Group bsPrefix="ente-form-group" as={Col} xs={2}>
                            <Value width={'16.67%'}>
                                <IconButton type="submit" disabled={loading}>
                                    {loading ? (
                                        <SmallLoadingSpinner />
                                    ) : (
                                        <TickIcon />
                                    )}
                                </IconButton>
                                <IconButton
                                    onClick={discardEdits}
                                    disabled={loading}>
                                    <CloseIcon />
                                </IconButton>
                            </Value>
                        </Form.Group>
                    </Form.Row>
                </Form>
            )}
        </Formik>
    );
}

export default function TablePageSelector({ totalPages, currentPage, setPage }: TablePageSelectorProps): ReactElement {
  const { t } = useTranslation();

  if (totalPages <= 1) totalPages = 1;

  const displayedPages = 5;
  // const displayedPages = Math.min(totalPages, pagesToDisplay);
  const first = Math.max(currentPage - Math.ceil(displayedPages / 2 - 1), 0);
  const last = Math.min(first + displayedPages, totalPages);
  const pages = range(first, last);

  return (
    <Row className='justify-content-between mt-5'>
      <Button
        variant='outline-dark'
        onClick={() => setPage(Math.max(currentPage - 1, 0))}>{t('prev')}
      </Button>
      <Col sm={4}>
        {pages[0] === 0 ? (
          ''
        ) : (
          <>
            <PageLink {...{ page: 0, setPage }} />
            {'\u2026'}&nbsp;
          </>
        )}
        {pages.map(page => (
          <PageLink
            key={page}
            {...{ page, setPage }} />
        ))}
        {pages[pages.length - 1] === totalPages - 1 ? (
          ''
        ) : (
          <>
            {'\u2026'}
            <PageLink {...{ page: totalPages - 1, setPage }} />
          </>
        )}
      </Col>
      <Button
        variant='outline-dark'
        onClick={() => setPage(Math.min(currentPage + 1, totalPages - 1))}>{t('next')}
      </Button>
    </Row>
  );
}

Auction: React.FC<AuctionProps> = props => {
  const { auction: currentAuction } = props;

  const history = useHistory();
  const dispatch = useAppDispatch();
  let stateBgColor = useAppSelector(state => state.application.stateBackgroundColor);
  const lastNounId = useAppSelector(state => state.onDisplayAuction.lastAuctionNounId);

  const loadedNounHandler = (seed: INounSeed) => {
    dispatch(setStateBackgroundColor(seed.background === 0 ? grey : beige));
  };

  const prevAuctionHandler = () => {
    dispatch(setPrevOnDisplayAuctionNounId());
    currentAuction && history.push(`/noun/${currentAuction.nounId.toNumber() - 1}`);
  };
  const nextAuctionHandler = () => {
    dispatch(setNextOnDisplayAuctionNounId());
    currentAuction && history.push(`/noun/${currentAuction.nounId.toNumber() + 1}`);
  };

  const nounContent = currentAuction && (
    <div className={classes.nounWrapper}>
      <StandaloneNounWithSeed
        nounId={currentAuction.nounId}
        onLoadSeed={loadedNounHandler}
        shouldLinkToProfile={false}
      />
    </div>
  );

  const loadingNoun = (
    <div className={classes.nounWrapper}>
      <LoadingNoun />
    </div>
  );

  const currentAuctionActivityContent = currentAuction && lastNounId && (
    <AuctionActivity
      auction={currentAuction}
      isFirstAuction={currentAuction.nounId.eq(0)}
      isLastAuction={currentAuction.nounId.eq(lastNounId)}
      onPrevAuctionClick={prevAuctionHandler}
      onNextAuctionClick={nextAuctionHandler}
      displayGraphDepComps={true}
    />
  );
  const nounderNounContent = currentAuction && lastNounId && (
    <NounderNounContent
      mintTimestamp={currentAuction.startTime}
      nounId={currentAuction.nounId}
      isFirstAuction={currentAuction.nounId.eq(0)}
      isLastAuction={currentAuction.nounId.eq(lastNounId)}
      onPrevAuctionClick={prevAuctionHandler}
      onNextAuctionClick={nextAuctionHandler}
    />
  );

  return (
    <div style={{ backgroundColor: stateBgColor }} className={classes.wrapper}>
      <Container fluid="xl">
        <Row>
          <Col lg={{ span: 6 }} className={classes.nounContentCol}>
            {currentAuction ? nounContent : loadingNoun}
          </Col>
          <Col lg={{ span: 6 }} className={classes.auctionActivityCol}>
            {currentAuction &&
              (isNounderNoun(currentAuction.nounId)
                ? nounderNounContent
                : currentAuctionActivityContent)}
          </Col>
        </Row>
      </Container>
    </div>
  );
}

// The 'tab-custom' role is used to override a default 'tab' role that resulted in tab links not being keyboard accessible.
function AddQueueEditor(props: AddQueueEditorProps) {
    return (
        <Tab.Container id='add-queue-editor' defaultActiveKey='general' activeKey={props.activeKey} onSelect={props.onTabSelect}>
            <Row>
                <Col md={3} sm={3}>
                    <Nav variant='pills' className='flex-column mt-5'>
                        <Nav.Item>
                            <Nav.Link eventKey='general' role='tab-custom' tabIndex={0} aria-label='General Tab'>
                                General
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link eventKey='hosts' role='tab-custom' tabIndex={0} aria-label='Manage Hosts Tab'>
                                Manage Hosts
                            </Nav.Link>
                        </Nav.Item>
                    </Nav>
                </Col>
                <Col md={6} sm={9}>
                    <h1>Add Queue</h1>
                    <Tab.Content aria-live='polite'>
                        <Tab.Pane eventKey='general'>
                            <GeneralEditor {...props} />
                            <div className='mt-4'>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    aria-label='Next'
                                    disabled={props.disabled}
                                    onClick={props.onGeneralNextClick}
                                >
                                    Next
                                </Button>
                                <CancelAddButton disabled={props.disabled} />
                            </div>
                        </Tab.Pane>
                        <Tab.Pane eventKey='hosts'>
                            <ManageHostsEditor {...props} />
                            <div className='mt-4'>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    aria-label='Back'
                                    disabled={props.disabled}
                                    onClick={props.onBackClick}
                                >
                                    Back
                                </Button>
                                <Button
                                    variant='primary'
                                    className={buttonSpacing}
                                    aria-label='Finish Adding Queue'
                                    disabled={props.disabled}
                                    onClick={props.onFinishClick}
                                >
                                    Finish Adding Queue
                                </Button>
                                <CancelAddButton disabled={props.disabled} />
                            </div>
                        </Tab.Pane>
                    </Tab.Content>
                </Col>
            </Row>
        </Tab.Container>
    );
}

//JSON editor specific
export function IpfsConsoleView() {
  const [ipfsConfig, setIpfsConfig] = useState({} as any)
  const [ipfsInfo, setIpfsInfo] = useState({} as any)
  const [configError, setConfigError] = useState(false)
  const editor = useRef<any>()
  const loopPid = useRef<any>()

  const getIpfsConfig = async () => {
    const info = await IpfsHandler.getIpfs()
    setIpfsInfo(info)

    let jsonContent
    const { ipfs } = info

    if (editor.current) {
      editor.current?.createEditor({
        value: await ipfs.config.getAll(),
        ace: ace,
        mode: 'code',
        theme: 'ace/theme/solarized_dark',
        ref: editor,
        htmlElementProps: {
          style: {
            height: '500px',
          },
        },
        onChange: (json) => {
          jsonContent = json
        },
      })
    } else {
      throw new Error(`editor ref is not defined!  Cannot create editor.`)
    }
  }

  const update = async () => {
    console.log(`UPDATING`)
    const annotations = editor.current.jsonEditor.aceEditor.getSession().getAnnotations()
    setConfigError(annotations.length === 0 ? false : true)
  }

  useEffect(() => {
    void getIpfsConfig()
    loopPid.current = setInterval(update, 150)

    return () => {
      clearInterval(loopPid.current)
    }
  }, [])

  return (
    <div style={{ padding: '5px', overflow: 'hidden' }}>
      <h3>
        This is the IPFS Debug Console. This is for advanced users only, if you don't know what you
        are doing stay out of this area.
      </h3>
      <div style={{ overflow: 'show' }}>
        <Row>
          <Col style={{ background: '#f8f9fa', margin: '5px' }}>
            <Editor
              value={ipfsConfig}
              ace={ace}
              mode="code"
              theme="ace/theme/solarized_dark"
              ref={editor}
              htmlElementProps={{
                style: {
                  height: '560px',
                },
              }}
              onChange={(json) => {
                console.log(json)
              }}
            />
            <ButtonGroup>
              <Button
                variant="success"
                onClick={async () => {
                  try {
                    const jsonContent = editor.current.jsonEditor.get()
                    NotificationManager.success('IPFS config saved')
                    await ipfsInfo.ipfs.config.replace(jsonContent)
                  } catch (ex) {
                    console.error(ex)
                  }
                }}
                disabled={configError}
              >
                Save
              </Button>
            </ButtonGroup>
          </Col>
          <Col style={{ background: '#f8f9fa', margin: '5px' }}>
            <IpfsStatsView />
          </Col>
        </Row>
        <Row>
          <Col style={{ background: '#f8f9fa', margin: '5px' }}></Col>
          <Col style={{ background: '#f8f9fa', margin: '5px' }}></Col>
        </Row>
      </div>
    </div>
  )
}

/**
    *Get wrapper for page which acts as container for all child components
    */
    private getWrapperPage = () => {
        if (this.state.loader) {
            return (
                <div className="container-div">
                    <div className="container-subdiv">
                        <div className="loader">
                            <Loader />
                        </div>
                    </div>
                </div>
            );
        } else {

            // Cards component array to be rendered in grid.
            const cards = new Array<any>();

            this.state.projectDetails!.map((value: IProjectDetails, index) => {
                if (!value.isRemoved) {
                    cards.push(<Col lg={3} sm={6} md={4} className="grid-column d-flex justify-content-center">
                        <Card loggedInUserId={this.loggedInUserObjectId} projectDetails={this.state.projectDetails} onJoinMenuItemClick={this.onProjectJoin} onCloseProjectButtonClick={this.handleCloseProjectButtonClick} onLeaveButtonClick={this.handleLeaveButtonClick} showLeaveProjects={false} showJoinProjectMenu={true} index={index} cardDetails={value} onCardUpdate={this.onCardUpdate} onDeleteButtonClick={this.handleDeleteButtonClick} />
                    </Col>)
                }
            });

            if (this.state.initialProjects.length === 0) {
                return (
                    <div className="container-div">
                        <div className="container-subdiv">
                            <NotificationMessage onClose={this.hideAlert} showAlert={this.state.showAlert} content={this.state.alertMessage} notificationType={this.state.alertprojectStatus} />
                            <FilterNoPostContentPage />
                        </div>
                    </div>
                )
            }
            let scrollViewStyle = { height: this.state.isFilterApplied === true ? "84vh" : "92vh" };
            return (
                <div className="container-div">
                    <div className="container-subdiv-cardview">
                        <Container fluid className="container-fluid-overriden">
                            <NotificationMessage
                                onClose={this.hideAlert}
                                showAlert={this.state.showAlert}
                                content={this.state.alertMessage}
                                notificationType={this.state.alertprojectStatus}
                            />
                            <TitleBar
                                projectDetails={this.state.projectDetails}
                                showFilter={true}
                                teamId={this.teamId}
                                commandBarSearchText={this.state.searchText}
                                searchFilterProjectsUsingAPI={this.invokeApiSearch}
                                onFilterClear={this.handleFilterClear}
                                hideFilterbar={!this.state.isFilterApplied}
                                onSortByChange={this.onSortByChange}
                                onFilterSearchChange={this.onFilterSearchTextChange}
                                onSearchInputChange={this.handleSearchInputChange}
                                onNewProjectSubmit={this.onNewPost}
                                onSharedByCheckboxStateChange={this.onSharedByCheckboxStateChange}
                                onTypeCheckboxStateChange={this.onprojectStatusCheckboxStateChange}
                                onSkilsStateChange={this.onskillsStateChange}
                            />
                            <div key={this.state.infiniteScrollParentKey} className="scroll-view scroll-view-mobile" style={scrollViewStyle}>
                                <InfiniteScroll
                                    pageStart={this.state.pageLoadStart}
                                    loadMore={this.loadMoreProjects}
                                    hasMore={this.state.hasMoreProjects && !this.filterSearchText.trim().length}
                                    initialLoad={this.state.isPageInitialLoad}
                                    useWindow={false}
                                    loader={<div className="loader"><Loader /></div>}>

                                    <Row>
                                        {
                                            cards.length ? cards : this.state.hasMoreProjects === true ? <></> : <FilterNoPostContentPage />
                                        }
                                    </Row>

                                </InfiniteScroll>
                            </div>

                        </Container>
                    </div>
                </div>
            );
        }
    }

AccountDetailsPage: React.FC<IProps> = ({ addr }) => {
  const networkContext = useContext(NetworkContext);
  const { dataService, networkUrl, apolloUrl } = networkContext!;

  const addrRef = useRef(addr);
  const [isLoading, setIsLoading] = useState(false);
  const [accData, setAccData] = useState<AccData | null>(null);
  const [accContracts, setAccContracts] = useState<ContractObj[] | null>(null);
  const [contractPageIndex, setContractPageIndex] = useState<number>(0);
  const [transactionsCount, setTransactionsCount] = useState<number>(0);

  const generatePagination = useCallback(
    (currentPage: number, pageCount: number, delta = 2) => {
      const separate = (a: number, b: number, isLower: boolean) => {
        const temp = b - a;
        if (temp === 0) return [a];
        else if (temp === 1) return [a, b];
        else if (temp === 2) return [a, a + 1, b];
        else return [a, isLower ? -1 : -2, b];
      };

      return Array(delta * 2 + 1)
        .fill(0)
        .map((_, index) => currentPage - delta + index)
        .filter((page) => 0 < page && page <= pageCount)
        .flatMap((page, index, { length }) => {
          if (!index) {
            return separate(1, page, true);
          }
          if (index === length - 1) {
            return separate(page, pageCount, false);
          }
          return [page];
        });
    },
    []
  );

  // Fetch data
  useEffect(() => {
    if (!dataService) return;

    let accData: AccData;
    let accContracts: ContractObj[];
    const getData = async () => {
      try {
        setIsLoading(true);
        accData = await dataService.getAccData(addrRef.current);
        accContracts = await dataService.getAccContracts(addrRef.current);
        if (accData) setAccData(accData);
        if (accContracts) setAccContracts(accContracts);
      } catch (e) {
        setAccData({
          balance: "0",
          nonce: "-",
        });
      } finally {
        setIsLoading(false);
      }
    };
    getData();
  }, [dataService]);

  const ACCOUNT_TRANSACTIONS = gql`
    query GetTransactions($addr: String!, $page: Int) {
      txPagination(
        page: $page
        filter: {
          OR: [
            { fromAddr: $addr }
            { toAddr: $addr }
            { receipt: { transitions: { addr: $addr } } }
            { receipt: { transitions: { msg: { _recipient: $addr } } } }
          ]
        }
        sort: TIMESTAMP_DESC
      ) {
        count
        items {
          ID
          receipt {
            success
            cumulative_gas
            transitions {
              addr
              msg {
                _recipient
              }
            }
          }
          gasPrice
          gasLimit
          fromAddr
          toAddr
          amount
          timestamp
          type
        }
        pageInfo {
          currentPage
          perPage
          pageCount
          itemCount
          hasNextPage
          hasPreviousPage
        }
      }
    }
  `;

  const hexAddr = zilAddrToHexAddr(addr);

  const {
    loading: transactionsLoading,
    error,
    data: txData,
    fetchMore,
  } = useQuery(ACCOUNT_TRANSACTIONS, {
    variables: { addr: hexAddr, page: 1 },
    context: {
      uri: apolloUrl,
    },
    fetchPolicy: "cache-and-network",
  });

  if (txData && transactionsCount !== txData.txPagination.count) {
    setTransactionsCount(txData.txPagination.count);
  }

  const localFetch = (page: Number) => {
    return fetchMore({
      variables: {
        page,
      },
      updateQuery: (prev: any, { fetchMoreResult }) => {
        if (!fetchMoreResult) return prev;
        return fetchMoreResult;
      },
    });
  };

  return (
    <>
      {isLoading ? (
        <div className="center-spinner">
          <Spinner animation="border" />
        </div>
      ) : null}
      {accData && (
        <>
          <div className="address-header">
            <h3 className="mb-1">
              <span className="mr-1">
                <FontAwesomeIcon className="fa-icon" icon={faWallet} />
              </span>
              <span className="ml-2">Account</span>
              <LabelStar type="Account" />
            </h3>
            <ViewBlockLink
              network={networkUrl}
              type="address"
              identifier={addrRef.current}
            />
          </div>
          <div className="subtext">
            <AddressDisp isLinked={false} addr={addrRef.current} />
          </div>
          <Card className="address-details-card">
            <Card.Body>
              <Container>
                <Row>
                  <Col>
                    <div className="address-detail">
                      <span>Balance:</span>
                      <span>{qaToZil(accData.balance)}</span>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <div className="address-detail">
                      <span>Nonce:</span>
                      <span>{accData.nonce}</span>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <div className="address-detail">
                      <span>Transactions:</span>
                      <span>{transactionsCount}</span>
                    </div>
                  </Col>
                </Row>
              </Container>
            </Card.Body>
          </Card>

          <h4 className="py-2">Transactions</h4>
          <div className="row align-items-center mb-0">
            <div className="col subtext">
              Items Per Page: <strong>20</strong>
            </div>
            <div className="col">
              {txData && txData.txPagination ? (
                <Pagination className="justify-content-end">
                  <Pagination.Prev
                    onClick={() =>
                      localFetch(txData.txPagination.pageInfo.currentPage - 1)
                    }
                    disabled={!txData.txPagination.pageInfo.hasPreviousPage}
                  />
                  {generatePagination(
                    txData.txPagination.pageInfo.currentPage + 1,
                    txData.txPagination.pageInfo.pageCount
                  ).map((page) => {
                    if (page === -1)
                      return (
                        <Pagination.Ellipsis
                          key={page}
                          onClick={() =>
                            localFetch(
                              txData.txPagination.pageInfo.currentPage - 5
                            )
                          }
                        />
                      );
                    else if (page === -2)
                      return (
                        <Pagination.Ellipsis
                          key={page}
                          onClick={() =>
                            localFetch(
                              txData.txPagination.pageInfo.currentPage + 5
                            )
                          }
                        />
                      );
                    else if (page === txData.txPagination.pageInfo.currentPage)
                      return (
                        <Pagination.Item key={page} active>
                          {page}
                        </Pagination.Item>
                      );
                    else
                      return (
                        <Pagination.Item
                          key={page}
                          onClick={() => localFetch(Number(page))}
                        >
                          {page}
                        </Pagination.Item>
                      );
                  })}
                  <Pagination.Next
                    onClick={() =>
                      localFetch(txData.txPagination.pageInfo.currentPage + 1)
                    }
                    disabled={!txData.txPagination.pageInfo.hasNextPage}
                  />
                </Pagination>
              ) : null}
            </div>
          </div>
          <Card className="txblock-card mt-0 mb-4">
            <Card.Body>
              {transactionsLoading ? (
                <div className="center-spinner">
                  <Spinner animation="border" />
                </div>
              ) : null}
              {txData && txData.txPagination ? (
                <TransactionsCard
                  transactions={txData.txPagination.items}
                  addr={addrRef.current}
                />
              ) : null}
              {error ? "Error while loading transactions" : null}
            </Card.Body>
          </Card>

          {accContracts && accContracts.length > 0 && (
            <>
              <h4 className="py-2">Deployed Contracts</h4>
              <Card className="address-details-card">
                <div className="d-flex justify-content-between">
                  <span className="num-contracts">
                    Total: {accContracts.length}{" "}
                    {accContracts.length === 1 ? "contract" : "contracts"}
                  </span>
                  <Pagination className="contract-pagination">
                    <Pagination.Prev
                      onClick={() =>
                        setContractPageIndex(
                          (contractPageIndex) => contractPageIndex - 1
                        )
                      }
                      disabled={contractPageIndex === 0}
                    />
                    {generatePagination(
                      contractPageIndex,
                      Math.ceil(accContracts.length / 10)
                    ).map((page) => {
                      if (page === -1)
                        return (
                          <Pagination.Ellipsis
                            key={page}
                            onClick={() =>
                              setContractPageIndex(
                                (contractPageIndex) => contractPageIndex - 5
                              )
                            }
                          />
                        );
                      else if (page === -2)
                        return (
                          <Pagination.Ellipsis
                            key={page}
                            onClick={() =>
                              setContractPageIndex(
                                (contractPageIndex) => contractPageIndex + 5
                              )
                            }
                          />
                        );
                      else if (page === contractPageIndex + 1)
                        return (
                          <Pagination.Item key={page} active>
                            {page}
                          </Pagination.Item>
                        );
                      else
                        return (
                          <Pagination.Item
                            key={page}
                            onClick={() => setContractPageIndex(page - 1)}
                          >
                            {page}
                          </Pagination.Item>
                        );
                    })}
                    <Pagination.Next
                      onClick={() =>
                        setContractPageIndex(
                          (contractPageIndex) => contractPageIndex + 1
                        )
                      }
                      disabled={
                        contractPageIndex ===
                        Math.ceil(accContracts.length / 10) - 1
                      }
                    />
                  </Pagination>
                </div>
                <Card.Body>
                  {accContracts
                    .slice(10 * contractPageIndex, 10 * contractPageIndex + 10)
                    .map((contract: ContractObj, index: number) => {
                      return (
                        <AccContractCard
                          key={10 * contractPageIndex + index}
                          contract={contract}
                          index={10 * contractPageIndex + index}
                        />
                      );
                    })}
                </Card.Body>
              </Card>
            </>
          )}
        </>
      )}
    </>
  );
}

render() {
        const np = this.props.noblePhantasm,
            npRank = this.getOverwriteData("overWriteTDRank") ?? "",
            npType = this.getOverwriteData("overWriteTDTypeText") ?? "";
        return (
            <div>
                <Row>
                    {this.props.hideCard ? null : (
                        <Col
                            lg={{ span: 3, order: 2 }}
                            style={{ textAlign: "center", marginBottom: "2em" }}
                            className={"text-lg-right d-lg-block d-xl-block"}
                        >
                            {this.npCommandCard()}
                        </Col>
                    )}
                    <Col lg={{ span: this.props.hideCard ? 12 : 9, order: 1 }}>
                        <h3>
                            <NoblePhantasmDescriptor
                                region={this.props.region}
                                noblePhantasm={np}
                                overwriteName={this.getOverwriteData("overWriteTDName")}
                                overwriteRuby={this.getOverwriteData("overWriteTDRuby")}
                            />
                        </h3>

                        {np.condQuestId && np.condQuestPhase ? (
                            <Alert variant={"primary"}>
                                Available after{" "}
                                <QuestDescriptor
                                    region={this.props.region}
                                    questId={np.condQuestId}
                                    questPhase={
                                        ["91", "94"].includes(np.condQuestId.toString().slice(0, 2))
                                            ? 1
                                            : np.condQuestPhase
                                    }
                                />
                            </Alert>
                        ) : null}

                        <p className="newline">{np.detail}</p>

                        <p style={{ lineHeight: "2em" }}>
                            {npRank !== "" ? (
                                <span>
                                    <b>Rank:</b> {npRank}
                                    <br />
                                </span>
                            ) : null}
                            {npType !== "" ? (
                                <span>
                                    <b>Type:</b> {npType}
                                    <br />
                                </span>
                            ) : null}
                            {this.props.hideCard ? (
                                <span>
                                    <b>Card:</b> <CardType card={np.card} height={60} />
                                    <br />
                                </span>
                            ) : null}
                            <b>Hits:</b> {np.npDistribution.length} Hits –{" "}
                            {mergeElements(
                                np.npDistribution.map((hit) => asPercent(hit, 0)),
                                ", "
                            )}
                            <br />
                            <b>Traits:</b>{" "}
                            {mergeElements(
                                np.individuality.map((trait) => (
                                    <TraitDescription
                                        region={this.props.region}
                                        trait={trait}
                                        owner="noble-phantasms"
                                        ownerParameter="individuality"
                                    />
                                )),
                                ", "
                            )}
                        </p>
                    </Col>
                </Row>

                <Row>
                    <Col>
                        <EffectBreakdown
                            region={this.props.region}
                            funcs={np.functions}
                            gain={this.props.hideGain ? undefined : np.npGain}
                            levels={5}
                            scripts={np.script}
                        />
                    </Col>
                </Row>
            </div>
        );
    }

DataprivacyPage = (props: any) => {

    const { t } = useTranslation();
    const [show, setShow] = React.useState(false);

    React.useEffect(() => {
        if (props)
            setShow(props.show);
            // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props.show])

    const handleClose = () => {
        props.setShow(false)
    }

    return (
        <>
            <Modal
                size='lg'
                contentClassName='bg-light'
                scrollable
                show={show}
                aria-labelledby="example-custom-modal-styling-title"
                centered
                onHide={handleClose}

            >
                <Modal.Header id='data-header' closeButton className='pb-0' >
                    <Row>
                        <Col >
                            <Card.Title className='m-0 jcc-xs-jcfs-md' as={'h2'} >{t('translation:dp-title')}</Card.Title>
                        </Col>
                    </Row>
                </Modal.Header>
                    <hr className='mx-3 mb-0' />
                <Modal.Body className='px-3 bg-light'>
                    <Container className='px-1 px-sm-2 px-md-3'>
                        <h5 className='text-justify'>
                            Der Schutz Ihrer persönlichen Daten hat für die T-Systems International GmbH einen hohen Stellenwert. Es ist uns wichtig, Sie darüber zu informieren, welche persönlichen Daten erfasst werden, wie diese verwendet werden und welche Gestaltungsmöglichkeiten Sie dabei haben.
                    </h5>

                        <ol>
                            <li className='text-justify py-3'>
                                <strong>Welche Daten werden erfasst, wie werden sie verwendet und wie lange werden sie gespeichert?</strong>
                                <ol type='a' className='pr-2 pr-md-4'>
                                    <li>
                                        <strong>Technische Merkmale:</strong> <br />
                                        Wenn Sie sich an unserem Schnelltestportal anmelden, verzeichnet der Server Ihren Benutzernamen, die Teststellen-ID, den verwendeten Mandanten (und die von Ihnen ausgeführten Datenbankoperationen (z.B. Eingabe von Patientendaten, Eingabe von Testergebnissen). 
Die protokollierten Daten werden ausschließlich für Zwecke der Datensicherheit, insbesondere zur Abwehr von Angriffsversuchen auf unseren Server verwendet (Art. 6 Abs. 1f DSGVO). Sie werden weder für die Erstellung von individuellen Anwenderprofilen verwendet noch an Dritte weitergegeben und werden nach Ablauf eines Zeitraums von 7 Tagen bis 30 Tagen gelöscht. Die statistische Auswertung anonymisierter Datensätze behalten wir uns vor.<br />
                                    </li>
                                    <li className='py-3'>
                                        <strong>Authentifizierungsdaten:</strong> <br />
                                        Wenn Sie sich an unserem Schnelltest-Portal anmelden, werden erfolgreiche und fehlgeschlagene Anmeldeversuche dokumentiert. Diese Dokumentation umfasst den Benutzernamen, Ihren Vor- und Nachnamen, den Zeitpunkt der Anmeldung, die IP-Adresse, von der aus die Anmeldung durchgeführt wurde und die Session-Dauer. Rechtsgrundlage dieser Verarbeitung ist § 26 Abs. 1 BDSG, soweit Sie als Beschäftigter eines Unternehmens, welches unsere Leistungen in Anspruch nimmt, tätig sind. Sind Sie auf selbständiger Basis für ein Unternehmen tätig, welches unsere Leistungen in Anspruch nimmt, erfolgt die Verarbeitung auf Grund der durch Ihren Auftraggeber eingeholten Einwilligung zur Speicherung.<br />
                                    </li>
                                    <li>
                                        <strong>Archivierung von Testergebnissen:</strong> <br />
                                        Ihr Benutzername wird zusammen mit den Patientendaten des durchgeführten Tests (Name, Vorname, Geburtsdatum, Geschlecht, Adresse, Testhersteller, eingesetzter Test, Tag des Testergebnisses) und dem Testergebnis gemäß gesetzlicher Grundlage archiviert und 10 Jahre aufbewahrt und dann gelöscht.<br />
                                    </li>
                                </ol>
                            </li>
                            <li className='text-justify py-3' >
                                <strong>Wird mein Nutzungsverhalten ausgewertet, z. B. für Werbung oder Tracking?<br /></strong>
                                Es werden nur für die Nutzung des Schnelltest-Portals erforderliche Cookies verwendet. Diese Cookies sind notwendig, damit Sie durch die Seiten navigieren und wesentliche Funktionen nutzen können. Sie ermöglichen die Benutzung des Schnelltestportals. Rechtsgrundlage für diese Cookies ist Art. 6 Abs. 1b DSGVO bzw. bei Drittstaaten Art. 49 Abs. 1b DSGVO.
                             
                            </li>
                            <Table className='my-3'>
                                <thead>
                                    <tr>
                                        <th>Firma</th>
                                        <th>Zweck</th>
                                        <th>Speicherdauer</th>
                                        <th>Land der Verarbeitung</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>T-Systems</td>
                                        <td>Login</td>
                                        <td>Session Cookie</td>
                                        <td>Deutschland</td>
                                    </tr>
                                </tbody>
                            </Table>
                            <li className='text-justify py-3' >
                                <strong>Wo finde ich die Informationen, die für mich wichtig sind?</strong><br />
                                Dieser <strong>Datenschutzhinweis</strong> gibt einen Überblick über die Punkte, die für die Verarbeitung Ihrer Daten in diesem Webportal durch T-Systems gelten.<br />
Weitere Informationen, auch zum Datenschutz im allgemeinen und in speziellen Produkten, erhalten Sie auf <a href='https://www.telekom.com/de/verantwortung/datenschutz-und-datensicherheit/datenschutz'>https://www.telekom.com/de/verantwortung/datenschutz-und-datensicherheit/datenschutz</a> und unter <a href='http://www.telekom.de/datenschutzhinweise'>http://www.telekom.de/datenschutzhinweise</a>.
                            </li>
                            <li className='text-justify py-3' >
                                <strong>Wer ist verantwortlich für die Datenverarbeitung? Wer ist mein Ansprechpartner, wenn ich Fragen zum Datenschutz bei der Telekom habe?</strong><br />
                                Datenverantwortliche ist die T-Systems International GmbH. Bei Fragen können Sie sich an unseren <a href='http://www.telekom.de/kontakt'>Kundenservice</a> wenden oder an unseren Datenschutzbeauftragten, Herrn Dr. Claus D. Ulmer, Friedrich-Ebert-Allee 140, 53113 Bonn, <a href='mailto:[email protected]'>[email protected]</a>.
                            </li>
                            <li className='text-justify py-3' >
                                <strong>Welche Rechte habe ich? </strong><br />
                                Sie haben das Recht,
                                <ol type='a' className='pr-2 pr-md-4'>
                                    <li>
                                        <strong>Auskunft</strong> zu verlangen zu Kategorien der verarbeiteten Daten, Verarbeitungszwecken, etwaigen Empfängern der Daten, der geplanten Speicherdauer (Art. 15 DSGVO);
                                    </li>
                                    <li>
                                        die <strong>Berichtigung</strong> bzw. Ergänzung unrichtiger bzw. unvollständiger Daten zu verlangen (Art. 16 DSGVO);
                                    </li>
                                    <li>
                                        eine erteilte Einwilligung jederzeit mit Wirkung für die Zukunft zu <strong>widerrufen</strong> (Art. 7 Abs. 3 DSGVO);
                                    </li>
                                    <li>
                                        einer Datenverarbeitung, die aufgrund eines berechtigten Interesses erfolgen soll, aus Gründen zu <strong>widersprechen</strong>, die sich aus Ihrer besonderen Situation ergeben (Art 21 Abs. 1 DSGVO);
                                    </li>
                                    <li>
                                        in bestimmten Fällen im Rahmen des Art. 17 DSGVO die <strong>Löschung</strong> von Daten zu verlangen - insbesondere soweit die Daten für den vorgesehenen Zweck nicht mehr erforderlich sind bzw. unrechtmäßig verarbeitet werden, oder Sie Ihre Einwilligung gemäß oben (c) widerrufen oder einen Widerspruch gemäß oben (d) erklärt haben;
                                    </li>
                                    <li>
                                        unter bestimmten Voraussetzungen die <strong>Einschränkung</strong> von Daten zu verlangen, soweit eine Löschung nicht möglich bzw. die Löschpflicht streitig ist (Art. 18 DSGVO);
                                    </li>
                                    <li>
                                        auf <strong>Datenübertragbarkeit</strong>, d.h. Sie können Ihre Daten, die Sie uns bereitgestellt haben, in einem gängigen maschinenlesbaren Format, wie z.B. CSV, erhalten und ggf. an andere übermitteln (Art. 20 DSGVO);
                                    </li>
                                    <li>
                                        sich bei der zuständigen <strong>Aufsichtsbehörde</strong> über die Datenverarbeitung zu <strong>beschweren</strong> (für Telekommunikationsverträge: Bundesbeauftragter für den Datenschutz und die Informationsfreiheit; im Übrigen: Landesbeauftragte für den Datenschutz und die Informationsfreiheit Nordrhein-Westfalen).
                                    </li>
                                </ol>
                            </li>

                            <li className='text-justify py-3' >
                                <strong>An wen gibt die Telekom meine Daten weiter?</strong><br />
                                <strong>An Auftragsverarbeiter</strong>, das sind Unternehmen, die wir im gesetzlich vorgesehenen Rahmen mit der Verarbeitung von Daten beauftragen, Art. 28 DSGVO (Dienstleister, Erfüllungsgehilfen). Die Telekom bleibt auch in dem Fall weiterhin für den Schutz Ihrer Daten verantwortlich. Wir beauftragen Unternehmen insbesondere in folgenden Bereichen: IT, Vertrieb, Marketing, Finanzen, Beratung, Kundenservice, Personalwesen, Logistik, Druck.<br />
                                <strong>Aufgrund gesetzlicher Verpflichtung</strong>: In bestimmten Fällen sind wir gesetzlich verpflichtet, bestimmte Daten an die anfragende staatliche Stelle zu übermitteln.
                            </li>
                            <li className='text-justify py-3' >
                                <strong>Wo werden meine Daten verarbeitet?</strong><br />
                                Ihre Daten werden in Deutschland und im europäischen Ausland verarbeitet. Findet eine Verarbeitung Ihrer Daten in Ausnahmefällen auch in Ländern außerhalb der Europäischen Union (in sog. Drittstaaten) statt, geschieht dies,
                                <ol type='a' className='pr-2 pr-md-4'>
                                    <li>
                                    soweit Sie hierin ausdrücklich eingewilligt haben (Art. 49 Abs. 1a DSGVO).  (In den meisten Ländern außerhalb der EU entspricht das Datenschutzniveau nicht den EU Standards. Dies betrifft insbesondere umfassende Überwachungs- und Kontrollrechte staatlicher Behörden, z.B. in den USA, die in den Datenschutz der europäischen Bürgerinnen und Bürger unverhältnismäßig eingreifen,
                                    </li>
                                    <li>
                                    oder soweit es für unsere Leistungserbringung Ihnen gegenüber erforderlich ist (Art. 49 Abs. 1b DSGVO),
                                    </li>
                                    <li>
                                    oder soweit es gesetzlich vorgesehen ist (Art. 6 Abs. 1c DSGVO).
                                    </li>
                                </ol>
                                Darüber hinaus erfolgt eine Verarbeitung Ihrer Daten in Drittstaaten nur, soweit durch bestimmte Maßnahmen sichergestellt ist, dass hierfür ein angemessenes Datenschutzniveau besteht (z.B. Angemessenheitsbeschluss der EU-Kommission oder sog. geeignete Garantien, Art. 44ff. DSGVO).<br/><br/>
                                Stand der Datenschutzhinweise 29.04.2021
                            </li>
                        </ol>
                    </Container>
                </Modal.Body>
                    <hr className='mx-3 mt-0' />

                {/*
    footer with ok button
    */}
                <Modal.Footer id='data-footer'>
                    <Button
                        className='py-0'
                        onClick={handleClose}
                    >
                        {t('translation:cancel')}
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    )
}