add: homework1

package.json

@@ -5,6 +5,8 @@
   "main": "src/index.tsx",
   "author": "Igor <spirit-drive@yandex.ru>",
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
     "start": "webpack serve --mode development",
     "build": "webpack --mode production",
     "test": "jest src",
@@ -46,6 +48,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "gh-pages": "^6.1.1",
     "html-webpack-plugin": "^5.5.1",
     "husky": "^8.0.0",
     "jest": "^29.5.0",

src/app/App.tsx

@@ -8,7 +8,8 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Текст писать тут
+          Всем привет! Меня зовут Черепанов Егор, я front-end разработчик. Я занимаюсь разработкой интерфейсов и дизайна веб-приложений.<br />
+          Я разрабатываю интерфейсы с помощью React и Jquery.
         </p>
       </header>
     </div>

src/homeworks/ts1/1_base.test.js

@@ -1,26 +1,26 @@
 // Этот блок кода удалить и раскомментировать код ниже
-it('remove it', () => {
-  expect(true).toBe(true);
-});
-
-// import { transformCustomers } from './1_base';
-//
-// describe('all', () => {
-//   it('transformCustomers', () => {
-//     const customers = [
-//       { id: 1, name: 'John', age: 25, isSubscribed: true },
-//       { id: 2, name: 'Mary', age: 40, isSubscribed: false },
-//       { id: 3, name: 'Bob', age: 32, isSubscribed: true },
-//       { id: 4, name: 'Alice', age: 22, isSubscribed: true },
-//       { id: 5, name: 'David', age: 48, isSubscribed: false },
-//     ];
-//
-//     expect(transformCustomers(customers)).toEqual({
-//       1: { name: 'John', age: 25, isSubscribed: true },
-//       2: { name: 'Mary', age: 40, isSubscribed: false },
-//       3: { name: 'Bob', age: 32, isSubscribed: true },
-//       4: { name: 'Alice', age: 22, isSubscribed: true },
-//       5: { name: 'David', age: 48, isSubscribed: false },
-//     });
-//   });
+// it('remove it', () => {
+//   expect(true).toBe(true);
 // });
+
+import { transformCustomers } from './1_base';
+
+describe('all', () => {
+  it('transformCustomers', () => {
+    const customers = [
+      { id: 1, name: 'John', age: 25, isSubscribed: true },
+      { id: 2, name: 'Mary', age: 40, isSubscribed: false },
+      { id: 3, name: 'Bob', age: 32, isSubscribed: true },
+      { id: 4, name: 'Alice', age: 22, isSubscribed: true },
+      { id: 5, name: 'David', age: 48, isSubscribed: false },
+    ];
+
+    expect(transformCustomers(customers)).toEqual({
+      1: { name: 'John', age: 25, isSubscribed: true },
+      2: { name: 'Mary', age: 40, isSubscribed: false },
+      3: { name: 'Bob', age: 32, isSubscribed: true },
+      4: { name: 'Alice', age: 22, isSubscribed: true },
+      5: { name: 'David', age: 48, isSubscribed: false },
+    });
+  });
+});

src/homeworks/ts1/1_base.js → src/homeworks/ts1/1_base.ts

@@ -1,24 +1,29 @@
 /**
  * Нужно превратить файл в ts и указать типы аргументов и типы возвращаемого значения
  * */
-export const removePlus = (string) => string.replace(/^\+/, '');
+export const removePlus = (string: string): string => string.replace(/^\+/, '');
 
-export const addPlus = (string) => `+${string}`;
+export const addPlus = (string: string): string => `+${string}`;
 
-export const removeFirstZeros = (value) => value.replace(/^(-)?[0]+(-?\d+.*)$/, '$1$2');
+export const removeFirstZeros = (value: string): string => value.replace(/^(-)?[0]+(-?\d+.*)$/, '$1$2');
 
-export const getBeautifulNumber = (value, separator = ' ') =>
+export const getBeautifulNumber = (value: number, separator = ' '): string =>
   value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
 
-export const round = (value, accuracy = 2) => {
+export const round = (value: number, accuracy = 2) => {
   const d = 10 ** accuracy;
   return Math.round(value * d) / d;
 };
 
 const transformRegexp =
   /(matrix\(-?\d+(\.\d+)?, -?\d+(\.\d+)?, -?\d+(\.\d+)?, -?\d+(\.\d+)?, )(-?\d+(\.\d+)?), (-?\d+(\.\d+)?)\)/;
 
-export const getTransformFromCss = (transformCssString) => {
+interface Transform {
+  x: number;
+  y: number;
+}
+
+export const getTransformFromCss = (transformCssString: string): Transform => {
   const data = transformCssString.match(transformRegexp);
   if (!data) return { x: 0, y: 0 };
   return {
@@ -27,20 +32,20 @@ export const getTransformFromCss = (transformCssString) => {
   };
 };
 
-export const getColorContrastValue = ([red, green, blue]) =>
+export const getColorContrastValue = ([red, green, blue]: [number, number, number]): number =>
   // http://www.w3.org/TR/AERT#color-contrast
   Math.round((red * 299 + green * 587 + blue * 114) / 1000);
 
-export const getContrastType = (contrastValue) => (contrastValue > 125 ? 'black' : 'white');
+export const getContrastType = (contrastValue: number): string => (contrastValue > 125 ? 'black' : 'white');
 
 export const shortColorRegExp = /^#[0-9a-f]{3}$/i;
 export const longColorRegExp = /^#[0-9a-f]{6}$/i;
 
-export const checkColor = (color) => {
+export const checkColor = (color: string): void | never => {
   if (!longColorRegExp.test(color) && !shortColorRegExp.test(color)) throw new Error(`invalid hex color: ${color}`);
 };
 
-export const hex2rgb = (color) => {
+export const hex2rgb = (color: string): number[] => {
   checkColor(color);
   if (shortColorRegExp.test(color)) {
     const red = parseInt(color.substring(1, 2), 16);
@@ -54,12 +59,39 @@ export const hex2rgb = (color) => {
   return [red, green, blue];
 };
 
-export const getNumberedArray = (arr) => arr.map((value, number) => ({ value, number }));
-export const toStringArray = (arr) => arr.map(({ value, number }) => `${value}_${number}`);
+interface ArrNumber {
+  value: number;
+  number: number;
+}
+
+export const getNumberedArray = (arr: number[]): ArrNumber[] => arr.map((value, number) => ({ value, number }));
+
+interface ArrString {
+  value: number;
+  number: number;
+}
+
+export const toStringArray = (arr: ArrString[]): string[] => arr.map(({ value, number }) => `${value}_${number}`);
+
+
+interface Customer {
+  id: number,
+  name: string,
+  age: number,
+  isSubscribed: boolean
+}
+
+type TransformedCustomers = {
+  [key: string]: {
+    name: string,
+    age: number,
+    isSubscribed: boolean
+  };
+};
 
-export const transformCustomers = (customers) => {
+export const transformCustomers = (customers: Customer[]): TransformedCustomers => {
   return customers.reduce((acc, customer) => {
     acc[customer.id] = { name: customer.name, age: customer.age, isSubscribed: customer.isSubscribed };
     return acc;
-  }, {});
+  }, {} as TransformedCustomers);
 };

src/homeworks/ts1/2_repair.ts

@@ -3,45 +3,50 @@
  * */
 
 // // Мы это не проходили, но по тексту ошибки можно понять, как это починить
-// export const getFakeApi = async (): void => {
-//   const result = await fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) => response.json());
-//   console.log(result);
-// };
-//
+export const getFakeApi = async (): Promise<void> => {
+    const result = await fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) => response.json());
+    console.log(result);
+};
+
 // // Мы это не проходили, но по тексту ошибки можно понять, как это починить
-// export class SomeClass {
-//   constructor() {
-//     this.set = new Set([1]);
-//     this.channel = new BroadcastChannel('test-broadcast-channel');
-//   }
-// }
-//
-// export type Data = {
-//   type: 'Money' | 'Percent';
-//   value: DataValue;
-// };
-//
-// export type DataValue = Money | Percent;
-//
-// export type Money = {
-//   currency: string;
-//   amount: number;
-// };
-//
-// export type Percent = {
-//   percent: number;
-// };
-//
-// // Здесь, возможно, нужно использовать as, возможно в switch передавать немного по-другому
-// const getDataAmount = (data: Data): number => {
-//   switch (data.type) {
-//     case 'Money':
-//       return data.value.amount;
-//
-//     default: {
-//       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//       const unhandled: never = data; // здесь, возможно, нужно использовать нечто другое. :never должен остаться
-//       throw new Error(`unknown type: ${data.type}`);
-//     }
-//   }
-// };
+export class SomeClass {
+
+    set: Set<number>;
+    channel: BroadcastChannel;
+
+    constructor() {
+        this.set = new Set([1]);
+        this.channel = new BroadcastChannel('test-broadcast-channel');
+    }
+}
+
+export type Data = {
+    type: 'Money' | 'Percent';
+    value: DataValue;
+};
+
+export type DataValue = Money | Percent;
+
+export type Money = {
+    currency: string;
+    amount: number;
+};
+
+export type Percent = {
+    percent: number;
+};
+
+// Здесь, возможно, нужно использовать as, возможно в switch передавать немного по-другому
+const getDataAmount = (data: Data): number => {
+    switch (data.type) {
+        case 'Money':
+            return (data.value as Money).amount;
+        case 'Percent':
+            return (data.value as Percent).percent;
+        default: {
+            //   eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const unhandled: never = data.type; // здесь, возможно, нужно использовать нечто другое. :never должен остаться
+            throw new Error(`unknown type: ${unhandled}`);
+        }
+    }
+};

src/homeworks/ts1/3_write.test.js

@@ -1,35 +1,35 @@
 // Этот блок кода удалить и раскомментировать код ниже
-it('remove it', () => {
-  expect(true).toBe(true);
-});
-
-// import { createRandomOperation, createRandomProduct } from './3_write';
-//
-// describe('all', () => {
-//   it('operation', () => {
-//     const createdAt = '2023-06-06T12:06:56.957Z';
-//     const operation = createRandomOperation(createdAt);
-//     expect(operation).toHaveProperty('createdAt', createdAt);
-//     expect(operation).toHaveProperty('id');
-//     expect(operation).toHaveProperty('name');
-//     expect(operation).toHaveProperty('desc');
-//     expect(operation).toHaveProperty('createdAt');
-//     expect(operation).toHaveProperty('amount');
-//     expect(operation).toHaveProperty('category');
-//     expect(operation).toHaveProperty('type');
-//   });
-//
-//   it('product', () => {
-//     const createdAt = '2023-06-06T12:06:56.957Z';
-//     const product = createRandomProduct(createdAt);
-//     expect(product).toHaveProperty('createdAt', createdAt);
-//     expect(product).toHaveProperty('id');
-//     expect(product).toHaveProperty('name');
-//     expect(product).toHaveProperty('photo');
-//     expect(product).toHaveProperty('desc');
-//     expect(product).toHaveProperty('createdAt');
-//     expect(product).toHaveProperty('oldPrice');
-//     expect(product).toHaveProperty('price');
-//     expect(product).toHaveProperty('category');
-//   });
+// it('remove it', () => {
+//   expect(true).toBe(true);
 // });
+
+import { createRandomOperation, createRandomProduct } from './3_write';
+
+describe('all', () => {
+  it('operation', () => {
+    const createdAt = '2023-06-06T12:06:56.957Z';
+    const operation = createRandomOperation(createdAt);
+    expect(operation).toHaveProperty('createdAt', createdAt);
+    expect(operation).toHaveProperty('id');
+    expect(operation).toHaveProperty('name');
+    expect(operation).toHaveProperty('desc');
+    expect(operation).toHaveProperty('createdAt');
+    expect(operation).toHaveProperty('amount');
+    expect(operation).toHaveProperty('category');
+    expect(operation).toHaveProperty('type');
+  });
+
+  it('product', () => {
+    const createdAt = '2023-06-06T12:06:56.957Z';
+    const product = createRandomProduct(createdAt);
+    expect(product).toHaveProperty('createdAt', createdAt);
+    expect(product).toHaveProperty('id');
+    expect(product).toHaveProperty('name');
+    expect(product).toHaveProperty('photo');
+    expect(product).toHaveProperty('desc');
+    expect(product).toHaveProperty('createdAt');
+    expect(product).toHaveProperty('oldPrice');
+    expect(product).toHaveProperty('price');
+    expect(product).toHaveProperty('category');
+  });
+});