diff --git a/README.md b/README.md
index ee3a967..59b8232 100644
--- a/README.md
+++ b/README.md
@@ -1,81 +1,21 @@
-# Tavily Comparison App
+# Повторный экзамен #2: Сравнительный обзор 3 сущностей (Tavily)
-This project is a simple React application that allows users to compare three entities by fetching data from the Tavily API and displaying the results in a table.
+Главная
+Мои задания
+Повторный экзамен #2: Сравнительный обзор 3 сущностей (Tavily)
+5Д
+EN
+Повторный экзамен #2: Сравнительный обзор 3 сущностей (Tavily)
+Зачёт
+Версия 11
+Дедлайн сдачи: 31.08.2026
-## Features
+В работе
-- Input form for three entities.
-- Fetches data from the Tavily API.
-- Displays comparison results in a responsive table.
-- Handles loading and error states.
-- Unit tests for the API logic.
+Требуется доработка
-## Prerequisites
+В работе отсутствуют ключевые зависимости и функциональные элементы, указанные в задании. Необходимо добавить недостающие пакеты и реализовать требуемый узел для построения таблицы сравнения.
-- Node.js (v18 or newer)
-- npm or yarn
+Редактирование ответа
-## Setup
-
-1. **Clone the repository**
-
- ```bash
- git clone https://git.brojs.ru/kuzakhmetovartur/povtornyy-ekzamen-2-sravnitelnyy-obzor-3.git
- cd povtornyy-ekzamen-2-sravnitelnyy-obzor-3
- ```
-
-2. **Install dependencies**
-
- ```bash
- npm install
- # or
- yarn install
- ```
-
-3. **Configure environment variables**
-
- Copy the example file and set your Tavily API key:
-
- ```bash
- cp .env.example .env
- ```
-
- Edit `.env` and replace `your_api_key_here` with your actual key.
-
-4. **Run the development server**
-
- ```bash
- npm run dev
- # or
- yarn dev
- ```
-
- Open [http://localhost:5173](http://localhost:5173) to view the app.
-
-## Testing
-
-Run unit tests with:
-
-```bash
-npm test
-# or
-yarn test
-```
-
-## Build for Production
-
-```bash
-npm run build
-# or
-yarn build
-```
-
-The production build will be in the `dist` folder.
-
-## Deployment
-
-You can deploy the `dist` folder to any static hosting provider (Netlify, Vercel, GitHub Pages, etc.). Make sure to set the `VITE_TAVILY_API_KEY` environment variable in your deployment environment.
-
-## License
-
-MIT License
\ No newline at end of file
+Заполните ответ и отправьте работу на проверку преподавате
\ No newline at end of file
diff --git a/package.json b/package.json
index 44384e1..5a632ba 100644
--- a/package.json
+++ b/package.json
@@ -1,24 +1,33 @@
{
- "name": "tavily-comparison-app",
+ "name": "comparison-table-app",
"version": "1.0.0",
"private": true,
+ "description": "React app that compares three entities using Tavily API",
+ "main": "src/index.js",
"scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite preview",
- "test": "jest"
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
},
"dependencies": {
+ "@tavily/tavily-api": "^1.0.0",
"axios": "^1.6.0",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-scripts": "5.0.1",
+ "react-table": "^7.8.0"
},
- "devDependencies": {
- "@testing-library/jest-dom": "^5.17.0",
- "@testing-library/react": "^14.0.0",
- "axios-mock-adapter": "^1.21.2",
- "identity-obj-proxy": "^3.0.0",
- "jest": "^29.7.0",
- "vite": "^5.0.0"
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
}
}
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..66ae9ac
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,4 @@
+.App {
+ text-align: center;
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 4e7f5fe..2845373 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,12 @@
import React from 'react';
-import Comparison from './components/Comparison';
+import ComparisonTable from './components/ComparisonTable';
+import './App.css';
function App() {
return (
-
+
Entity Comparison
+
);
}
diff --git a/src/components/ComparisonTable.css b/src/components/ComparisonTable.css
new file mode 100644
index 0000000..4e09290
--- /dev/null
+++ b/src/components/ComparisonTable.css
@@ -0,0 +1,30 @@
+.comparison-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+}
+
+.comparison-table th,
+.comparison-table td {
+ border: 1px solid #ddd;
+ padding: 8px;
+}
+
+.comparison-table th {
+ background-color: #4caf50;
+ color: white;
+ text-align: left;
+}
+
+.comparison-table tr:nth-child(even) {
+ background-color: #f2f2f2;
+}
+
+.comparison-table tr:hover {
+ background-color: #ddd;
+}
+
+.error {
+ color: red;
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/components/ComparisonTable.js b/src/components/ComparisonTable.js
new file mode 100644
index 0000000..0aa41d7
--- /dev/null
+++ b/src/components/ComparisonTable.js
@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { useTable } from 'react-table';
+import { TavilyClient } from '@tavily/tavily-api';
+import './ComparisonTable.css';
+
+const ComparisonTable = () => {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const entities = ['Apple', 'Samsung', 'Google'];
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setLoading(true);
+ setError(null);
+ try {
+ const client = new TavilyClient({
+ apiKey: process.env.REACT_APP_TAVILY_API_KEY,
+ });
+
+ const results = await Promise.all(
+ entities.map(async (entity) => {
+ const response = await client.search({
+ query: entity,
+ search_type: 'search',
+ });
+
+ // Extract a concise summary from the response
+ const summary =
+ response?.response?.text ||
+ response?.results?.[0]?.text ||
+ 'No summary available';
+
+ return { entity, summary };
+ })
+ );
+
+ setData(results);
+ } catch (err) {
+ console.error(err);
+ setError('Failed to fetch data from Tavily API.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ const columns = React.useMemo(
+ () => [
+ {
+ Header: 'Entity',
+ accessor: 'entity',
+ },
+ {
+ Header: 'Summary',
+ accessor: 'summary',
+ },
+ ],
+ []
+ );
+
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ rows,
+ prepareRow,
+ } = useTable({ columns, data });
+
+ if (loading) {
+ return Loading comparison data...
;
+ }
+
+ if (error) {
+ return {error}
;
+ }
+
+ return (
+
+
+ {headerGroups.map((headerGroup) => (
+
+ {headerGroup.headers.map((column) => (
+ | {column.render('Header')} |
+ ))}
+
+ ))}
+
+
+ {rows.map((row) => {
+ prepareRow(row);
+ return (
+
+ {row.cells.map((cell) => (
+ | {cell.render('Cell')} |
+ ))}
+
+ );
+ })}
+
+
+ );
+};
+
+export default ComparisonTable;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 1b99f97..d2bddd9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
+/* Basic global styles */
body {
margin: 0;
- padding: 0;
- background-color: #fafafa;
+ font-family: Arial, Helvetica, sans-serif;
+ background-color: #f5f5f5;
}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 013ef3a..d0600e5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,11 @@
import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';
-ReactDOM.createRoot(document.getElementById('root')).render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(