Add translations

Author: leomaradan2

src/auctionsAttributes/AuctionsAttributesContainer.tsx

@@ -7,6 +7,7 @@ import { Select } from '../components/Select';
 import { ToggleButtons } from '../components/TobbleButtons';
 import { IAuctionAttributes } from '../requests/types';
 import { attributes, itemsWithAttributes } from '../resources/attributes';
+import { useLanguage } from '../resources/lang/LanguageContext';
 
 import { auctionTypes } from './consts';
 import { GridItems } from './GridItems';
@@ -16,10 +17,16 @@ export interface IAuctionAttributesContainerProps {
 }
 
 export const AuctionsAttributesContainer: FC<IAuctionAttributesContainerProps> = ({ auctions }) => {
+  const { ui } = useLanguage();
   const [filterItem, setFilterItem] = useState<string>();
   const [filterAttribute, setFilterAttribute] = useState<string[]>();
   const [filterLevels, setFilterLevels] = useState<[number, number]>([1, 10]);
-  const [filterType, setFilterType] = useState('');
+  const [filterType, setFilterType] = useState('BIN');
+
+  const auctionTypesLocalized = useMemo(
+    () => auctionTypes.map((type) => ({ text: ui[type.text], value: type.value }) as { text: string; value: string }),
+    [ui]
+  );
 
   const handleFilterLevelsChange = (newValue: number | number[]) => {
     const newNumbers = newValue as [number, number];
@@ -63,21 +70,12 @@ export const AuctionsAttributesContainer: FC<IAuctionAttributesContainerProps> =
           padding: 1
         }}
       >
-        <Select label="Items" onChange={setFilterItem} values={itemsWithAttributes} />
-        <MultiSelect label="Attributes" maxItems={2} onChange={setFilterAttribute} values={attributes} />
+        <Select label={ui.items} onChange={setFilterItem} values={itemsWithAttributes} />
+        <MultiSelect label={ui.attributes} maxItems={2} onChange={setFilterAttribute} values={attributes} />
 
-        <RangeSlider label="Levels" max={10} min={1} onChange={handleFilterLevelsChange} />
-        <ToggleButtons label="Auction Type" onChange={setFilterType} options={auctionTypes} />
+        <RangeSlider label={ui.levels} max={10} min={1} onChange={handleFilterLevelsChange} />
+        <ToggleButtons defaultOption={filterType} label={ui.type} onChange={setFilterType} options={auctionTypesLocalized} />
       </Box>
-      {/*<Box
-              sx={{
-                width: "100%",
-                display: "grid",
-                gridTemplateColumns:
-                  "repeat(auto-fill, minmax(min(200px, 100%), 1fr))",
-                gap: 2,
-              }}
-            >*/}
       <GridItems items={filteredAuctions} />
     </>
   );

src/auctionsAttributes/ItemWithAttributes.tsx

@@ -4,11 +4,13 @@ import { FC, useCallback, useState } from 'react';
 
 import { Coin } from '../components/Coin';
 import { IAuctionAttributes } from '../requests/types';
+import { useLanguage } from '../resources/lang/LanguageContext';
 
 import { CARD_HEIGHT, CARD_WIDTH } from './consts';
 
 export const ItemWithAttributes: FC<{ auction: IAuctionAttributes }> = ({ auction }) => {
   const [copied, setCopied] = useState(false);
+  const { ui } = useLanguage();
 
   const handleCopy = useCallback(async () => {
     try {
@@ -26,7 +28,7 @@ export const ItemWithAttributes: FC<{ auction: IAuctionAttributes }> = ({ auctio
       <CardHeader
         title={
           <>
-            {auction.itemName} <Chip label={auction.bin ? 'BIN' : 'Auction'} />
+            {auction.itemName} <Chip label={auction.bin ? ui.bin : ui.auction} />
           </>
         }
       />
@@ -45,17 +47,17 @@ export const ItemWithAttributes: FC<{ auction: IAuctionAttributes }> = ({ auctio
           </List>
         </Typography>
         <Typography component="div" variant="h6" gutterBottom>
-          Price : <Coin amount={auction.startingBid} />
+          {ui.itemPrice} : <Coin amount={auction.startingBid} />
         </Typography>
       </CardContent>
       <CardActions>
         <Button onClick={handleCopy} size="small">
-          Copy to clipboard
+          {ui.copyToClipboard}
         </Button>
       </CardActions>
       {copied && (
         <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
-          Copied to clipboard!
+          {ui.copiedToClipboard}
         </Alert>
       )}
     </Card>

src/auctionsAttributes/consts.ts

@@ -1,8 +1,10 @@
+import { ILanguageUI } from '../resources/lang/type';
+
 export const CARD_WIDTH = 400;
 export const CARD_HEIGHT = 400;
 
-export const auctionTypes = [
-  { text: 'Both', value: '' },
-  { text: 'BIN', value: 'BIN' },
-  { text: 'Auction', value: 'Auction' }
+export const auctionTypes: { text: keyof ILanguageUI; value: string }[] = [
+  { text: 'both', value: '' },
+  { text: 'bin', value: 'BIN' },
+  { text: 'auction', value: 'Auction' }
 ];

src/components/TobbleButtons.tsx

@@ -2,13 +2,14 @@ import { FormGroup, FormLabel, ToggleButton, ToggleButtonGroup } from '@mui/mate
 import { FC, MouseEvent, useState } from 'react';
 
 export interface IToggleButtonsProps {
+  defaultOption?: string;
   label: string;
   onChange: (value: string) => void;
   options: { text: string; value: string }[];
 }
 
-export const ToggleButtons: FC<IToggleButtonsProps> = ({ label, onChange, options }) => {
-  const [value, setValue] = useState(options[0].value);
+export const ToggleButtons: FC<IToggleButtonsProps> = ({ defaultOption, label, onChange, options }) => {
+  const [value, setValue] = useState(defaultOption ?? options[0].value);
   const handleOnChange = (_event: MouseEvent<HTMLElement>, value: string) => {
     setValue(value);
     onChange(value);

src/resources/lang/enUs.ts

@@ -263,18 +263,22 @@ export const enUs: ILanguage = {
   },
   ui: {
     amount: 'Amount',
+    attributes: 'Attributes',
     auction: 'Auction',
     bazaar: 'Bazaar',
+    bin: 'BIN',
+    both: 'Both',
     categoryDrillParts: 'Drill Parts',
     categoryForging: 'Forging',
     categoryGear: 'Gears',
     categoryGemstone: 'Perfect Gemstones',
     categoryOther: 'Other',
     categoryPets: 'Pets',
     categoryRefining: 'Refining',
-
     categoryStones: 'Reforge Stones',
     categoryTools: 'Tools',
+    copiedToClipboard: 'Copied to clipboard',
+    copyToClipboard: 'Copy to clipboard',
     craftCost: 'Crafting cost',
     filters: 'Filters',
     fuelColumn: 'Fuels (2k needed)',
@@ -284,6 +288,8 @@ export const enUs: ILanguage = {
     item: 'Item',
     itemPrice: 'Item price',
     itemPricePerCompost: 'Price / Compost',
+    items: 'Items',
+    levels: 'Levels',
     options: {
       auctionsBINOnlyDescription: 'Use BINs Auctions only for material.',
       auctionsBINOnlyLabel: 'BINs material',
@@ -329,7 +335,6 @@ export const enUs: ILanguage = {
     profitByTimeNonStop: 'Profit per hour',
     profitByTimeThreeTime: 'Profits for 8h',
     profitByTimeTwice: 'Profits for 12h',
-
     sell: 'Sell',
     sellPrice: 'Sell price',
     shoppingList: 'Shopping list',

src/resources/lang/frFr.ts

@@ -263,8 +263,11 @@ export const frFr: ILanguage = {
   },
   ui: {
     amount: 'Quantité',
+    attributes: 'Attributs',
     auction: 'Actions',
     bazaar: 'Bazaar',
+    bin: 'BIN',
+    both: 'Les deux',
     categoryDrillParts: 'Pièces de Foreuse',
     categoryForging: 'Forge',
     categoryGear: 'Gears',
@@ -274,6 +277,8 @@ export const frFr: ILanguage = {
     categoryRefining: 'Affinage',
     categoryStones: 'Pierre de Forge',
     categoryTools: 'Outils',
+    copiedToClipboard: 'Copié dans le presse-papier!',
+    copyToClipboard: 'Copier dans le presse-papier',
     craftCost: 'Coût de fabrication',
     filters: 'Filtres',
     fuelColumn: 'Carburants (2k nécessaire)',
@@ -283,6 +288,8 @@ export const frFr: ILanguage = {
     item: 'Objet',
     itemPrice: "Prix de l'objet",
     itemPricePerCompost: 'Prix / Composte',
+    items: 'Objets',
+    levels: 'Niveaux',
     options: {
       auctionsBINOnlyDescription: 'Utiliser uniquement les ressources en BIN',
       auctionsBINOnlyLabel: 'Ressources en BIN',

src/resources/lang/type.ts

@@ -278,10 +278,13 @@ export interface ILanguageItems {
   YELLOW_FLOWER: string;
 }
 
-interface ILanguageUI {
+export interface ILanguageUI {
   amount: string;
+  attributes: string;
   auction: string;
   bazaar: string;
+  bin: string;
+  both: string;
   categoryDrillParts: string;
   categoryForging: string;
   categoryGear: string;
@@ -291,6 +294,8 @@ interface ILanguageUI {
   categoryRefining: string;
   categoryStones: string;
   categoryTools: string;
+  copiedToClipboard: string;
+  copyToClipboard: string;
   craftCost: string;
   filters: string;
   fuelColumn: string;
@@ -300,6 +305,8 @@ interface ILanguageUI {
   item: string;
   itemPrice: string;
   itemPricePerCompost: string;
+  items: string;
+  levels: string;
   options: ILanguageUIOptions;
   organicMattersColumn: string;
   organicMattersTitle: string;