lodash#capitalize JavaScript Examples

parseCountryName = (country) => {
  if (!country) {
    return '';
  }

  const parts = country.split('_');
  const newParts = parts.map(part => capitalize(part));
  return newParts.join(' ');
}

ShadowExample = ({ size }) => {
  const sizeName = useMemo(() => capitalize(size), [size]);
  return (
    <div className={CSS_BASE_CLASS}>
      <div className={cx(bemHelper({ element: "example" }), bemHelper({ element: "example", state: size }))} />
      <span className={bemHelper({ element: "title" })}>{sizeName}</span>
      <span className={bemHelper({ element: "code" })}>{`var(--box-shadow-${size})`}</span>
    </div>
  );
}

formatRecordType = recordType => capitalize(recordType)

TrendingPage = ({ location }) => {
  const { category: categoryId } = queryString.parse(location.search);
  const trendingVids = useSelector(({ videos }) => videos.trending);
  const isLoading = useSelector(({ videos }) => videos.isLoading);
  const dispatch = useDispatch();
  const theme = useTheme();
  const isMaxScreenSm = useMediaQuery(theme.breakpoints.only("xs"));

  useEffect(() => {
    dispatch(getTrendingVideos(categoryId));
  }, [categoryId]);

  const classes = useStyles();
  return (
    <Container maxWidth="xl" className={classes.root}>
      <Typography variant="h5" className={classes.text}>
        {capitalize(categories[categoryId]) || "Trending"}
      </Typography>
      <HorizontalCategoryMenu />

      <Divider light className={classes.divider} />
      {(() => {
        if (isLoading && isMaxScreenSm) {
          return (
            <VideoList
              type="vertical_2"
              isLoading={isLoading}
              videos={trendingVids}
            />
          );
        } else if (isLoading && !isMaxScreenSm) {
          return (
            <VideoList
              type="horizontal_1"
              isLoading={isLoading}
              videos={trendingVids}
            />
          );
        } else if (!isLoading && !isMaxScreenSm && trendingVids.length) {
          return (
            <VideoList
              type="horizontal_1"
              isLoading={isLoading}
              videos={trendingVids}
            />
          );
        } else {
          return "Nothing Trending";
        }
      })()}
    </Container>
  );
}

function PostFilterBar({
  filterSelfPosts,
  intl,
}) {
  const dispatch = useDispatch();
  const { courseId } = useParams();
  const userIsPrivileged = useSelector(selectUserIsPrivileged);
  const currentSorting = useSelector(selectThreadSorting());
  const currentFilters = useSelector(selectThreadFilters());
  const { status } = useSelector(state => state.cohorts);
  const cohorts = useSelector(selectCourseCohorts);
  const userIsStaff = useSelector(selectUserIsStaff);

  const [isOpen, setOpen] = useState(false);

  const selectedCohort = useMemo(() => cohorts.find(cohort => (
    toString(cohort.id) === currentFilters.cohort)),
  [currentFilters.cohort]);

  const handleSortFilterChange = (event) => {
    const currentType = currentFilters.postType;
    const currentStatus = currentFilters.status;
    const {
      name,
      value,
    } = event.currentTarget;
    if (name === 'type') {
      dispatch(setPostsTypeFilter(value));
      if (
        value === ThreadType.DISCUSSION && currentStatus === PostsStatusFilter.UNANSWERED
      ) {
        // You can't filter discussions by unanswered
        dispatch(setStatusFilter(PostsStatusFilter.ALL));
      }
    }
    if (name === 'status') {
      dispatch(setStatusFilter(value));
      if (value === PostsStatusFilter.UNANSWERED && currentType !== ThreadType.QUESTION) {
        // You can't filter discussions by unanswered so switch type to questions
        dispatch(setPostsTypeFilter(ThreadType.QUESTION));
      }
    }
    if (name === 'sort') {
      dispatch(setSortedBy(value));
    }
    if (name === 'cohort') {
      dispatch(setCohortFilter(value));
    }
    setOpen(false);
  };

  useEffect(() => {
    if (userIsPrivileged && isEmpty(cohorts)) {
      dispatch(fetchCourseCohorts(courseId));
    }
  }, [courseId, userIsPrivileged]);

  return (
    <Collapsible.Advanced
      open={isOpen}
      onToggle={() => setOpen(!isOpen)}
      className="collapsible-card-lg border-right-0"
    >
      <Collapsible.Trigger className="collapsible-trigger border-0">
        <span className="text-primary-700 pr-4">
          {intl.formatMessage(messages.sortFilterStatus, {
            own: filterSelfPosts,
            type: currentFilters.postType,
            sort: currentSorting,
            status: currentFilters.status,
            cohortType: selectedCohort?.name ? 'group' : 'all',
            cohort: capitalize(selectedCohort?.name),
          })}
        </span>
        <Collapsible.Visible whenClosed>
          <Icon src={Tune} />
        </Collapsible.Visible>
        <Collapsible.Visible whenOpen>
          <Icon src={Tune} />
        </Collapsible.Visible>
      </Collapsible.Trigger>
      <Collapsible.Body className="collapsible-body px-4 pb-3 pt-0">
        <Form>
          <div className="d-flex flex-row py-2 justify-content-between">
            <Form.RadioSet
              name="type"
              className="d-flex flex-column list-group list-group-flush"
              value={currentFilters.postType}
              onChange={handleSortFilterChange}
            >
              <ActionItem
                id="type-all"
                label={intl.formatMessage(messages.allPosts)}
                value={ThreadType.ALL}
                selected={currentFilters.postType}
              />
              <ActionItem
                id="type-discussions"
                label={intl.formatMessage(messages.filterDiscussions)}
                value={ThreadType.DISCUSSION}
                selected={currentFilters.postType}
              />
              <ActionItem
                id="type-questions"
                label={intl.formatMessage(messages.filterQuestions)}
                value={ThreadType.QUESTION}
                selected={currentFilters.postType}
              />
            </Form.RadioSet>
            <Form.RadioSet
              name="status"
              className="d-flex flex-column list-group list-group-flush"
              value={currentFilters.status}
              onChange={handleSortFilterChange}
            >
              <ActionItem
                id="status-any"
                label={intl.formatMessage(messages.filterAnyStatus)}
                value={PostsStatusFilter.ALL}
                selected={currentFilters.status}
              />
              <ActionItem
                id="status-unread"
                label={intl.formatMessage(messages.filterUnread)}
                value={PostsStatusFilter.UNREAD}
                selected={currentFilters.status}
              />
              <ActionItem
                id="status-following"
                label={intl.formatMessage(messages.filterFollowing)}
                value={PostsStatusFilter.FOLLOWING}
                selected={currentFilters.status}
              />
              {(userIsPrivileged || userIsStaff) && (
                <ActionItem
                  id="status-reported"
                  label={intl.formatMessage(messages.filterReported)}
                  value={PostsStatusFilter.REPORTED}
                  selected={currentFilters.status}
                />
              )}
              <ActionItem
                id="status-unanswered"
                label={intl.formatMessage(messages.filterUnanswered)}
                value={PostsStatusFilter.UNANSWERED}
                selected={currentFilters.status}
              />
            </Form.RadioSet>
            <Form.RadioSet
              name="sort"
              className="d-flex flex-column list-group list-group-flush"
              value={currentSorting}
              onChange={handleSortFilterChange}
            >
              <ActionItem
                id="sort-activity"
                label={intl.formatMessage(messages.lastActivityAt)}
                value={ThreadOrdering.BY_LAST_ACTIVITY}
                selected={currentSorting}
              />
              <ActionItem
                id="sort-comments"
                label={intl.formatMessage(messages.commentCount)}
                value={ThreadOrdering.BY_COMMENT_COUNT}
                selected={currentSorting}
              />
              <ActionItem
                id="sort-votes"
                label={intl.formatMessage(messages.voteCount)}
                value={ThreadOrdering.BY_VOTE_COUNT}
                selected={currentSorting}
              />
            </Form.RadioSet>
          </div>
          {userIsPrivileged && (
            <>
              <div className="border-bottom my-2" />
              {status === RequestStatus.IN_PROGRESS ? (
                <div className="d-flex justify-content-center p-4">
                  <Spinner animation="border" variant="primary" size="lg" />
                </div>
              ) : (
                <div className="d-flex flex-row pt-2">
                  <Form.RadioSet
                    name="cohort"
                    className="d-flex flex-column list-group list-group-flush w-100"
                    value={currentFilters.cohort}
                    onChange={handleSortFilterChange}
                  >
                    <ActionItem
                      id="all-groups"
                      label="All groups"
                      value=""
                      selected={currentFilters.cohort}
                    />
                    {cohorts.map(cohort => (
                      <ActionItem
                        key={cohort.id}
                        id={cohort.id}
                        label={capitalize(cohort.name)}
                        value={toString(cohort.id)}
                        selected={currentFilters.cohort}
                      />
                    ))}
                  </Form.RadioSet>
                </div>
              )}
            </>
          )}
        </Form>
      </Collapsible.Body>
    </Collapsible.Advanced>
  );
}

UploadForm = ({ type, onSubmit, formRef }) => {
  const classes = useStyles();
  const form = (type) => {
    let validation = {};
    let initialValues = {};
    if (["details"].includes(type)) {
      initialValues = {
        title: "",
        description: "",
        category: 0,
      };
      validation = {
        title: Yup.string().required("Title is required"),
        description: Yup.string()
          .max(100, "Max characters is 100")
          .required("Description is required"),
        category: Yup.number().required("Category is required"),
      };
    }
    if (["visibility"].includes(type)) {
      initialValues.visibility = "0";
      validation.visibility = Yup.string().required("Visibility is required");
    }
    return { validationSchema: Yup.object().shape(validation), initialValues };
  };
  const validationSchema = form(type).validationSchema;
  const initialValues = form(type).initialValues;

  return (
    <Formik
      innerRef={formRef}
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        onSubmit(values);
      }}
      validateOnMount
    >
      {({ values, errors, touched, handleChange, handleBlur }) => (
        <>
          {type === "details" && (
            <>
              <TextField
                error={touched.title && errors.title}
                id="details-title"
                label="title"
                name="title"
                value={values.title}
                helperText={errors.title}
                variant="outlined"
                onChange={handleChange}
                onBlur={handleBlur}
                className={classes.spacing}
              />
              <TextField
                error={touched.description && errors.description}
                id="details-description"
                label="description"
                name="description"
                value={values.description}
                helperText={errors.description}
                variant="outlined"
                onChange={handleChange}
                className={classes.spacing}
                onBlur={handleBlur}
              />

              <Select
                id="category"
                label="category"
                name="category"
                value={values.category}
                className={classes.spacing}
                onChange={handleChange}
                onBlur={handleBlur}
              >
                {categories.map((value, index) => (
                  <MenuItem key={index} value={index}>
                    {capitalize(value)}
                  </MenuItem>
                ))}
              </Select>
              {errors.category && touched.color && (
                <FormHelperText>{errors.category}</FormHelperText>
              )}
            </>
          )}
          {type === "visibility" && (
            <>
              <FormControl
                component="fieldset"
                error={errors.visibility}
                className={classes.formControl}
              >
                <FormLabel component="legend">
                  Pick the visibility of this video:
                </FormLabel>
                <RadioGroup
                  aria-label="visibility"
                  name="visibility"
                  value={values.visibility}
                  onChange={handleChange}
                >
                  {visibility.map((value, index) => (
                    <FormControlLabel
                      key={index}
                      value={index + ""}
                      control={<Radio />}
                      label={capitalize(value)}
                    />
                  ))}
                </RadioGroup>
                {errors.visibility && touched.color && (
                  <FormHelperText>{errors.visibility}</FormHelperText>
                )}{" "}
              </FormControl>
            </>
          )}
        </>
      )}
    </Formik>
  );
}

TransactionStatusScreen = ({...props}) =>{

    const walletService = WalletService.getInstance();
    
    const {route:{params}} = props;
    const {historyData:{
        txnType,
        status,
        asset,
        amount,
        walletAddress='',
        recipientAddress='',
        txnId,
        zksyncTxnId='',
        ethTxnId=''
    }} = params;

    const [modal,setModal] = useState(false);

    const renderType = () =>{
        if(txnType === 'deposit')
            return(
                <View style={styles.viewBox}>
                    <Text style={styles.descText}>To</Text>
                    <Text style={styles.valueText}>{walletAddress}</Text>
                </View>
            );
        if(txnType === 'transfer')
            return(
                <View style={styles.viewBox}>
                    <Text style={styles.descText}>To</Text>
                    <Text style={styles.valueText}>{recipientAddress}</Text>
                </View>
            );
    };


    const copyToClipboard = () =>{
        // setModal(false);s
        Clipboard.setString(txnId);
        Toast.show('Transaction Id Copied to Clipboard',Toast.LONG);
    };

    const openLink = async ()=>{
        // setModal(false);
        let url;
        try {
            url = txnType === 'deposit' ?  walletService.getTxStatusUrl(ethTxnId) : url = walletService.getFundTransferStatusUrl(zksyncTxnId);
            if (await InAppBrowser.isAvailable()) {
                await InAppBrowser.open(url, {
                    // iOS Properties
                    dismissButtonStyle: 'done',
                    preferredBarTintColor: Colors.white,
                    preferredControlTintColor: Colors.tintColor,
                    readerMode: false,
                    animated: true,
                    modalPresentationStyle: 'pageSheet',
                    modalTransitionStyle: 'coverVertical',
                    modalEnabled: true,
                    enableBarCollapsing: true,
                    // Android Properties
                    showTitle: true,
                    toolbarColor: Colors.primaryBg,
                    secondaryToolbarColor: 'white',
                    enableUrlBarHiding: true,
                    enableDefaultShare: true,
                    forceCloseOnRedirection: false,
                    // Animations
                    animations: {
                        startEnter: 'slide_in_right',
                        startExit: 'slide_out_left',
                        endEnter: 'slide_in_left',
                        endExit: 'slide_out_right',
                    },
                    headers: {
                        'my-custom-header': 'Track Status',
                    },
                });
            }
            else Linking.openURL(url);
        } catch (error) {
            //toast error
        }
    };

    const renderTransactionOptions = () =>{
        return(
            <View style={styles.moduleModal}>
                <TouchableOpacity onPress={()=>openLink()} style={styles.optionTouch}>
                    <Text style={styles.modalText}>View Transaction On {txnType === 'deposit' ? 'Etherscan' : 'ZKSync'}</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>copyToClipboard()} style={styles.optionTouch}>
                    <Text style={styles.modalText}>Copy Transaction Id</Text>
                </TouchableOpacity>
            </View>
        );
    };

    return(
        <SafeAreaView style={styles.wrapper}>
            <View style={{padding:moderateScale(20)}}>
                <AppHeader headerTitle={`${capitalize(txnType)} Status`} />
                <View style={styles.statusBox}>
                    <Image source={status === 'complete' ? require('../../../../../assets/images/icons/check.png') : require('../../../../../assets/images/icons/pending.png')} style={styles.image} />
                    <Text style={styles.statusText}>{capitalize(status)}</Text>
                </View>
                <ScrollView style={{marginTop:moderateScale(20)}}>
                    <View style={GlobalStyles.primaryCard}>
                        {renderType()}
                        <View style={styles.viewBox}>
                            <Text style={styles.descText}>Amount</Text>
                            <Text style={styles.valueText}>{walletUtils.getAssetDisplayText( asset,amount) +' '+asset}</Text>
                        </View>
                        <TouchableOpacity onPress={()=>setModal(true)} style={styles.viewBox}>
                            <Text style={styles.descText}>Txn Id : </Text>
                            <Text style={styles.valueText}>{txnId}</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </View>
            <Modal
                animationIn={'slideInUp'}
                animationOut={'slideOutDown'}
                backdropColor={'#000'}
                dismissable={true}
                isVisible={modal}
                onBackButtonPress={()=>setModal(false)}
                onBackdropPress={()=>setModal(false)}
                style={{padding:0}}
                useNativeDriver={true}
            >
                {renderTransactionOptions()}
            </Modal>
        </SafeAreaView>
    );
}