2023-04-23 08:26:39 -05:00
// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
2023-05-15 15:45:06 -05:00
import ClickAwayHandler from "@/components/ClickAwayHandler" ;
2023-03-28 02:31:50 -05:00
import LinkList from "@/components/LinkList" ;
2023-05-15 15:45:06 -05:00
import RadioButton from "@/components/RadioButton" ;
2023-05-14 10:41:08 -05:00
import MainLayout from "@/layouts/MainLayout" ;
2023-03-28 02:31:50 -05:00
import useLinkStore from "@/store/links" ;
2023-05-15 15:45:06 -05:00
import { faBookmark , faSort } from "@fortawesome/free-solid-svg-icons" ;
2023-04-23 08:26:39 -05:00
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" ;
2023-05-15 15:45:06 -05:00
import { ChangeEvent , useEffect , useState } from "react" ;
2023-03-28 02:31:50 -05:00
export default function Links() {
const { links } = useLinkStore ( ) ;
2023-05-15 15:45:06 -05:00
const [ sortDropdown , setSortDropdown ] = useState ( false ) ;
const [ sortBy , setSortBy ] = useState ( "Name (A-Z)" ) ;
const [ sortedLinks , setSortedLinks ] = useState ( links ) ;
const handleSortChange = ( event : ChangeEvent < HTMLInputElement > ) = > {
setSortBy ( event . target . value ) ;
} ;
useEffect ( ( ) = > {
const linksArray = [ . . . links ] ;
if ( sortBy === "Name (A-Z)" )
setSortedLinks ( linksArray . sort ( ( a , b ) = > a . name . localeCompare ( b . name ) ) ) ;
else if ( sortBy === "Title (A-Z)" )
setSortedLinks ( linksArray . sort ( ( a , b ) = > a . title . localeCompare ( b . title ) ) ) ;
else if ( sortBy === "Name (Z-A)" )
setSortedLinks ( linksArray . sort ( ( a , b ) = > b . name . localeCompare ( a . name ) ) ) ;
else if ( sortBy === "Title (Z-A)" )
setSortedLinks ( linksArray . sort ( ( a , b ) = > b . title . localeCompare ( a . title ) ) ) ;
else if ( sortBy === "Date (Newest First)" )
setSortedLinks (
linksArray . sort (
( a , b ) = >
2023-05-28 00:55:49 -05:00
new Date ( b . createdAt as string ) . getTime ( ) -
new Date ( a . createdAt as string ) . getTime ( )
2023-05-15 15:45:06 -05:00
)
) ;
else if ( sortBy === "Date (Oldest First)" )
setSortedLinks (
linksArray . sort (
( a , b ) = >
2023-05-28 00:55:49 -05:00
new Date ( a . createdAt as string ) . getTime ( ) -
new Date ( b . createdAt as string ) . getTime ( )
2023-05-15 15:45:06 -05:00
)
) ;
} , [ links , sortBy ] ) ;
2023-03-28 02:31:50 -05:00
return (
2023-05-14 10:41:08 -05:00
< MainLayout >
2023-04-30 15:54:40 -05:00
< div className = "p-5 flex flex-col gap-5 w-full" >
2023-05-15 15:45:06 -05:00
< div className = "flex gap-3 justify-between items-center" >
2023-04-30 15:54:40 -05:00
< div className = "flex gap-2 items-center" >
< FontAwesomeIcon
icon = { faBookmark }
className = "w-5 h-5 text-sky-300"
/ >
< p className = "text-lg text-sky-900" > All Links < / p >
< / div >
2023-05-15 15:45:06 -05:00
< div className = "relative" >
< div
onClick = { ( ) = > setSortDropdown ( ! sortDropdown ) }
id = "sort-dropdown"
className = "inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
>
< FontAwesomeIcon
icon = { faSort }
id = "sort-dropdown"
className = "w-5 h-5 text-gray-500"
/ >
< / div >
{ sortDropdown ? (
< ClickAwayHandler
onClickOutside = { ( e : Event ) = > {
const target = e . target as HTMLInputElement ;
if ( target . id !== "sort-dropdown" ) setSortDropdown ( false ) ;
} }
className = "absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-48"
>
< p className = "mb-2 text-sky-900 text-center font-semibold" >
Sort by
< / p >
< div className = "flex flex-col gap-2" >
< RadioButton
label = "Name (A-Z)"
state = { sortBy === "Name (A-Z)" }
onClick = { handleSortChange }
/ >
< RadioButton
label = "Name (Z-A)"
state = { sortBy === "Name (Z-A)" }
onClick = { handleSortChange }
/ >
< RadioButton
label = "Title (A-Z)"
state = { sortBy === "Title (A-Z)" }
onClick = { handleSortChange }
/ >
< RadioButton
label = "Title (Z-A)"
state = { sortBy === "Title (Z-A)" }
onClick = { handleSortChange }
/ >
< RadioButton
label = "Date (Newest First)"
state = { sortBy === "Date (Newest First)" }
onClick = { handleSortChange }
/ >
< RadioButton
label = "Date (Oldest First)"
state = { sortBy === "Date (Oldest First)" }
onClick = { handleSortChange }
/ >
< / div >
< / ClickAwayHandler >
) : null }
< / div >
2023-04-23 08:26:39 -05:00
< / div >
2023-05-24 19:51:29 -05:00
< div className = "grid 2xl:grid-cols-3 xl:grid-cols-2 gap-5" >
{ sortedLinks . map ( ( e , i ) = > {
return < LinkList key = { i } link = { e } count = { i } / > ;
} ) }
< / div >
2023-04-23 08:26:39 -05:00
< / div >
2023-05-14 10:41:08 -05:00
< / MainLayout >
2023-03-28 02:31:50 -05:00
) ;
}