ql

1
import React from 'react';
2
import { useParams } from 'react-router-dom';
3
import { useQuery } from '@apollo/client';
4
import { GET_REPO_DETAILS } from '../../resurce/get_repo_details.tsx';
5
import { Link } from 'react-router-dom';
6
import styles from './Reposiyory.module.scss'
7

8
interface ILanguage {
9
    name: string;
10
}
11

12
interface IRepository {
13
    name: string;
14
    stargazers: {
15
        totalCount: number;
16
    };
17
    updatedAt: string;
18
    owner: {
19
        login: string;
20
        avatarUrl: string;
21
        url: string;
22
    };
23
    description: string;
24
    languages: {
25
        nodes: ILanguage[];
26
    };
27
}
28

29
const Repository: React.FC = () => {
30
    const { owner, name } = useParams<{ owner: string; name: string }>();
31

32
    const { data, loading, error } = useQuery(GET_REPO_DETAILS, {
33
        variables: { owner, name },
34
    });
35

36
    if (loading) return <p>Loading...</p>;
37
    if (error || !data || !data.repository) return <p>Error: {error ? error.message : 'Repository not found'}</p>;
38

39
    const repository: IRepository = data.repository;
40

41
    return (
42
        <div className={styles.container}>
43
            <Link to="/" className={styles.btn}>Назад</Link>
44
            <h1>{repository.name} - {repository.stargazers.totalCount} stars - {new Date(repository.updatedAt).toLocaleDateString()}</h1>
45
            <div>
46
                <img src={repository.owner.avatarUrl} alt={repository.owner.login} width={50} />
47
                <a href={repository.owner.url} target="_blank" rel="noopener noreferrer">{repository.owner.login}</a>
48
            </div>
49
            <div>
50
                <h3>Languages</h3>
51
                <ul>
52
                    {repository.languages.nodes.map(language => (
53
                        <li key={language.name}>{language.name}</li>
54
                    ))}
55
                </ul>
56
            </div>
57
            <p>{repository.description}</p>
58
        </div>
59
    );
60
};
61

62
export default Repository;
63