react-i18next#useTranslation JavaScript Examples

AdminDashboard = () => {
  const { t } = useTranslation();
  const style = Style();

  return (
    <div className={style.root}>
      <Grid container direction="column" alignItems="center" spacing={2}>
        <Grid item className={style.center}>
          <Typography variant="h2">{t('adminDashboard.title')}</Typography>
        </Grid>
      </Grid>
    </div>
  );
}

RouteCard = ({ route }) => {
    const { t } = useTranslation();

    var m = (moment(route.date).fromNow());
    const title = "title_" + route.name;
    const date = "date_" + route.name;

    return <RouteMapContext.Consumer>
        {props => (
            <RouteCardWrapper
                className="rwrapper"
                color={route.color.hexCode}
                selected={props.selectedRoute === route.id}>

                <RouteCardHeader onClick={() => props.onRouteSelect(route)}>
                    <span className={`${title} title`} name={route.name}>{route.name}</span>
                    <span className={`${date} date`} style={{ alignSelf: 'self-end' }}>{m}</span>
                </RouteCardHeader>

                {props.selectedRoute === route.id &&
                    <OptionButtonContainer>
                        {props.myRoutes &&
                            <OptionButton onClick={props.shareRoute} color={route.color.hexCode} name="route-share">
                                {t('route.share')}
                            </OptionButton>
                        }
                        <OptionButton onClick={props.onRouteView} color={route.color.hexCode} name="route-details">
                            {t('route.details')}
                        </OptionButton>
                    </OptionButtonContainer>
                }
            </RouteCardWrapper>
        )}
    </RouteMapContext.Consumer>;
}

GameConfigurationModal = ({ optionSettings, onClose, onOptionSettingToggle }) => {
    const { t } = useTranslation();

    return (
        <>
            <Modal show={true} onHide={onClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t('Game Configuration')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <GameConfiguration
                        optionSettings={optionSettings}
                        onOptionSettingToggle={onOptionSettingToggle}
                    />
                </Modal.Body>
            </Modal>
        </>
    );
}

export default function TranslationsMenu() {
  const classes = useStyles();
  const { i18n, t } = useTranslation();

  const handleClick = event => {
    i18n.changeLanguage(event.target.value);
  };

  useEffect(() => {
    i18n.changeLanguage(window.navigator.language.slice(0, 2));
  }, [i18n]);

  return (
    <div>
      <FormControl className={classes.formControl}>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          keepMounted
          value={i18n.language}
          onChange={handleClick}
        >
          {languages.map(language => (
            <MenuItem key={language.abbreviation} value={language.abbreviation}>
              {language.language}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>{t('selectLan')}</FormHelperText>
      </FormControl>
    </div>
  );
}

function App() {
  const [t, i18n] = useTranslation();

  function handleChangeLang(lang) {
    i18n.changeLanguage(lang);
  }

   

  return (
    <Layout>
      <Routes />
    </Layout>
  );
}

export function NewTile({data,date,type,theme,header,extraText}) {
  var {t} = useTranslation();
  // var types = [
  //   {label:"R",type:"flatrob",color:"rgb(0, 148, 68)"},
  //   {label:"M",type:"flatmatt",color:"rgb(237, 32, 36)"},
  //   {label:"L",type:"flatlou",color:"rgb(235, 0, 139)"},
  //   {label:"H",type:"flathammock",color:"rgb(35, 117, 245)"},
  // ]
  // {label:"QRewZee",type:"qrewzee",color:"rgb(235, 105, 42)"},
  if(type=="alt") {
    return <View style={{flex:1,backgroundColor:theme.page_content.bg,borderWidth:1,borderColor:'#d3d3d3',height:60,justifyContent:"center",alignItems:"center",paddingBottom:2}}>
      <View style={{flexDirection:"row"}}>
        <Text allowFontScaling={false} style={{color:theme.page_content.fg,...font("bold"),fontSize:12,textAlignVertical:"center"}}>{(date||1).toString()}</Text>
      </View>
      {/* <View style={{flexDirection:"row"}}>
        {types.map(i=>data.includes(i.label)?<Text allowFontScaling={false} style={{color:i.color,...font("bold"),fontSize:12,textAlignVertical:"center",letterSpacing:1}}>{i.label}</Text>:null)}
      </View> */}
      <View style={{flexDirection:"row"}}>
        <Text allowFontScaling={false} style={{color:data.includes('Z')?"rgb(235, 105, 42)":"rgb(150, 150, 150)",...font("bold"),fontSize:10,textAlignVertical:"center"}}>{data.includes('Z')?"QRewZee":t('calendar:off')}</Text>
      </View>
    </View>
  }
  return <View style={{flex:1,backgroundColor:data.includes('Z')?"rgb(235, 105, 42)":"black",borderWidth:1,borderColor:'#d3d3d3',height:header?56:40}}>
    {/* <ImageBackground source={u(data.includes('R')?'R':null)} style={{flex:1}}>
      <ImageBackground source={u(data.includes('M')?'M':null)} style={{flex:1}}>
        <ImageBackground source={u(data.includes('L')?'L':null)} style={{flex:1}}>
          <ImageBackground source={u(data.includes('H')?'H':null)} style={{flex:1}}>
            <ImageBackground source={u(data.includes('Z')?'QRewZeeOn':'QRewZeeOff')} style={{flex:1}}> */}
              <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
                {extraText&&<Text allowFontScaling={false} style={{color:"white",...font("bold"),fontSize:16,textAlignVertical:"center"}}>{extraText}</Text>}
                <Text allowFontScaling={false} style={{color:"white",...font("bold"),fontSize:16,textAlignVertical:"center"}}>{(date||"1").toString()}</Text>
              </View>
            {/* </ImageBackground>
          </ImageBackground>
        </ImageBackground>
      </ImageBackground>
    </ImageBackground> */}
  </View>
}

export default function Web3ReactManager({ children }) {
  const { t } = useTranslation()
  const { active } = useWeb3React()
  const { active: networkActive, error: networkError, activate: activateNetwork } = useWeb3React(NetworkContextName)

  // try to eagerly connect to an injected provider, if it exists and has granted access already
  const triedEager = useEagerConnect()

  // after eagerly trying injected, if the network connect ever isn't active or in an error state, activate itd
  // TODO think about not doing this at all
  useEffect(() => {
    if (triedEager && !networkActive && !networkError && !active) {
      activateNetwork(network)
    }
  }, [triedEager, networkActive, networkError, activateNetwork, active])

  // 'pause' the network connector if we're ever connected to an account and it's active
  useEffect(() => {
    if (active && networkActive) {
      network.pause()
    }
  }, [active, networkActive])

  // 'resume' the network connector if we're ever not connected to an account and it's active
  useEffect(() => {
    if (!active && networkActive) {
      network.resume()
    }
  }, [active, networkActive])

  // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
  useInactiveListener(!triedEager)

  // handle delayed loader state
  const [showLoader, setShowLoader] = useState(false)
  useEffect(() => {
    const timeout = setTimeout(() => {
      setShowLoader(true)
    }, 600)

    return () => {
      clearTimeout(timeout)
    }
  }, [])

  // on page load, do nothing until we've tried to connect to the injected connector
  if (!triedEager) {
    return null
  }

  // if the account context isn't active, and there's an error on the network context, it's an irrecoverable error
  if (!active && networkError) {
    return (
      <MessageWrapper>
        <Message>{t('unknownError')}</Message>
      </MessageWrapper>
    )
  }

  // if neither context is active, spin
  if (!active && !networkActive) {
    return showLoader ? (
      <MessageWrapper>
        <SpinnerWrapper src={Circle} />
      </MessageWrapper>
    ) : null
  }

  return children
}

CommentForm = (props) => {
  const { parentComment, handleClick, validationErrors } = props;

  const { t } = useTranslation();
  const style = Style();

  const [content, setContent] = useState('');
  const [loading, setLoading] = useState(false);

  const handleContentChange = (content) => {
    setContent(content);
    setLoading(false);
  };

  return (
    <TextField
      multiline
      rowsMax={5}
      className={parentComment ? style.nestedComments : style.formInput}
      variant="outlined"
      placeholder={t('commentForm.comment')}
      value={content}
      onChange={(event) => setContent(event.target.value)}
      InputProps={{
        endAdornment: (
          <Button
            variant="text"
            color="primary"
            onClick={() => {
              setLoading(true);
              handleClick(content, handleContentChange, parentComment);
            }}
            disabled={!content || loading}
          >
            {t('commentForm.post')}
          </Button>
        ),
      }}
      error={!!validationErrors.content}
      helperText={
        validationErrors.content && t(`errorsList.${validationErrors.content}`)
      }
    />
  );
}

RouteFields = ({ onSave, onError, onImport, routeBase, distance }) => {
  const { t } = useTranslation();

  const [name, setName] = useState(routeBase ? routeBase.name : "");
  const [description, setDescription] = useState(
    routeBase ? routeBase.description : ""
  );

  const onSaveButton = () => {
    if (name) onSave({ name, description });
    else onError(t("route.edit.fillAllFields"));
  };

  const onImportButton = (files) => {
    let file = files[0];
    if (!file.name.endsWith(".gpx")) {
      onError(t("routes.invalid_import"));
      return;
    }

    let reader = new FileReader();
    reader.onload = () => {
      gpx.parse(reader.result, (routes) => {
        if (routes) onImport(routes);
      });
    };

    reader.readAsText(file);
  };

  return (
    <RouteFieldsWrapper>
      <label>{t("route.name")}:</label>
      <input
        className='value-name'
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <label>{t("route.description")}:</label>
      <textarea
        className='value-description'
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />

      <label>{t("route.distance")}: </label><label>{distance}</label>

      <ButtonContainer two={!routeBase}>
        <button id="buttonToSave" className='buttonToSave' onClick={onSaveButton}>{t("route.create")}</button>
        {!routeBase && <label className="file-upload-label" htmlFor="upload-file">
          {t("route.edit.gpx")}
        </label>}
      </ButtonContainer>

      {!routeBase && <input
        id="upload-file"
        type="file"
        onChange={(e) => onImportButton(e.target.files)}
      />}
    </RouteFieldsWrapper>
  );
}

DrawDeck = (props) => {
    const { t } = useTranslation();

    const {
        // eslint-disable-next-line no-unused-vars
        cards,
        isMe,
        manualMode,
        onDragDrop,
        onPopupChange,
        onShuffleClick,
        showDeck,
        spectating,
        cardCount,
        showChains
    } = props;

    let drawDeckPopupMenu = showDeck
        ? [{ text: 'Close and Shuffle', handler: () => onShuffleClick && onShuffleClick() }]
        : null;

    let hasCards = cardCount > 0;

    let drawDeck = (
        <CardPile
            {...props}
            className='draw'
            disablePopup={!hasCards && (spectating || !isMe)}
            hiddenTopCard={true}
            onPopupChange={(event) =>
                onPopupChange && !event.visible && onPopupChange({ visible: false })
            }
            popupMenu={drawDeckPopupMenu}
            source='deck'
            title={t('Draw')}
            showAltIcon={true}
            showChains={showChains}
        />
    );

    return isMe ? (
        <Droppable onDragDrop={onDragDrop} source='deck' manualMode={manualMode}>
            {drawDeck}
        </Droppable>
    ) : (
        drawDeck
    );
}

AppCalendar = props => {
  const { observations } = props;
  const classes = useStyles();
  const dispatch = useDispatch();
  const [today] = useState(new Date().toLocaleDateString());
  const [currentObservations, setCurrentObservations] = useState([]);
  const { i18n } = useTranslation();

  // select date function
  const handleDateClick = date => {
    const dateClickedString = date.toLocaleDateString();
    setCurrentObservations([]);
    dispatch(actions.selectDate(JSON.stringify(date).slice(0, 11)));

    observations.forEach(observation => {
      const dateString = new Date(observation.date).toLocaleDateString();
      if (dateString === dateClickedString) {
        setCurrentObservations(currentObservations => [...currentObservations, observation]);
      }
    });
  };

  // eslint-disable-next-line
  const calendarComponentRef = useRef(null);

  return (
    <>
      <div className={classes.appCalendar}>
        <Calendar
          className={classes.reactCalendar}
          locale={i18n.language}
          onChange={handleDateClick}
          tileClassName={({ date, view }) => {
            const dateString = date.toLocaleDateString();
            const tileClasses = [classes.calendarTile];

            if (dateString === today) {
              tileClasses.push(classes.today);
            }

            if (observations.find(observation => new Date(observation.date).toLocaleDateString() === dateString)) {
              tileClasses.push(classes.completedSurvey);
            }

            return tileClasses;
          }}
        />
        {currentObservations.map((observation, index) => {
          return (
            <div key={observation.date} className={classes.day}>
              <WeeklyTracker>
                <WeeklyTrackerDay dayData={observation} />
              </WeeklyTracker>
            </div>
          );
        })}
      </div>
    </>
  );
}

export default function CheckoutBoleto() {
    const [t] = useTranslation();
    let { id } = useParams();

    const [loadingStatus, setloadingStatus] = useState(true)

    useEffect(() => {
      setloadingStatus(false)

    }, []);


  return (
    <>
      <Loading spinning={loadingStatus} />
      <Header title={t("header.donations")}  />

         <Styled.MobContainer>
                <Styled.ContentText style={{fontSize:"14px",lineHeight:"18px",margin:"17px 8px 0px 8px",color:"#F5F5F5"}}>
                     Obrigado pela sua doação, FIRST_NAME!
                </Styled.ContentText>

               <div style={{textAlign:"center",margin:"20px 0"}}>
                 <img  src={require("~/assets/images/icon-ok.svg")}/>

               </div>


                <Styled.ContentText style={{fontSize:"14px",lineHeight:"24px",margin:"8px 8px 17px"}}>
                    <p>Sua doação de AMOUNT foi confirmada e o valor será repassado diretamente para a ONG ONG_NAME.</p>

                    <p>O CNPJ da ONG ONG_NAME é ONG_CNPJ. Com ele, você poderá deduzir valores dos seus impostos a serem pagos.</p>

                    <p>Você receberá um email com a confirmação da doação.</p>

                   <p>A CovidZero não recebeu nenhuma comissão sobre essa doação.</p>
                </Styled.ContentText>

                
             
                <div  className="termos">
                      <div className="logo-preme">
                          <p>Pagamento processado por</p> 
                          <a href="https://www.premepay.com/pt-br?utm_source=covidzero" target="_blank"><img  src={require("~/assets/images/logo-preme.svg")}/></a>
                      </div>
                </div>
                     
         </Styled.MobContainer>

    </>
  ); 

}

export default function Calendar({style,month,year,theme,type="default"}) {
  const {t} = useTranslation();
  const moment = useMoment();
  const now = moment();
  const monthStart = moment({date:1,month:month??now.month(),year:year??now.year()}).day();
  const monthEnd = moment({date:1,month:month??now.month(),year:year??now.year()}).add(1,"month").subtract(1,'day').date();
  const newDesign = (month > 5 && year === 2020) || year > 2020;
  const Tile = newDesign?NewTile:OldTile

  var grid = []
  var finishedGrid = false;
  for(var i = -1;!finishedGrid;i++) {
    let row = [];
    for(var j = 1;j <= 7;j++) {
      if((7*i)+j<monthStart) row.push(null)
      else if((7*i)+j-monthStart>=monthEnd) row.push(null)
      else row.push((7*i)+j-monthStart+1)
    }
    if(row.find(i=>i)) grid.push(row);
    if((7*i)+8-monthStart>=monthEnd) finishedGrid = true;
  }

  var types = [
    {label:"Rob",type:"flatrob",color:"rgb(0, 148, 68)"},
    {label:"Matt",type:"flatmatt",color:"rgb(237, 32, 36)"},
    {label:"Lou",type:"flatlou",color:"rgb(235, 0, 139)"},
    {label:"Hammock",type:"flathammock",color:"rgb(35, 117, 245)"},
    {label:"QRewZee",type:"qrewzee",color:"rgb(235, 105, 42)"},
  ]

  return <View style={style}>
    {type=="default"&&!newDesign&&<View style={{flexDirection:"row"}}>
      {types.map(i=><View style={{flex:1,borderWidth:1,borderColor:'#d3d3d3',backgroundColor:i.color,justifyContent:"center",alignItems:"center",height:60}}>
        <Image source={getIcon(i.type)} style={{height:32,width:32}}/>
        <Text allowFontScaling={false} style={{fontSize:12,color:"white"}}>{i.label}</Text>
      </View>)}
    </View>}
    <View style={{flexDirection:"row"}}>
      {[
        t("calendar:days.monday"),
        t("calendar:days.tuesday"),
        t("calendar:days.wednesday"),
        t("calendar:days.thursday"),
        t("calendar:days.friday"),
        t("calendar:days.saturday"),
        t("calendar:days.sunday")
      ].map(i=><View style={{flex:1,borderWidth:1,borderColor:'#d3d3d3',justifyContent:"center",alignItems:"center",height:40}}>
        <Text allowFontScaling={false} style={{fontSize:16,color:theme.page_content.fg}}>{i}</Text>
      </View>)}
    </View>
    {grid.map(row=><View style={{flexDirection:"row"}}>
      {row.map(day=>day?<Tile theme={theme} type={type} data={CalData?.[year??now.year()]?.[month??now.month()]?.[day-1]??''} date={day}/>:<View style={{flex:1,borderWidth:1,borderColor:'#d3d3d3'}}/>)}
    </View>)}
  </View>
}