Skip to content

Debug fullscreen render #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
Closed

Debug fullscreen render #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d1cdfdb
a
martinwq997 Nov 20, 2024
4ed7b7d
Merge pull request #6 from martinwq997/feature/homepage
martinwq997 Nov 20, 2024
26b5aac
The main features have been implemented
martinwq997 Nov 28, 2024
524d552
Merge branch 'crates-pro:main' into main
martinwq997 Nov 29, 2024
a0c67ea
Fixed the bug with the transparency of the version list, changed the …
martinwq997 Dec 1, 2024
6c0149d
Fixed the bug with the transparency of the version list, changed the …
martinwq997 Dec 1, 2024
45b85f6
Merge branch 'crates-pro:main' into main
martinwq997 Dec 1, 2024
7676ff2
Conclude merge after resolving conflicts
martinwq997 Dec 1, 2024
d91dcb7
Merge branch 'crates-pro:main' into main
martinwq997 Dec 2, 2024
55ea9ea
Fixed the fullscreen rendering bug
martinwq997 Dec 2, 2024
df33951
Merge branch 'main' of https://github.com/martinwq997/cratespro-frontend
martinwq997 Dec 2, 2024
dcb5e7f
debug Fullscreen-rendering
martinwq997 Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions app/context/CrateContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// context/HeaderContext.tsx
"use client";
import React, { createContext, useContext, useState } from 'react';

// 定义 cratesInfo 接口
export interface CratesInfo {
crate_name: string;
description: string;
dependencies: {
direct: number;
indirect: number;
};
dependents: {
direct: number;
indirect: number;
};
cves: {
cve_id: string;
url: string;
description: string;
}[];
versions: string[];
}

// 定义 HeaderContext 的类型
interface CrateData {
crateName: string | undefined;
crateVersion: string | string[] | undefined;
results: CratesInfo | null; // 存储 cratesInfo 数据
}

interface HeaderContextType {
crateData: CrateData;
setCrateData: React.Dispatch<React.SetStateAction<CrateData>>;
}

// 创建上下文，并设置默认值为 undefined
const HeaderContext = createContext<HeaderContextType | undefined>(undefined);

// 创建提供者组件
export const HeaderProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [crateData, setCrateData] = useState<CrateData>({
crateName: undefined,
crateVersion: undefined,
results: null,
});

// 这里可以添加一些副作用，例如在 crateData 更新时执行某些操作

return (
<HeaderContext.Provider value={{ crateData, setCrateData }}>
{children}
</HeaderContext.Provider>
);
};

// 创建一个自定义 Hook 用于使用上下文
export const useHeaderContext = (): HeaderContextType => {
const context = useContext(HeaderContext);
if (context === undefined) {
throw new Error('useHeaderContext must be used within a HeaderProvider');
}
return context;
};
101 changes: 7 additions & 94 deletions app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
//Dependencies页面
"use client";
import React, { useEffect, useState } from 'react';
import { useParams } from 'next/navigation'
import Link from 'next/link';

import DependencyTable from '../../../../../../../components/DependencyTable';
import { dependenciesInfo } from '@/app/lib/all_interface';


const CratePage = () => {
const params = useParams();

const [results, setResults] = useState<dependenciesInfo | null>(null);
const [searchQuery, setSearchQuery] = useState('');


const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

const crateName = params.name; // 从 URL 中获取 crate_name 参数
const version = params.version; // 从 URL 中获取 version 参数


useEffect(() => {
const fetchCrateData = async () => {
Expand Down Expand Up @@ -45,100 +46,12 @@ const CratePage = () => {
if (error) return <div className="text-red-500">Error: {error}</div>;
// console.log('dependencyyyyyyyyyyyyyyy', results?.data);
return (
<div>
<>
{/* Existing header and search */}
<header className="bg-white shadow p-4">
<div className="flex justify-between items-center">
<div className="text-xl font-bold flex flex-col items-start space-y-1">
<Link href="/homepage">
<div className="flex items-center space-x-1">
<span>open</span>
<span className="text-green-500">/</span>
<span>source</span>
<span className="text-green-500">/</span>
<span>insights</span>
</div>
</Link>
<div className="flex items-center space-x-2 mt-15">
<span>{crateName}</span>
<div className="relative">
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
{version}
<svg
className="ml-2 w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
</button>
{/* 这里可以添加版本选择的下拉菜单 */}
</div>
</div>
</div>
<div className="flex items-center mb-4">
<input
type="text"
placeholder="Search for open source crates"
className="p-2 border-none rounded-md text-gray-800 w-80 max-w-2xl"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} // 更新搜索内容
/>
<Link href={{
pathname: '/homepage/search',
query: {
crate_name: searchQuery, // 将搜索内容作为参数传递给新页面
},
}}>
<button className="bg-teal-600 text-white rounded-md p-2 ml-2 hover:bg-teal-700">Search</button>
</Link>
</div>
</div>

{/* 导航栏 */}
<nav className="mt-4">
<ul className="flex space-x-4 text-gray-500 relative">
<li className="cursor-pointer relative">
<Link
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`}
>
<div className="block py-2 relative z-10">Overview</div>
</Link>
</li>
<li className="cursor-pointer relative">
<Link
href={
`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies`}
>
<div className="block py-2 relative z-10">Dependencies</div>
</Link>
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
</li>

<Link
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependents`}
>
<li className="cursor-pointer relative">
<div className="block py-2 relative z-10">Dependents</div>
</li>
</Link>
{/* <li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Compare</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Versions</a>
</li> */}
</ul>
</nav>
</header>

<DependencyTable data={results?.data} />
</>

</div>
);
};

Expand Down
94 changes: 5 additions & 89 deletions app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependents/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
//Dependents页面
"use client";
import React, { useEffect, useState } from 'react';
import Link from 'next/link';

import DependentTable from '../../../../../../../components/DependentTable';
import { dependentsInfo } from '@/app/lib/all_interface';
import { useParams } from 'next/navigation';



const CratePage = () => {
const [results, setResults] = useState<dependentsInfo | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

const params = useParams();

const crateName = params.name; // 从 URL 中获取 crate_name 参数
const version = params.version; // 从 URL 中获取 version 参数


useEffect(() => {
const fetchCrateData = async () => {
Expand Down Expand Up @@ -43,95 +44,10 @@ const CratePage = () => {
if (loading) return <div>Loading...</div>;
if (error) return <div className="text-red-500">Error: {error}</div>;

//console.log('dependencyyyyyyyyyyyyyyy', results?.data);


return (
<div>
{/* Existing header and search */}
<header className="bg-white shadow p-4">
<div className="flex justify-between items-center">
<div className="text-xl font-bold flex flex-col items-start space-y-1">
<Link href="/homepage">
<div className="flex items-center space-x-1">
<span>open</span>
<span className="text-green-500">/</span>
<span>source</span>
<span className="text-green-500">/</span>
<span>insights</span>
</div>
</Link>
<div className="flex items-center space-x-2 mt-15">
<span>{crateName}</span>
<div className="relative">
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
{version}
<svg
className="ml-2 w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
</button>
{/* 这里可以添加版本选择的下拉菜单 */}
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<input
type="text"
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Search..."
/>
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
Search
</button>
</div>
</div>

{/* 导航栏 */}
<nav className="mt-4">
<ul className="flex space-x-4 text-gray-500 relative">
<li className="cursor-pointer relative">
<Link
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}`}
>
<div className="block py-2 relative z-10">Overview</div>
</Link>

</li>
<li className="cursor-pointer relative">
<Link
href={
`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies`}
>
<div className="block py-2 relative z-10">Dependencies</div>
</Link>
</li>

<Link
href={`/homepage/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependents`}
>
<li className="cursor-pointer relative">
<div className="block py-2 relative z-10">Dependents</div>
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
</li>
</Link>
{/* <li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Compare</a>
</li>
<li className="cursor-pointer relative">
<a href="#" className="block py-2 relative z-10">Versions</a>
</li> */}
</ul>
</nav>

</header>


<DependentTable data={results?.data} />

Expand Down
Loading
Loading