ramda#not JavaScript Examples

ButtonWithDescription = ({ color, children, description, hideArrow, isTopDescription, onClick, title }) => (
  <Styled.ButtonWithDescription padding={children} onClick={onClick} color={color} position={isTopDescription}>
    {!isTopDescription && children && <Styled.Children>{children}</Styled.Children>}
    <Styled.Title color={color} arrowPosition={children}>
      {title}
      {not(hideArrow) && <IconArrow />}
    </Styled.Title>
    <Styled.Description position={isTopDescription} margin={children}>
      {description}
    </Styled.Description>
  </Styled.ButtonWithDescription>
)

SliderBox = ({ icon, title, handleHeadClick, items }) => {
  if (not(items) || items.length === 0) {
    return null;
  }

  return (
    <Styled.Wrapper>
      <Styled.Head onClick={handleHeadClick}>
        <Styled.Icon>{icon}</Styled.Icon>
        <Styled.Title>{title}</Styled.Title>
      </Styled.Head>

      <Styled.Slider>{items}</Styled.Slider>
    </Styled.Wrapper>
  );
}

useFirstRun = () => {
  const dispatch = useDispatch();
  const firstRunTime = useSelector(getFirstRunTime);

  useEffect(() => {
    if (not(firstRunTime)) {
      dispatch(markFirstRun());
    }
    // eslint-disable-next-line
  }, [firstRunTime]);
}

prepareActivities = (
  currentActivities = [],
  nativeNotifications = [],
  nativeRiskChecks = [],
  nativeExposures = [],
  fetchedIds = {}
) => {
  const {
    notifications: notificationsIds = [],
    riskChecks: riskChecksIds = [],
    exposures: exposuresIds = []
  } = fetchedIds;
  const { activities, restNativeRiskChecks } = prepareActivitiesWithRiskChecks(
    nativeRiskChecks.filter(({ id }) => not(riskChecksIds.includes(id))),
    currentActivities
  );

  return sortByTimestamp([
    ...activities,
    ...nativeNotifications
      .filter(({ id }) => not(notificationsIds.includes(id)))
      .map(createActivityFromNativeNotification),
    ...nativeExposures
      .filter(({ riskLevel }) => riskLevel > 0)
      .filter(({ id }) => not(exposuresIds.includes(id)))
      .map(createActivityFromNativeExposure),
    ...createRiskChecks(restNativeRiskChecks)
  ]);
}

getLastTwoWeeks = state => propertyName => {
  if (not(state.statistics.details)) {
    return undefined;
  }
  const values = state.statistics.details.lastDays[propertyName];

  if (not(values)) {
    return undefined;
  }

  const { length } = values;

  if (length <= 14) {
    return values;
  }

  return values.slice(length - 14, length);
}

SimpleResultContainer = () => {
  const { isTorLow, isTorMiddle, isEnMiddle, isEnHigh, noEn } = useHealthStats();
  const { isSubscriptionInProgress } = useLabTest();
  const isTorHigh = useTorHigh();

  const resolveParagraphsLabels = () => {
    if (isTorHigh) {
      return [
        'summary_risk_test_description_2_1',
        'summary_risk_test_description_2_2',
        'summary_risk_test_description_2_3'
      ];
    }

    if (isTorMiddle) {
      return ['summary_risk_test_description_3_1', 'summary_risk_test_description_2_2'];
    }

    if (isTorLow) {
      if (not(isSubscriptionInProgress) && or(isEnMiddle, isEnHigh)) {
        return ['summary_risk_test_description_3_1', 'summary_risk_test_description_2_2'];
      }

      return ['summary_risk_test_description_3_1'];
    }
    return [];
  };

  const resolveTitle = () => {
    if (noEn) {
      return <T i18nKey="summary_risk_test_title_2" />;
    }
    return <T i18nKey="summary_risk_test_title_3" />;
  };

  return <SimpleResult paragraphsLabels={resolveParagraphsLabels()} title={resolveTitle()} />;
}

SummaryRiskTest = () => {
  const { isEnHigh, isTorMiddle, isEnMiddle } = useHealthStats();
  const { isSubscriptionInProgress } = useLabTest();
  const isTorHigh = useTorHigh();

  const resolveView = () => {
    if (not(isSubscriptionInProgress) && (isEnMiddle || isEnHigh) && or(isTorMiddle, isTorHigh)) {
      return <LabTestReady />;
    }
    return <SimpleResult />;
  };

  return (
    <Layout hideBackButton fullHeight hideBell>
      <Styled.SummaryRiskTest data-cy="view-summary-risk-test">{resolveView()}</Styled.SummaryRiskTest>
    </Layout>
  );
}

useFirstRunTime = () => {
  const dispatch = useDispatch();

  const firstRunTime = useSelector(getFirstRunTime);
  const toShowTimestamps = useSelector(getToShowRatingTimestamps);

  useEffect(() => {
    if (not(firstRunTime)) {
      return;
    }
    const days21AfterFirstRun = addDays(firstRunTime, 21);
    if (toShowTimestamps && not(toShowTimestamps.map(({ timestamp }) => timestamp).includes(days21AfterFirstRun))) {
      dispatch(setShowingRateApplication(days21AfterFirstRun));
    }
    // eslint-disable-next-line
  }, [firstRunTime]);
}

StatsItem = ({ value, label, smallSize, withoutPlus }) => {
  if (not(Number.isInteger(value))) {
    return null;
  }

  return (
    <>
      <Styled.Value smallSize={smallSize}>
        {value > 0 && not(withoutPlus) && '+ '}
        {numberWithSpaces(value)}
      </Styled.Value>
      {` `}
      <Styled.Label>{label}</Styled.Label>
    </>
  );
}

ListStatsContainer = () => {
  const { lastDate } = useFilledDiagnosis();
  const { lastRiskCheckTimestamp } = useSelector(getExposureAggregateStatistics);
  const { noEn } = useHealthStats();
  const { isTriageEnMiddle, isTriageEnHigh } = useTriage();

  const iconVirus = (() => {
    if (isTriageEnHigh) {
      return <IconVirusHigh />;
    }
    if (isTriageEnMiddle) {
      return <IconVirusMiddle />;
    }
    return <IconVirusSmall />;
  })();

  const firstBulletPointColor = (() => {
    if (isTriageEnHigh) {
      return Color.red;
    }
    if (isTriageEnMiddle) {
      return Color.info;
    }
    return undefined;
  })();

  return (
    <ListStats
      dateRiskMonitoring={getFormattedDate(lastRiskCheckTimestamp)}
      dateLastRiskTest={lastDate}
      firstBulletPointColor={firstBulletPointColor}
      iconVirus={iconVirus}
      isInfected={not(noEn)}
    />
  );
}

ToggleButtonContainer = ({ active, onClick }) => {
  const { isTriageEnMiddle, isTriageEnHigh } = useTriage();

  const color = (() => {
    if (and(or(isTriageEnMiddle, isTriageEnHigh), not(active))) {
      return Color.white;
    }

    return Color.primary;
  })();

  return <ToggleButton onClick={onClick} color={color} active={active} />;
}

Chart = ({ data, footer, header }) => {
  if (not(data)) {
    return null;
  }
  if (data.every(value => not(value))) {
    return null;
  }
  const parsedData = data && data.length > 2 ? data.slice(0, 2) : data;

  const renderData = parsedData.map((values, index) => {
    const points = values.map((y, x) => ({
      x,
      y
    }));

    return (
      <VictoryArea
        data={points}
        height={80}
        // eslint-disable-next-line
        key={index}
        labels={({ datum }) => (parsedData.length >= 2 ? null : `+ ${numberWithSpaces(datum.y)}`)}
        labelComponent={<VictoryLabel renderInPortal verticalAnchor="middle" textAnchor="end" />}
        style={styles[index]}
      />
    );
  });

  return (
    <Styled.Wrapper>
      <Styled.Header>
        <Small color={Color.lightGray}>{header}</Small>
      </Styled.Header>

      {/* Number of values is provided by props in order to display only the last value on the chart */}
      {/* All data elements should have the same length at the moment (14 days) */}
      <Styled.Chart numberOfValues={data[0].length}>
        <VictoryChart height={80} padding={{ top: 15 }}>
          {renderData}
          <VictoryAxis style={{ axis: { stroke: Color.white } }} />
        </VictoryChart>
      </Styled.Chart>
      <Styled.Footer>
        <Small color={Color.lightGray}>{footer}</Small>
      </Styled.Footer>
    </Styled.Wrapper>
  );
}

intersect = (needed = [], received = []) => intersection(needed, received) |> isEmpty |> not

FilledTable = ({ data, fields }) => {
  const [sortedData, setSortedData] = useState(data);
  const [sortBy, setSortBy] = useState(fields[0].field);
  const [ascending, setAscending] = useState(true);

  useEffect(() => {
    setSortedData(prev => {
      if (sortBy === 'name' && ascending) {
        return [...prev.sort((a, b) => a.name.localeCompare(b.name))];
      }
      if (sortBy === 'name' && not(ascending)) {
        return [...prev.sort((a, b) => b.name.localeCompare(a.name))];
      }
      return orderby(prev, [sortBy], [ascending ? 'asc' : 'desc']);
    });
  }, [sortBy, ascending]);

  const sortData = field => {
    setSortBy(field);
    if (field === sortBy) {
      setAscending(prev => not(prev));
    } else {
      setAscending(true);
    }
  };

  const renderedHeaders = fields.map(({ header, field }, index) => {
    const isFirst = index === 0;
    return (
      <TH
        key={field}
        align={isFirst ? 'left' : 'right'}
        colspan={isFirst && 5}
        onClick={() => sortData(field)}
        selected={field === sortBy}
        type={field === sortBy ? (ascending ? ARROW_TYPE.UP : ARROW_TYPE.DOWN) : ARROW_TYPE.DOWN}
      >
        {header}
      </TH>
    );
  });

  const renderedRows = sortedData.map(item => (
    <RowBody key={item.id}>
      {fields.map(({ field }, index) => {
        const isFirst = index === 0;

        return (
          <TD key={field} align={isFirst ? 'left' : 'right'}>
            <CellContent color={isFirst ? Color.black : Color.darkGray} isFirst={isFirst}>
              {numberWithSpaces(item[field])}
            </CellContent>
          </TD>
        );
      })}
    </RowBody>
  ));

  return (
    <Table>
      <Thead>
        <RowHeader>{renderedHeaders}</RowHeader>
      </Thead>
      <Tbody>{renderedRows}</Tbody>
    </Table>
  );
}

Statistics = ({ dateUpdated, vaccinationsBoxes, covidStatsBoxes }) => {
  const { goTo } = useNavigation();

  const renderStatsItem = item => {
    if (not(item)) {
      return null;
    }

    const { value, label, smallSize, withoutPlus } = item;

    return <StatsItem label={label} value={value} smallSize={smallSize} withoutPlus={withoutPlus} />;
  };

  const createBoxItem = (item, type) => {
    const { id, heading, firstLine, kind, secondLine } = item;

    return (
      <ItemBox
        key={id}
        onClick={() => goTo(Routes.Statistics, { type, kind })}
        heading={heading}
        firstLine={renderStatsItem(firstLine)}
        secondLine={renderStatsItem(secondLine)}
      />
    );
  };

  const renderedVaccinationStats = vaccinationsBoxes.map(value => createBoxItem(value, statisticTypes.VACCINATIONS));
  const renderedCovidStats = covidStatsBoxes.map(value => createBoxItem(value, statisticTypes.COVID));

  return (
    <>
      <SliderBox
        icon={<Icon1 />}
        title={<T i18nKey="dashboard_statistic_2" variables={{ date: dateUpdated }} />}
        handleHeadClick={() => goTo(Routes.Statistics, { type: statisticTypes.VACCINATIONS })}
        items={renderedVaccinationStats}
      />

      <SliderBox
        icon={<Icon2 />}
        title={<T i18nKey="dashboard_statistic_9" variables={{ date: dateUpdated }} />}
        handleHeadClick={() => goTo(Routes.Statistics, { type: statisticTypes.COVID })}
        items={renderedCovidStats}
      />
    </>
  );
}

CustomCallToActionButtonContainer = () => {
  const { goTo } = useNavigation();
  const { isSubscriptionConfirmed } = useLabTest();
  const { isCovidConfirmed, isCovidManual } = useHealthStats();
  const {
    isTriageTorLow,
    isTriageTorMiddle,
    isTriageTorHighNoCovid,
    isTriageTorHighCovid,
    isTriageEnLow,
    isTriageEnMiddle,
    isTriageEnHigh,
    isTriageTorMiddleEnLow,
    isTriageTorHighNoCovidEnLow,
    isTriageTorHighCovidEnLow
  } = useTriage();

  const recommendationsText = <T i18nKey="result_analysis_text_26" />;
  const recommendationsAction = component => () => goTo(Routes.Recommendations, { component });
  const torText = <T i18nKey="result_analysis_text_4" />;
  const torAction = () => goTo(Routes.Diagnosis);

  const createData = (action, text) => ({ action, text });

  const data = (() => {
    if (isCovidConfirmed) {
      return createData(recommendationsAction(RecommendationsComponents.SickApprove), recommendationsText);
    }
    if (isCovidManual) {
      return createData(recommendationsAction(RecommendationsComponents.SickReported), recommendationsText);
    }

    if (isTriageTorLow) {
      return null;
    }
    if (or(isTriageTorMiddle, isTriageTorMiddleEnLow)) {
      return createData(recommendationsAction(RecommendationsComponents.RiskTestMiddle), recommendationsText);
    }
    if (or(isTriageTorHighNoCovid, isTriageTorHighNoCovidEnLow)) {
      return createData(recommendationsAction(RecommendationsComponents.RiskTestHighNoCovid), recommendationsText);
    }
    if (or(isTriageTorHighCovid, isTriageTorHighCovidEnLow)) {
      return createData(recommendationsAction(RecommendationsComponents.RiskTestHighCovid), recommendationsText);
    }

    if (isTriageEnLow) {
      return null;
    }
    if (and(isTriageEnMiddle, isSubscriptionConfirmed)) {
      return createData(recommendationsAction(RecommendationsComponents.ExposureMiddle), recommendationsText);
    }
    if (and(isTriageEnMiddle, not(isSubscriptionConfirmed))) {
      return createData(recommendationsAction(RecommendationsComponents.ExposureMiddle), recommendationsText);
    }
    if (and(isTriageEnHigh, isSubscriptionConfirmed)) {
      return createData(recommendationsAction(RecommendationsComponents.ExposureHighPinApprove), recommendationsText);
    }
    if (and(isTriageEnHigh, not(isSubscriptionConfirmed))) {
      return createData(recommendationsAction(RecommendationsComponents.ExposureHigh), recommendationsText);
    }
    return createData(torAction, torText);
  })();

  if (data === null) {
    return null;
  }

  return <CustomCallToActionButton text={data.text} action={data.action} />;
}

LabTestActionButtonContainer = () => {
  const { goTo } = useNavigation();
  const { isCovidConfirmed } = useHealthStats();
  const { isSubscriptionVerified, isSubscriptionConfirmed, timeOfUpdatedSubscriptionStatus } = useLabTest();

  const prepareData = (titleLabel, descriptionLabel, onClick, phone, isIconNotification) => {
    return {
      title: <T i18nKey={titleLabel} />,
      description: <T i18nKey={descriptionLabel} />,
      onClick,
      isIconNotification,
      phone
    };
  };

  const readyForLabTestData = useMemo(() => {
    return prepareData(
      'result_analysis_text_17_3',
      'result_analysis_text_18_3',
      () => goTo(Routes.LabTest),
      undefined,
      false
    );
    // eslint-disable-next-line
  }, []);

  const finishLabTestData = useMemo(() => {
    return prepareData('result_analysis_text_17_4', 'result_analysis_text_18_4', () => null, CALL_CENTER_PHONE, true);
  }, []);

  const timeIsUp = useMemo(() => {
    return moment().diff(moment.unix(timeOfUpdatedSubscriptionStatus), 'hours') >= 72;
  }, [timeOfUpdatedSubscriptionStatus]);

  const data = useMemo(() => {
    if (isSubscriptionVerified) {
      return finishLabTestData;
    }
    if (isSubscriptionConfirmed) {
      if (timeIsUp && not(isCovidConfirmed)) {
        return readyForLabTestData;
      }
      return null;
    }
    return readyForLabTestData;
    // eslint-disable-next-line
  }, [isSubscriptionVerified, isSubscriptionConfirmed, timeIsUp, isCovidConfirmed]);

  if (!data) {
    return null;
  }

  return (
    <LabTestActionButton
      title={data.title}
      description={data.description}
      onClick={data.onClick}
      isIconNotification={data.isIconNotification}
      phone={data.phone}
    />
  );
}

CallToActionPinContainer = () => {
  const { goTo } = useNavigation();
  const { isCovidConfirmed } = useHealthStats();
  const {
    areEnableAllServices,
    handleEnableServices,
    receivedServicesMarker
  } = useSupportExposureNotificationTracing();
  const [pressed, setPressed] = useState(false);

  const handlePressed = ifElse(
    () => areEnableAllServices,
    () => goTo(Routes.UploadHistoricalData),
    handleEnableServices
  );

  const handleChangeServices = ifElse(
    () => and(areEnableAllServices, pressed),
    () => goTo(Routes.UploadHistoricalData),
    () => setPressed(false)
  );

  useEffect(() => {
    if (not(pressed)) {
      return;
    }
    handlePressed();
    // eslint-disable-next-line
  }, [pressed]);

  useEffect(() => {
    handleChangeServices();
    // eslint-disable-next-line
  }, [receivedServicesMarker]);

  if (isCovidConfirmed) {
    return null;
  }

  return <CallToActionPin onClick={() => setPressed(true)} />;
}

getUpdateDate = state => {
  if (not(state.statistics.details)) {
    return undefined;
  }
  return state.statistics.details.updated;
}

getDistrictsData = state => {
  if (not(state.statistics.details)) {
    return [];
  }
  return state.statistics.details.voivodeships.reduce((total, voivodeship) => {
    return [...total, ...voivodeship.districts];
  }, []);
}

getVoivodeshipsData = state => {
  if (not(state.statistics.details)) {
    return [];
  }
  return state.statistics.details.voivodeships;
}

ContentTextContainer = ({ t }) => {
  const { lastDate } = useFilledDiagnosis();
  const { isSubscriptionConfirmed } = useLabTest();
  const { isCovidConfirmed, isCovidManual } = useHealthStats();
  const {
    isTriageTorLow,
    isTriageTorMiddle,
    isTriageTorHighNoCovid,
    isTriageTorHighCovid,
    isTriageEnLow,
    isTriageEnMiddle,
    isTriageEnHigh,
    isTriageTorMiddleEnLow,
    isTriageTorHighNoCovidEnLow,
    isTriageTorHighCovidEnLow
  } = useTriage();

  const translatedText = (() => {
    if (isCovidConfirmed) {
      return <T i18nKey="result_analysis_text_25" />;
    }
    if (isCovidManual) {
      return <T i18nKey="result_analysis_text_27" />;
    }

    if (isTriageTorLow) {
      return <T i18nKey="result_analysis_text_9" />;
    }
    if (isTriageTorMiddle) {
      return (
        <T
          i18nKey="result_analysis_text_10"
          variables={{ date: lastDate, currentState: t('result_analysis_variant_3') }}
        />
      );
    }
    if (isTriageTorMiddleEnLow) {
      return (
        <T
          i18nKey="result_analysis_text_38"
          variables={{ date: lastDate, currentState: t('result_analysis_variant_3') }}
        />
      );
    }
    if (isTriageTorHighNoCovid) {
      return (
        <T
          i18nKey="result_analysis_text_12"
          variables={{ date: lastDate, currentState: t('result_analysis_variant_4') }}
        />
      );
    }
    if (isTriageTorHighNoCovidEnLow) {
      return (
        <T
          i18nKey="result_analysis_text_39"
          variables={{ date: lastDate, currentState: t('result_analysis_variant_4') }}
        />
      );
    }
    if (isTriageTorHighCovid) {
      return (
        <T
          i18nKey="result_analysis_text_23"
          variables={{ date: lastDate, currentState: t('result_analysis_variant_4') }}
        />
      );
    }
    if (isTriageTorHighCovidEnLow) {
      return (
        <T
          i18nKey="result_analysis_text_40"
          variables={{ date: lastDate, currentState: t('result_analysis_variant_4') }}
        />
      );
    }
    if (isTriageEnLow) {
      return <T i18nKey="result_analysis_text_14" />;
    }
    if (and(isTriageEnMiddle, isSubscriptionConfirmed)) {
      return <T i18nKey="result_analysis_text_29" />;
    }
    if (and(isTriageEnMiddle, not(isSubscriptionConfirmed))) {
      return <T i18nKey="result_analysis_text_15" />;
    }
    if (and(isTriageEnHigh, isSubscriptionConfirmed)) {
      return <T i18nKey="result_analysis_text_37" />;
    }
    if (and(isTriageEnHigh, not(isSubscriptionConfirmed))) {
      return <T i18nKey="result_analysis_text_19" />;
    }

    return <T i18nKey="result_analysis_text_3" />;
  })();

  return <ContentText translatedText={translatedText} />;
}