Fix/renamings positionings

packages/client/src/app/admin/page.tsx

@@ -1,4 +1,4 @@
-import SubmissionCard from '@/components/submission/AdminSubmissionCard'
+import AdminSubmissionCard from '@/components/submission/AdminSubmissionCard'
 import { getAllSubmissions } from '@/network/getAllSubmissions'
 
 export default async function Page() {
@@ -13,11 +13,26 @@ export default async function Page() {
  <h1>
  <span className='italic'>zs</span>admin
  </h1>
- <div className='flex flex-wrap justify-center gap-4 px-4'>
- {submissions.map(submission => (
- <SubmissionCard key={submission.id} submission={submission} />
- ))}
- </div>
+ {submissions.pendingSubmissions.length > 0 && (
+ <>
+ <h2 className='ml-8'>Bírálatlan</h2>
+ <div className='flex flex-wrap justify-center gap-4 px-4'>
+ {submissions.pendingSubmissions.map(submission => (
+ <AdminSubmissionCard key={submission.id} submission={submission} />
+ ))}
+ </div>
+ </>
+ )}
+ {submissions.reviewedSubmissions.length > 0 && (
+ <>
+ <h2 className='ml-8'>Elbírált</h2>
+ <div className='flex flex-wrap justify-center gap-4 px-4'>
+ {submissions.reviewedSubmissions.map(submission => (
+ <AdminSubmissionCard key={submission.id} submission={submission} />
+ ))}
+ </div>
+ </>
+ )}
  </>
  )
 }

packages/client/src/app/links/page.tsx

@@ -16,20 +16,23 @@ export default function Links() {
  return (
  <main>
  <div className='flex flex-col items-end'>
- <SearchField searchPhrase={searchTerm} onSubmit={setSearchTerm} />
+ <div className='flex items-center'>
+ {profile.data && (
+ <Button asChild className='text-lg'>
+ <Link href='/links/new'>
+ <TbLink />
+ <span className='ml-4 max-md:hidden'>Új link javaslat</span>
+ </Link>
+ </Button>
+ )}
+ <SearchField searchPhrase={searchTerm} onSubmit={setSearchTerm} />
+ </div>
  <div className='flex w-full flex-wrap items-start justify-center gap-x-5 p-5'>
  {links.map(link => (
  <LinkWidget link={link} key={link.id} />
  ))}
  </div>
  </div>
- {profile.data && (
- <Button asChild>
- <Link href='/links/new'>
- <TbLink /> Új link
- </Link>
- </Button>
- )}
  </main>
  )
 }

packages/client/src/app/page.tsx

@@ -11,7 +11,6 @@ export default async function Home() {
 
  return (
  <main className='overflow-y-hidden'>
- <h1>StartlapSCH</h1>
  <FavLinksContainer title='Felkapottak' links={links}></FavLinksContainer>
  {favLinks.success && <FavLinksContainer title='Kedvencek' links={favLinks.link}></FavLinksContainer>}
  {/* <Carousel items={DummyCollections} name="Kollekciók" /> */}

packages/client/src/components/collection/CollectionListItem.tsx

@@ -17,7 +17,7 @@ export function CollectionListItem({ collection }: Props) {
  return (
  <Link href={'/collections/' + collection.id} className='relative h-64 w-96 overflow-hidden rounded-xl'>
  <div className='absolute -z-10 h-full w-full'>
- <div className='absolute flex h-6 w-full flex-row items-center rounded-t-xl bg-red-400'></div>
+ <div className='absolute flex h-6 w-full flex-row items-center rounded-t-xl bg-blue-400'></div>
  <Image
  src={hasImageError ? fallbackImage : collection.bannerUrl}
  alt={collection.name}
@@ -28,7 +28,7 @@ export function CollectionListItem({ collection }: Props) {
  </div>
  <div className='relative flex flex-col justify-between bg-gradient-to-b px-5 pb-10 pt-6 text-white'>
  <h2 className='pb-2'> {collection.name}</h2>
- <p>Linkek: {collection.links}</p>
+ <p>{collection.links} link</p>
  </div>
  </Link>
  )

packages/client/src/components/collection/CollectionsContainer.tsx

@@ -1,5 +1,4 @@
 'use client'
-import { clsx } from 'clsx'
 import Link from 'next/link'
 import { useState } from 'react'
 import { TbPlus } from 'react-icons/tb'
@@ -27,25 +26,25 @@ export default function CollectionsContainer({ collections }: Props) {
  }
 
  return (
- <>
- <div className='flex flex-col items-center justify-between p-8 md:flex-row'>
- <h1 className='m-0'>Kollekciók</h1>
- <SearchField onSubmit={Filter} searchPhrase={''}></SearchField>
+ <main>
+ <div className='flex flex-col items-end'>
+ <div className='flex items-center'>
+ {profile.data && (
+ <Button asChild className='text-lg'>
+ <Link href='/collections/new'>
+ <TbPlus />
+ <span className='ml-4 max-md:hidden'>Új kollekció</span>
+ </Link>
+ </Button>
+ )}
+ <SearchField searchPhrase={''} onSubmit={Filter} />
+ </div>
+ <div className='flex w-full flex-wrap items-start justify-center gap-4 p-4'>
+ {filteredCollections.map(collection => (
+ <CollectionListItem collection={collection} key={collection.id} />
+ ))}
+ </div>
  </div>
-
- <div className={clsx('flex flex-wrap justify-center gap-4 p-4')}>
- {filteredCollections.map(curCollection => (
- <CollectionListItem collection={curCollection} key={curCollection.id} />
- ))}
- </div>
- {profile.data && (
- <Button asChild>
- <Link href='/collections/new'>
- <TbPlus />
- Új kollekció
- </Link>
- </Button>
- )}
- </>
+ </main>
  )
 }

packages/client/src/components/keywords/Keywords.tsx

@@ -0,0 +1,14 @@
+export default function Keywords({ keywords }: { keywords: string[] }) {
+ return (
+ <>
+ {keywords.map((keyword: string, _index) => (
+ <div
+ key={_index}
+ className={'m-1 inline-block w-fit rounded bg-gray-100 px-2 py-1 ease-in-out hover:bg-gray-300 hover:transition hover:duration-100'}
+ >
+ {keyword}
+ </div>
+ ))}
+ </>
+ )
+}

packages/client/src/components/keywords/SmallKeywords.tsx

@@ -0,0 +1,14 @@
+export default function SmallKeywords({ keywords }: { keywords: string[] }) {
+ return (
+ <>
+ {keywords.map((keyword: string, _index) => (
+ <div
+ key={_index}
+ className={'m-1 inline-block w-fit rounded bg-gray-100 px-2 py-1 text-xs ease-in-out hover:bg-gray-300 hover:transition hover:duration-100'}
+ >
+ {keyword}
+ </div>
+ ))}
+ </>
+ )
+}

packages/client/src/components/links/LinkWidget.tsx

@@ -3,10 +3,10 @@ import '../../app/globals.css'
 
 import axios from 'axios'
 import { useRouter } from 'next/navigation'
-import React from 'react'
-import { BsFire } from 'react-icons/bs'
-import { FaRegStar, FaStar } from 'react-icons/fa'
+import React, { useEffect } from 'react'
+import { BsFire, BsStar, BsStarFill } from 'react-icons/bs'
 
+import SmallKeywords from '@/components/keywords/SmallKeywords'
 import { useProfile } from '@/hooks/queries/use-profile'
 import { cn } from '@/lib/utils'
 import { LinkEntity } from '@/types/link.type'
@@ -20,14 +20,17 @@ export default function LinkWidget(props: Props) {
  const link = props.link
  const router = useRouter()
  const user = useProfile()
+ const [isOptimisticallyFavourite, setIsOptimisticallyFavourite] = React.useState(false)
 
  const makeFavorite = async (e: React.MouseEvent<SVGElement>) => {
  e.stopPropagation()
+ setIsOptimisticallyFavourite(true)
  await axios.post('/api/favorites/', { id: link.id })
  router.refresh()
  }
  const removeFavorite = async (e: React.MouseEvent<SVGElement>) => {
  e.stopPropagation()
+ setIsOptimisticallyFavourite(false)
  await axios.delete('/api/favorites/' + link.id)
  router.refresh()
  }
@@ -37,20 +40,23 @@ export default function LinkWidget(props: Props) {
  window.open(process.env.NEXT_PUBLIC_API_URL + '/links/visit/' + link.slug)
  }
 
+ useEffect(() => {
+ setIsOptimisticallyFavourite(link.isFavorite)
+ }, [link])
+
  return (
  <div
  //Fake link for preview
  title={link.url}
- className='flex-no-wrap bg-blue flex w-80 cursor-pointer flex-col items-center overflow-hidden rounded-xl p-2'
+ className='flex-no-wrap bg-blue min-w-80 flex w-max cursor-pointer flex-col items-center rounded-xl p-2'
  onClick={e => visitLink(e)}
  >
  <div className='-z-1 -mb-3 flex h-6 w-full flex-row items-center rounded-t-xl bg-red-400'></div>
 
- <div className='h-35 relative w-full overflow-hidden rounded-xl bg-white p-2'>
- <div className=' flex flex-grow flex-row'>
- {/* eslint-disable-next-line @next/next/no-img-element */}
+ <div className='h-35 relative w-fit rounded-xl bg-white p-2'>
+ <div className='flex w-full flex-row'>
  <img
- className={cn('ml-0 aspect-square flex-none', link.iconUrl === null ? 'h-8 w-8' : 'h-1/6 w-1/6')}
+ className={cn('ml-0 aspect-square flex-none', link.iconUrl === null ? 'h-8 w-8' : 'h-8 w-8')}
  src={
  link.iconUrl === null
  ? `https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url.replace(
@@ -63,30 +69,31 @@ export default function LinkWidget(props: Props) {
  width={100}
  height={100}
  />
- <div className='ml-2 h-2/3 flex-grow overflow-hidden'>
- <div className='flex justify-between'>
- <h2 className='flex basis-5/6 overflow-hidden overflow-ellipsis text-3xl'>{link.title}</h2>
- <div className='flex basis-1/6 justify-end rounded p-0.5 align-super text-3xl'>
+ <div className='ml-2 h-2/3 w-full'>
+ <div className='flex w-full justify-between'>
+ <h2 className='text-nowrap flex text-3xl'>{link.title}</h2>
+ <div className='ml-4 flex items-center'>
+ {/*{!!props.visits && props.visits > 10 && (*/}
+ <div className={'mr-2 flex items-center'} title='Kattintások száma'>
+ <BsFire color={'red'} size={18} className='inline' />
+ <h4 className={'text-s'}>{props.visits}32</h4>
+ </div>
+ {/*)}*/}
  {user.data &&
- (!link.isFavorite ? (
- <FaRegStar className='text-slate-500 hover:text-amber-300' title='Favorite' onClick={e => makeFavorite(e)} />
+ (!(link.isFavorite || isOptimisticallyFavourite) ? (
+ <BsStar className='text-slate-500 hover:text-amber-300' size={20} title='Kedvelem' onClick={e => makeFavorite(e)} />
  ) : (
- <FaStar className='text-amber-300 hover:text-amber-200' title='Unfavorite' onClick={e => removeFavorite(e)} />
+ <BsStarFill className='text-amber-300 hover:text-amber-200' size={20} title='Nem kedvelem' onClick={e => removeFavorite(e)} />
  ))}
  </div>
  </div>
  <h4 className='text-xs'>{link.url}</h4>
- {!!props.visits && props.visits > 10 && (
- <div className={'absolute bottom-2 right-2 flex items-center'} title='Kattintások száma'>
- <BsFire color={'red'} size={14} className='inline' />
- <h4 className={'text-s'}>{props.visits}</h4>
- </div>
- )}
  </div>
  </div>
  <div className='ml-2'>
  <p className='mt-2 overflow-hidden overflow-ellipsis whitespace-nowrap text-base'>{link.description}</p>
  </div>
+ <SmallKeywords keywords={link.keywords} />
  </div>
  </div>
  )

packages/client/src/components/links/favLinksContainer.tsx

@@ -37,7 +37,7 @@ export default function FavLinksContainer({ title, links }: Props) {
  <h1>{title}</h1>
  <div className='flex pl-4' ref={containerRef} style={{ overflowX: 'hidden' }}>
  {links.map(link => (
- <div className='w-80' key={link.id}>
+ <div key={link.id}>
  <LinkWidget link={link} visits={link.visits} />
  </div>
  ))}

packages/client/src/components/navbar/navbar.tsx

@@ -31,10 +31,10 @@ export default function Navbar() {
  <nav className='mr-auto items-center max-md:hidden'>
  <ul className='flex space-x-4 px-10'>
  <li>
- <Link href='/links'>Links</Link>
+ <Link href='/links'>Linkek</Link>
  </li>
  <li>
- <Link href='/collections'>Collections</Link>
+ <Link href='/collections'>Gyűjtemények</Link>
  </li>
  </ul>
  </nav>

packages/client/src/components/navbar/user-display.tsx

@@ -1,5 +1,6 @@
 import Cookies from 'js-cookie'
 import Link from 'next/link'
+import { redirect } from 'next/navigation'
 
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
@@ -29,10 +30,8 @@ export function UserDisplay() {
  <Button variant='outline'>{profile.data.firstName}</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
+ <DropdownMenuItem onClick={() => redirect('/profile')}>Profila</DropdownMenuItem>
  <DropdownMenuItem onClick={onLogout}>Kijelentkezés</DropdownMenuItem>
- <DropdownMenuItem>
- <Link href='/profile'>Profil</Link>
- </DropdownMenuItem>
  </DropdownMenuContent>
  </DropdownMenu>
  </>

packages/client/src/components/submission/AdminSubmissionCard.tsx

@@ -2,6 +2,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
+import Keywords from '@/components/keywords/Keywords'
 import { Button } from '@/components/ui/button'
 import Popup from '@/components/ui/Popup'
 import { useSubmissionChangeStatus } from '@/hooks/mutations/use-submission-change-status'
@@ -35,23 +36,23 @@ export default function AdminSubmissionCard({ submission }: { submission: Submis
  : submission.iconUrl
 
  return (
- <div className='flex w-96 flex-col items-center rounded-xl p-2'>
+ <div className='flex w-96 flex-col items-center overflow-clip rounded-xl p-2'>
  <div className={`-z-1 ${getStatusColor(submission.status)} -mb-3 flex h-10 w-full items-center rounded-t-xl p-1`}>
- <h4 className='-mt-2 w-full text-center'>{submission.id}</h4>
+ <h4 className='-mt-2 w-full text-center'>ADMIN: {submission.id}</h4>
  </div>
- <div className='relative w-full rounded-xl bg-white p-2 pb-1'>
- <div className='ml-2 flex'>
+ <div className='relative w-full rounded-xl bg-white p-2 pb-4'>
+ <div className='ml-2 flex w-full'>
  <img
  className={cn('ml-0 mt-2 aspect-square flex-none', submission.iconUrl === null ? 'h-8 w-8' : 'h-1/6 w-1/6')}
  src={iconSrc}
  alt='ikon'
  width={100}
  height={100}
  />
- <div className='ml-2 h-2/3 flex-grow'>
+ <div className='ml-2 h-2/3 w-full'>
  <h2 className=' text-3xl'>{submission.title}</h2>
  <Link href={submission.url} target='_blank'>
- <h4 className='mt-2 text-xs'>{submission.url}</h4>
+ <h4 className='mt-2  text-xs'>{submission.url}</h4>
  </Link>
  </div>
  </div>
@@ -61,14 +62,7 @@ export default function AdminSubmissionCard({ submission }: { submission: Submis
  <h6>leírás</h6>
  <p className='text-base'>{submission.description}</p>
  <h6>kulcsszavak</h6>
- {submission.keywords.map((keyword: string, _index) => (
- <div
- key={_index}
- className={'m-1 inline-block w-fit rounded bg-gray-100 px-2 py-1 ease-in-out hover:bg-gray-300 hover:transition hover:duration-100'}
- >
- {keyword}
- </div>
- ))}
+ <Keywords keywords={submission.keywords} />
  {submission.oldLinkId && (
  <>
  <h6>elavult link Id:</h6>