ql

1
import React, { useEffect } from 'react';
2
import { useSelector, useDispatch } from 'react-redux';
3
import { RootState, AppDispatch } from '../../store/store';
4
import { setQuery, setCurrentPage } from '../../store/features/searchSlice';
5
import { useLazyQuery} from '@apollo/client';
6
import { Link } from 'react-router-dom';
7
import {GET_USER_REPOS} from "../../resurce/get_user_repos.tsx";
8
import {SEARCH_REPOS} from "../../resurce/search_repos.tsx";
9
import styles from './Home.module.scss';
10

11
interface RepositoryNode {
12
    name: string;
13
    owner: {
14
        login: string;
15
    };
16
    stargazers: {
17
        totalCount: number;
18
    };
19
    updatedAt: string;
20
    url: string;
21
}
22

23
const Home: React.FC = () => {
24
    const query = useSelector((state: RootState) => state.search.query);
25
    const currentPage = useSelector((state: RootState) => state.search.currentPage);
26
    const dispatch = useDispatch<AppDispatch>();
27

28
    const [searchRepositories, { data: searchData, loading: searchLoading }] = useLazyQuery(SEARCH_REPOS);
29
    const [getUserRepositories, { data: userData, loading: userLoading }] = useLazyQuery(GET_USER_REPOS);
30

31
    useEffect(() => {
32
        const variables = {
33
            first: 10,
34
            after: currentPage > 1 ? (query ? searchData?.search.pageInfo.endCursor : userData?.viewer.repositories.pageInfo.endCursor) : null
35
        };
36

37
        if (query) {
38
            searchRepositories({ variables: { ...variables, query } });
39
        } else {
40
            getUserRepositories({ variables });
41
        }
42
    }, [query, currentPage]);
43

44
    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
45
        dispatch(setQuery(e.target.value));
46
        dispatch(setCurrentPage(1));
47
    };
48

49
    const handlePageChange = (page: number) => {
50
        dispatch(setCurrentPage(page));
51
    };
52

53
    const repositories = query ? searchData?.search.edges : userData?.viewer.repositories.edges;
54

55
    return (
56
        <div className={styles.container}>
57
            <input
58
                type="text"
59
                className={styles.input}
60
                value={query}
61
                onChange={handleSearchChange}
62
                placeholder="Search repositories"
63
            />
64
            {(searchLoading || userLoading) && <p>Loading...</p>}
65
            <ul className={styles.box}>
66
                {repositories?.map(({ node }: { node: RepositoryNode }) => (
67
                    <li key={node.name} className={styles.item}>
68
                        <p>{node.owner.login}</p>
69
                        <Link to={`/repository/${node.owner.login}/${node.name}`}>{node.name}</Link> - {node.stargazers.totalCount} stars - {new Date(node.updatedAt).toLocaleDateString()} - <a href={node.url} target="_blank" rel="noopener noreferrer">GitHub</a>
70
                    </li>
71
                ))}
72
            </ul>
73
            <div className={styles.btn}>
74
                {[...Array(10)].map((_, i) => (
75
                    <button
76
                        key={`page-${i}`}
77
                        onClick={() => handlePageChange(i + 1)}
78
                        style={{ fontWeight: currentPage === i + 1 ? 'bold' : 'normal' }}
79
                    >
80
                        {i + 1}
81
                    </button>
82
                ))}
83
            </div>
84
        </div>
85
    );
86
};
87

88
export default Home;
89