Fix missing image recursion

Fix add app link not being highlighted
This commit is contained in:
Chris Hunt 2023-01-10 12:00:16 +00:00
parent affa698a24
commit 2ef0c8e9c3
2 changed files with 9 additions and 3 deletions

View File

@ -47,7 +47,7 @@ export default function Header({ searchText, changeSearch }) {
</div> </div>
<nav className='relative z-10 mx-12'> <nav className='relative z-10 mx-12'>
<Link href="/" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname == "/" ? ' border-white/30' : ' border-transparent')}>Library</Link> <Link href="/" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname == "/" ? ' border-white/30' : ' border-transparent')}>Library</Link>
<Link href="/addapp" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname == "/addapp" ? ' bg-black/10 border-white/30' : ' border-transparent')}>Add App</Link> <Link href="/addapp" className={'p-4 inline-block rounded-full border border-solid' + (router.pathname.startsWith("/addapp") ? ' bg-black/10 border-white/30' : ' border-transparent')}>Add App</Link>
</nav> </nav>
<div className="grow flex justify-center relative z-10"> <div className="grow flex justify-center relative z-10">
<div className='bg-black/10 shadow border border-1 border-white/30 rounded flex w-full max-w-md'> <div className='bg-black/10 shadow border border-1 border-white/30 rounded flex w-full max-w-md'>

View File

@ -31,7 +31,7 @@ export async function getStaticProps({ params }) {
} }
} }
export default function AddApp({ app = null }) { export default function AddApp({ app }) {
function friendlyUrl(url) { function friendlyUrl(url) {
// make the url lowercase // make the url lowercase
@ -98,12 +98,14 @@ export default function AddApp({ app = null }) {
// const { app } = router.query // const { app } = router.query
useEffect(() => { useEffect(() => {
console.log(app)
if(app === null) { if(app === null) {
description.current.value = '' description.current.value = ''
name.current.value = '' name.current.value = ''
friendly_name.current.value = '' friendly_name.current.value = ''
setCategories(null) setCategories(null)
setArchitecture(null) setArchitecture(null)
setIcon(null)
setApplication(defaultState) setApplication(defaultState)
} }
else if (app && app[0]) { else if (app && app[0]) {
@ -211,6 +213,7 @@ export default function AddApp({ app = null }) {
file: event.target.files[0] file: event.target.files[0]
}) })
setExt(event.target.value.substr(event.target.value.lastIndexOf('.') + 1)) setExt(event.target.value.substr(event.target.value.lastIndexOf('.') + 1))
setInlineImage(null)
// return // return
} }
@ -257,6 +260,7 @@ export default function AddApp({ app = null }) {
<label className='mb-2 font-medium'>Categories</label> <label className='mb-2 font-medium'>Categories</label>
<CreatableSelect <CreatableSelect
instanceId="1"
name="categories" name="categories"
isMulti isMulti
options={options} options={options}
@ -276,6 +280,7 @@ export default function AddApp({ app = null }) {
<label className='mb-2 font-medium'>Architecture</label> <label className='mb-2 font-medium'>Architecture</label>
<Select <Select
instanceId="2"
name="architecture" name="architecture"
isMulti isMulti
options={[ options={[
@ -330,7 +335,8 @@ function App({ app, icon, inlineImage }) {
<div className={"rounded-xl group w-full shadow max-w-xs relative overflow-hidden h-[100px] border border-solid flex flex-col justify-between bg-slate-300 border-slate-400/50"}> <div className={"rounded-xl group w-full shadow max-w-xs relative overflow-hidden h-[100px] border border-solid flex flex-col justify-between bg-slate-300 border-slate-400/50"}>
<div className={"absolute top-0 left-0 right-0 h-[200px] transition-all" + (showDescription ? ' -translate-y-1/2' : '')}> <div className={"absolute top-0 left-0 right-0 h-[200px] transition-all" + (showDescription ? ' -translate-y-1/2' : '')}>
<div onClick={() => setShowDescription(true)} className={"h-[100px] p-4 relative overflow-hidden cursor-pointer"}> <div onClick={() => setShowDescription(true)} className={"h-[100px] p-4 relative overflow-hidden cursor-pointer"}>
<img className="h-[90px] group-hover:scale-150 transition-all absolute left-2 top-1" src={app.image_src} onError={(e) => e.target.src = inlineImage} alt={app.friendly_name} /> <img className="h-[90px] group-hover:scale-150 transition-all absolute left-2 top-1" src={app.image_src} onError={(e) => {
if ( inlineImage !== null) { e.target.src = inlineImage }}} alt={app.friendly_name} />
<div className="flex-col pl-28"> <div className="flex-col pl-28">
<div className="font-bold">{app.friendly_name || 'Friendly Name'}</div> <div className="font-bold">{app.friendly_name || 'Friendly Name'}</div>
<div className="text-xs mb-2 flex gap-2">{process.env.name || 'Unknown'} <span>{official()}</span></div> <div className="text-xs mb-2 flex gap-2">{process.env.name || 'Unknown'} <span>{official()}</span></div>