ntasicc
/
coffee
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

refactor: localization

localization
ntasicc 3 лет назад
Родитель
734f2f3854
Сommit
d3154fd815
10 измененных файлов: 68 добавлений и 23 удалений
Единый вид Показать статистику Diff
  1. 5
    3
      components/buttons/load-more/LoadMore.jsx
  2. 3
    1
      components/product-card/ProductCard.jsx
  3. 7
    5
      components/product-type/ProductType.jsx
  4. 1
    1
      components/products-content/ProductsContent.jsx
  5. 4
    5
      components/products-hero/ProductsHero.jsx
  6. 6
    4
      components/sort/Sort.jsx
  7. 9
    3
      components/tab-content/TabContent.jsx
  8. 5
    1
      pages/products/[customId].js
  9. 9
    0
      pages/products/index.js
  10. 19
    0
      public/locales/en/products.json

+ 5
- 3
components/buttons/load-more/LoadMore.jsx Просмотреть файл

import { Button } from '@mui/material'; import { Button } from '@mui/material';
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from '@mui/material/CircularProgress';
import { useTranslation } from 'next-i18next';
import Image from 'next/image'; import Image from 'next/image';


const LoadMore = ({ fetchNextPage, isFetchingNextPage, hasNextPage }) => { const LoadMore = ({ fetchNextPage, isFetchingNextPage, hasNextPage }) => {
const { t } = useTranslation('products');
return ( return (
<Button <Button
onClick={fetchNextPage} onClick={fetchNextPage}
/> />
)} )}
{isFetchingNextPage {isFetchingNextPage
? 'Loading...'
? t('products:loading')
: hasNextPage : hasNextPage
? 'Load More'
: 'Nothing more to load'}
? t('products:more')
: t('products:end')}
</Button> </Button>
); );
}; };

+ 3
- 1
components/product-card/ProductCard.jsx Просмотреть файл

import { Button, Typography } from '@mui/material'; import { Button, Typography } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import Image from 'next/image'; import Image from 'next/image';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useStore, useStoreUpdate } from '../../store/cart-context'; import { useStore, useStoreUpdate } from '../../store/cart-context';


const ProductCard = ({ product }) => { const ProductCard = ({ product }) => {
const { t } = useTranslation('products');
const { addCartValue } = useStoreUpdate(); const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore(); const { cartStorage } = useStore();
const addProductToCart = (quantity) => addCartValue(product, quantity); const addProductToCart = (quantity) => addCartValue(product, quantity);
color: 'white', color: 'white',
}} }}
> >
{inCart ? 'In Cart' : 'Add to cart'}
{inCart ? t('products:in') : t('products:add')}
</Button> </Button>
</Box> </Box>
</Box> </Box>

+ 7
- 5
components/product-type/ProductType.jsx Просмотреть файл

import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { useTranslation } from 'next-i18next';


const ProductType = ({ productType, handleProductTypeChange }) => { const ProductType = ({ productType, handleProductTypeChange }) => {
const { t } = useTranslation('products');
return ( return (
<> <>
<FormControl sx={{ width: '200px' }}> <FormControl sx={{ width: '200px' }}>
<InputLabel id="product-type-label">Product Type</InputLabel>
<InputLabel id="product-type-label">{t('products:type')}</InputLabel>
<Select <Select
MenuProps={{ MenuProps={{
disableScrollLock: true, disableScrollLock: true,
}} }}
label="Product Type"
label={t('products:tpe')}
labelId="product-type-label" labelId="product-type-label"
id="product-type-label" id="product-type-label"
value={productType} value={productType}
onChange={handleProductTypeChange} onChange={handleProductTypeChange}
> >
<MenuItem value="All">All</MenuItem>
<MenuItem value="Coffee">Coffee</MenuItem>
<MenuItem value="Mug">Mug</MenuItem>
<MenuItem value="All">{t('products:all')}</MenuItem>
<MenuItem value="Coffee">{t('products:coffee')}</MenuItem>
<MenuItem value="Mug">{t('products:mug')}</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</> </>

+ 1
- 1
components/products-content/ProductsContent.jsx Просмотреть файл

}} }}
> >
<Head> <Head>
<title>NextJS template</title>
<title>Coffee Shop</title>
<meta name="description" content="Random data with pagination..." /> <meta name="description" content="Random data with pagination..." />
</Head> </Head>
<ProductsHero /> <ProductsHero />

+ 4
- 5
components/products-hero/ProductsHero.jsx Просмотреть файл

import { Container, Typography } from '@mui/material'; import { Container, Typography } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';


const ProductsHero = () => { const ProductsHero = () => {
const { t } = useTranslation('products');
return ( return (
<Box <Box
sx={{ sx={{
fontSize: { md: '64px', sm: '46px', xs: '32px' }, fontSize: { md: '64px', sm: '46px', xs: '32px' },
}} }}
> >
Welcome to our Store!
{t('products:title')}
</Typography> </Typography>
<Typography <Typography
sx={{ fontSize: { xs: '16px', sm: '18px', md: '24px' } }} sx={{ fontSize: { xs: '16px', sm: '18px', md: '24px' } }}
align="center" align="center"
> >
Our focus is to bring you the very best in the world of coffee.
Everything from fresh coffee beans, the best coffee powders and
capsules as well as other miscellaneous items such as cups and mugs.
Take a look to see if anything takes your fancy.
{t('products:description')}
</Typography> </Typography>
</Container> </Container>
</Box> </Box>

+ 6
- 4
components/sort/Sort.jsx Просмотреть файл

import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { useTranslation } from 'next-i18next';


const Sort = ({ sort, handleSortChange }) => { const Sort = ({ sort, handleSortChange }) => {
const { t } = useTranslation('products');
return ( return (
<> <>
<FormControl <FormControl
mr: { sm: '10px' }, mr: { sm: '10px' },
}} }}
> >
<InputLabel id="sort-label">Sort</InputLabel>
<InputLabel id="sort-label">{t('products:sort')}</InputLabel>
<Select <Select
MenuProps={{ MenuProps={{
disableScrollLock: true, disableScrollLock: true,
}} }}
label="Sort"
label={t('products:sort')}
labelId="sort-label" labelId="sort-label"
id="sort-select-helper" id="sort-select-helper"
value={sort} value={sort}
onChange={handleSortChange} onChange={handleSortChange}
> >
<MenuItem value="asc">Name - A-Z</MenuItem>
<MenuItem value="desc">Name - Z-A</MenuItem>
<MenuItem value="asc">{t('products:asc')}</MenuItem>
<MenuItem value="desc">{t('products:desx')}</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</> </>

+ 9
- 3
components/tab-content/TabContent.jsx Просмотреть файл

import { Button, Grid, Tab, Tabs, Typography } from '@mui/material'; import { Button, Grid, Tab, Tabs, Typography } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { useTranslation } from 'next-i18next';
import { useState } from 'react'; import { useState } from 'react';
import TabPanel from '../tab-panel/TabPanel'; import TabPanel from '../tab-panel/TabPanel';


addProductToCart, addProductToCart,
}) => { }) => {
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const { t } = useTranslation('products');


const handleChange = (event, newValue) => { const handleChange = (event, newValue) => {
setValue(newValue); setValue(newValue);
sx={{ sx={{
width: '50%', width: '50%',
}} }}
label="Purchase"
label={t('products:purchase')}
{...a11yProps(0)} {...a11yProps(0)}
/> />
<Tab sx={{ width: '50%' }} label="Category" {...a11yProps(1)} />
<Tab
sx={{ width: '50%' }}
label={t('products:category')}
{...a11yProps(1)}
/>
</Tabs> </Tabs>
<TabPanel value={value} index={0}> <TabPanel value={value} index={0}>
<Box flexGrow={2} sx={{ pb: { xs: '70px' } }}> <Box flexGrow={2} sx={{ pb: { xs: '70px' } }}>
color: 'white', color: 'white',
}} }}
> >
{inCart ? 'In Cart' : 'Add to cart'}
{inCart ? t('products:in') : t('products:add')}
</Button> </Button>
</Box> </Box>
</TabPanel> </TabPanel>

+ 5
- 1
pages/products/[customId].js Просмотреть файл

import { Grid, Typography } from '@mui/material'; import { Grid, Typography } from '@mui/material';
import { Box, Container } from '@mui/system'; import { Box, Container } from '@mui/system';
import { dehydrate, QueryClient } from '@tanstack/react-query'; import { dehydrate, QueryClient } from '@tanstack/react-query';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Image from 'next/image'; import Image from 'next/image';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import { useStore, useStoreUpdate } from '../../store/cart-context'; import { useStore, useStoreUpdate } from '../../store/cart-context';


const SingleProduct = () => { const SingleProduct = () => {
const { t } = useTranslation('products');
const { addCartValue } = useStoreUpdate(); const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore(); const { cartStorage } = useStore();


fontSize: '32px', fontSize: '32px',
}} }}
> >
Similar Products You May Like
{t('products:similar')}
</Typography> </Typography>
<Grid container spacing={2}> <Grid container spacing={2}>
{data.similarProducts.map((product) => ( {data.similarProducts.map((product) => (
return { return {
props: { props: {
dehydratatedState: dehydrate(queryClient), dehydratatedState: dehydrate(queryClient),
...(await serverSideTranslations(context.locale, ['products'])),
}, },
}; };
}; };

+ 9
- 0
pages/products/index.js Просмотреть файл

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import ProductsContent from '../../components/products-content/ProductsContent'; import ProductsContent from '../../components/products-content/ProductsContent';


const Products = () => { const Products = () => {
return <ProductsContent></ProductsContent>; return <ProductsContent></ProductsContent>;
}; };


export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['products'])),
},
};
}

export default Products; export default Products;

+ 19
- 0
public/locales/en/products.json Просмотреть файл

{
"title": "Welcome to our Store!",
"description": " Our focus is to bring you the very best in the world of coffee. Everything from fresh coffee beans, the best coffee powders and capsules as well as other miscellaneous items such as cups and mugs. Take a look to see if anything takes your fancy.",
"sort": "Sort",
"asc": "Name - A-Z",
"desc": "Name - Z-A",
"type": "Product Type",
"all": "All",
"coffee": "Coffee",
"mug": "mug",
"loading": "Loading...",
"more": "Load More",
"end": "Nothing more to load",
"add": "Add to cart",
"in": "In Cart",
"similar": "Similar Products You May Like",
"purchase": "Purchase",
"category": "Category"
}

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить