1- import { HoverCard , HoverCardContent , HoverCardTrigger } from "@/components/ui/hover-card"
2- import { toast } from "@/components/ui/use-toast"
3- import { cn } from "@/lib/utils"
4- import cytoscape from "cytoscape"
5- import { ChevronLeft , ChevronRight } from "lucide-react"
6- import { Dispatch , MutableRefObject , SetStateAction , useState } from "react"
7- import { Graph } from "./model"
8- import { LAYOUT } from "./code-graph"
9-
10- interface Props {
11- commits : any [ ]
12- currentCommit : number
13- setCurrentCommit : Dispatch < SetStateAction < number > >
14- commitIndex : number
15- setCommitIndex : Dispatch < SetStateAction < number > >
16- graph : Graph ,
17- chartRef : MutableRefObject < cytoscape . Core | null >
18- }
19-
20- const COMMIT_LIMIT = 7
21-
22- export default function CommitList ( { commitIndex, commits, currentCommit, setCommitIndex, setCurrentCommit, graph, chartRef } : Props ) {
23-
24- const [ commitChanges , setCommitChanges ] = useState < any > ( )
25-
26- const handelCommitChange = async ( commit : any ) => {
27- const chart = chartRef . current
28-
29- if ( ! chart ) return
30-
31- const result = await fetch ( `api/repo/${ graph . Id } /?type=switchCommit` , {
32- method : 'POST' ,
33- } )
34-
35- if ( ! result . ok ) {
36- toast ( {
37- title : "Uh oh! Something went wrong" ,
38- description : ( await result . text ( ) ) ,
39- } )
40- return
41- }
42-
43- const json = await result . json ( )
44-
45- json . result . deletions . nodes . forEach ( ( e : any ) => {
46- chart . remove ( `#${ e . id } ` )
47- graph . NodesMap . delete ( e . id )
48- graph . Elements . splice ( graph . Elements . findIndex ( ( el ) => el . data . id === e . id ) , 1 )
49- } )
50-
51- json . result . deletions . edges . forEach ( ( e : any ) => {
52- chart . remove ( `#_${ e . id } ` )
53- graph . EdgesMap . delete ( e . id )
54- graph . Elements . splice ( graph . Elements . findIndex ( ( el ) => el . data . id === e . id ) , 1 )
55- } )
56-
57- const additionsIds = chart . add ( graph . extend ( json . result . additions ) )
58- . filter ( ( e ) => e . isNode ( ) ) . style ( { "border-color" : "pink" , "border-width" : 2 , "border-opacity" : 1 } )
59- . map ( ( e ) => e . id ( ) ) !
60-
61- const g = Graph . empty ( )
62- g . extend ( json . result . modifications )
63-
64- const modifiedIds = g . Elements . map ( ( e ) => {
65- const graphElement = graph . Elements . find ( ( el ) => el . data . id === e . data . id )
66- graphElement . data = e . data
67-
68- if ( "category" in e . data ) {
69- chart . $ ( `#${ e . data . id } ` ) . data ( e . data ) . style ( { "border-color" : "blue" , "border-width" : 2 , "border-opacity" : 1 } )
70- }
71-
72- return e . data . id
73- } )
74-
75- chart . layout ( LAYOUT ) . run ( )
76-
77- setCommitChanges ( { additionsIds, modifiedIds } )
78- setCurrentCommit ( commit . hash )
79- }
80-
81- return (
82- < footer className = 'bg-gray-200 flex border border-gray-300 rounded-b-md' >
83- < button
84- className = 'p-4 border-r border-gray-300'
85- onClick = { ( ) => {
86- setCommitIndex ( prev => prev - 1 )
87- } }
88- disabled = { commitIndex - COMMIT_LIMIT === 0 }
89- >
90- {
91- commitIndex - COMMIT_LIMIT !== 0 ?
92- < ChevronLeft />
93- : < div className = 'h-6 w-6' />
94- }
95- </ button >
96- < ul className = 'w-1 grow flex p-3 justify-between gap-4' >
97- {
98- commits . slice ( commitIndex - COMMIT_LIMIT , commitIndex ) . map ( ( commit : any ) => {
99- const date = new Date ( commit . date * 1000 )
100- const month = `${ date . getDate ( ) } ${ date . toLocaleString ( 'default' , { month : 'short' } ) } `
101- const hour = `${ date . getHours ( ) } :${ date . getMinutes ( ) . toString ( ) . padStart ( 2 , '0' ) } `
102- return (
103- < HoverCard
104- key = { commit . hash }
105- >
106- < HoverCardTrigger asChild >
107- < li
108- className = { cn ( currentCommit === commit . hash && "bg-white" , "grow p-1 rounded-md" ) }
109- >
110- < button
111- className = 'w-full flex items-center justify-center gap-2'
112- onClick = { ( ) => handelCommitChange ( commit ) }
113- >
114- < p title = { month } > { month } </ p >
115- < p className = 'text-gray-400' title = 'hour' > { hour } </ p >
116- </ button >
117- </ li >
118- </ HoverCardTrigger >
119- < HoverCardContent className = 'bg-[#F9F9F9] flex flex-col gap-2 p-4 w-fit max-w-[70%]' >
120- < h1 className = 'text-bold' > { commit . author } </ h1 >
121- < p > { commit . message } </ p >
122- < p className = 'text-[#7D7D7D] truncate' title = { commit . hash } > { commit . hash } </ p >
123- </ HoverCardContent >
124- </ HoverCard >
125- )
126- } )
127- }
128- </ ul >
129- < button
130- className = 'p-4 border-l border-gray-300'
131- onClick = { ( ) => {
132- setCommitIndex ( prev => prev + 1 )
133- } }
134- disabled = { commitIndex === commits . length }
135- >
136- {
137- commitIndex !== commits . length ?
138- < ChevronRight />
139- : < div className = 'h-6 w-6' />
140- }
141- </ button >
142- </ footer >
143- )
144- }
1+ // import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
2+ // import { toast } from "@/components/ui/use-toast"
3+ // import { cn } from "@/lib/utils"
4+ // import cytoscape from "cytoscape"
5+ // import { ChevronLeft, ChevronRight } from "lucide-react"
6+ // import { Dispatch, MutableRefObject, SetStateAction, useState } from "react"
7+ // import { Graph } from "./model"
8+ // import { LAYOUT } from "./code-graph"
9+
10+ // interface Props {
11+ // commits: any[]
12+ // currentCommit: number
13+ // setCurrentCommit: Dispatch<SetStateAction<number>>
14+ // commitIndex: number
15+ // setCommitIndex: Dispatch<SetStateAction<number>>
16+ // graph: Graph,
17+ // chartRef: MutableRefObject<cytoscape.Core | null>
18+ // }
19+
20+ // const COMMIT_LIMIT = 7
21+
22+ // export default function CommitList({ commitIndex, commits, currentCommit, setCommitIndex, setCurrentCommit, graph, chartRef }: Props) {
23+
24+ // const [commitChanges, setCommitChanges] = useState<any>()
25+
26+ // const handelCommitChange = async (commit: any) => {
27+ // const chart = chartRef.current
28+
29+ // if (!chart) return
30+
31+ // const result = await fetch(`api/repo/${graph.Id}/?type=switchCommit`, {
32+ // method: 'POST',
33+ // })
34+
35+ // if (!result.ok) {
36+ // toast({
37+ // title: "Uh oh! Something went wrong",
38+ // description: (await result.text()),
39+ // })
40+ // return
41+ // }
42+
43+ // const json = await result.json()
44+
45+ // json.result.deletions.nodes.forEach((e: any) => {
46+ // chart.remove(`#${e.id}`)
47+ // graph.NodesMap.delete(e.id)
48+ // graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
49+ // })
50+
51+ // json.result.deletions.edges.forEach((e: any) => {
52+ // chart.remove(`#_${e.id}`)
53+ // graph.EdgesMap.delete(e.id)
54+ // graph.Elements.splice(graph.Elements.findIndex((el) => el.data.id === e.id), 1)
55+ // })
56+
57+ // const additionsIds = chart.add(graph.extend(json.result.additions))
58+ // .filter((e) => e.isNode()).style({ "border-color": "pink", "border-width": 2, "border-opacity": 1 })
59+ // .map((e) => e.id())!
60+
61+ // const g = Graph.empty()
62+ // g.extend(json.result.modifications)
63+
64+ // const modifiedIds = g.Elements.map((e) => {
65+ // const graphElement = graph.Elements.find((el) => el.data.id === e.data.id)
66+ // graphElement.data = e.data
67+
68+ // if ("category" in e.data) {
69+ // chart.$(`#${e.data.id}`).data(e.data).style({ "border-color": "blue", "border-width": 2, "border-opacity": 1 })
70+ // }
71+
72+ // return e.data.id
73+ // })
74+
75+ // chart.layout(LAYOUT).run()
76+
77+ // setCommitChanges({ additionsIds, modifiedIds })
78+ // setCurrentCommit(commit.hash)
79+ // }
80+
81+ // return (
82+ // <footer className='bg-gray-200 flex border border-gray-300 rounded-b-md'>
83+ // <button
84+ // className='p-4 border-r border-gray-300'
85+ // onClick={() => {
86+ // setCommitIndex(prev => prev - 1)
87+ // }}
88+ // disabled={commitIndex - COMMIT_LIMIT === 0}
89+ // >
90+ // {
91+ // commitIndex - COMMIT_LIMIT !== 0 ?
92+ // <ChevronLeft />
93+ // : <div className='h-6 w-6' />
94+ // }
95+ // </button>
96+ // <ul className='w-1 grow flex p-3 justify-between gap-4'>
97+ // {
98+ // commits.slice(commitIndex - COMMIT_LIMIT, commitIndex).map((commit: any) => {
99+ // const date = new Date(commit.date * 1000)
100+ // const month = `${date.getDate()} ${date.toLocaleString('default', { month: 'short' })}`
101+ // const hour = `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
102+ // return (
103+ // <HoverCard
104+ // key={commit.hash}
105+ // >
106+ // <HoverCardTrigger asChild>
107+ // <li
108+ // className={cn(currentCommit === commit.hash && "bg-white", "grow p-1 rounded-md")}
109+ // >
110+ // <button
111+ // className='w-full flex items-center justify-center gap-2'
112+ // onClick={() => handelCommitChange(commit)}
113+ // >
114+ // <p title={month}>{month}</p>
115+ // <p className='text-gray-400' title='hour'>{hour}</p>
116+ // </button>
117+ // </li>
118+ // </HoverCardTrigger>
119+ // <HoverCardContent className='bg-[#F9F9F9] flex flex-col gap-2 p-4 w-fit max-w-[70%]'>
120+ // <h1 className='text-bold'>{commit.author}</h1>
121+ // <p>{commit.message}</p>
122+ // <p className='text-[#7D7D7D] truncate' title={commit.hash}>{commit.hash}</p>
123+ // </HoverCardContent>
124+ // </HoverCard>
125+ // )
126+ // })
127+ // }
128+ // </ul>
129+ // <button
130+ // className='p-4 border-l border-gray-300'
131+ // onClick={() => {
132+ // setCommitIndex(prev => prev + 1)
133+ // }}
134+ // disabled={commitIndex === commits.length}
135+ // >
136+ // {
137+ // commitIndex !== commits.length ?
138+ // <ChevronRight />
139+ // : <div className='h-6 w-6' />
140+ // }
141+ // </button>
142+ // </footer>
143+ // )
144+ // }
0 commit comments