mirror of
https://github.com/D4M13N-D3V/neroshitron.git
synced 2025-03-14 10:05:04 +00:00
fix: clicking tag breaks tag ui
This commit is contained in:
parent
f30d2c5a2a
commit
41a0c28697
5
.idea/.gitignore
generated
vendored
Normal file
5
.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# GitHub Copilot persisted chat sessions
|
||||||
|
/copilot/chatSessions
|
17
.idea/aws.xml
generated
Normal file
17
.idea/aws.xml
generated
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="accountSettings">
|
||||||
|
<option name="activeProfile" value="profile:default" />
|
||||||
|
<option name="activeRegion" value="us-east-1" />
|
||||||
|
<option name="recentlyUsedProfiles">
|
||||||
|
<list>
|
||||||
|
<option value="profile:default" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
<option name="recentlyUsedRegions">
|
||||||
|
<list>
|
||||||
|
<option value="us-east-1" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</component>
|
||||||
|
</project>
|
4
.idea/encodings.xml
generated
Normal file
4
.idea/encodings.xml
generated
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
|
||||||
|
</project>
|
6
.idea/misc.xml
generated
Normal file
6
.idea/misc.xml
generated
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectRootManager" version="2" languageLevel="JDK_22" default="true" project-jdk-name="openjdk-22" project-jdk-type="JavaSDK">
|
||||||
|
<output url="file://$PROJECT_DIR$/out" />
|
||||||
|
</component>
|
||||||
|
</project>
|
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/neroshitron.iml" filepath="$PROJECT_DIR$/.idea/neroshitron.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
11
.idea/neroshitron.iml
generated
Normal file
11
.idea/neroshitron.iml
generated
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.idea/copilot/chatSessions" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
@ -2,9 +2,11 @@
|
|||||||
import { createClient } from "@/utils/supabase/client";
|
import { createClient } from "@/utils/supabase/client";
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import Search from "@/components/neroshitron/search";
|
import Search from "@/components/neroshitron/search";
|
||||||
|
import Gallery from "@/components/neroshitron/gallery";
|
||||||
|
|
||||||
function PageComponent() {
|
function PageComponent() {
|
||||||
|
|
||||||
|
const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
|
||||||
const supabase = createClient();
|
const supabase = createClient();
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
@ -12,7 +14,12 @@ function PageComponent() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData();
|
getData();
|
||||||
}, []);
|
console.log(selectedGallery)
|
||||||
|
}, [selectedGallery]);
|
||||||
|
|
||||||
|
const closeGallery = () => {
|
||||||
|
setSelectedGallery(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -24,7 +31,31 @@ function PageComponent() {
|
|||||||
alt="Background"
|
alt="Background"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Search/>
|
<Search gallerySelected={(gallery:string)=>{setSelectedGallery(gallery)}}/>
|
||||||
|
|
||||||
|
{selectedGallery!=null ? (
|
||||||
|
<>
|
||||||
|
{/*
|
||||||
|
This is the modal for holding the gallery
|
||||||
|
*/}
|
||||||
|
<div
|
||||||
|
className={`fixed inset-0 transition-opacity z-30 animate-in`}
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-neroshi-blue-900 opacity-70 z-30"
|
||||||
|
onClick={() => closeGallery()}
|
||||||
|
></div>
|
||||||
|
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
|
||||||
|
<Gallery
|
||||||
|
id={selectedGallery as string}
|
||||||
|
columns={3}
|
||||||
|
closeMenu={() => closeGallery()}
|
||||||
|
></Gallery>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -3,12 +3,15 @@ import React, { useState, useEffect } from 'react';
|
|||||||
import SearchInput from '@/components/neroshitron/search_input';
|
import SearchInput from '@/components/neroshitron/search_input';
|
||||||
import Galleries from './galleries';
|
import Galleries from './galleries';
|
||||||
|
|
||||||
interface SearchProps { }
|
interface SearchProps {
|
||||||
|
gallerySelected: (gallery: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
const Search = ({ }:SearchProps) => {
|
const Search = ({gallerySelected }:SearchProps) => {
|
||||||
const [tags, setTags] = useState<string[]>([]);
|
const [tags, setTags] = useState<string[]>([]);
|
||||||
const [search, setSearch] = useState<string>('');
|
const [search, setSearch] = useState<string>('');
|
||||||
const [nsfw, setNsfw] = useState<boolean>(false);
|
const [nsfw, setNsfw] = useState<boolean>(false);
|
||||||
|
const [gallery, setGallery] = useState<string | null>(null);
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
}
|
}
|
||||||
@ -22,18 +25,27 @@ const Search = ({ }:SearchProps) => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData();
|
getData();
|
||||||
}, [tags]);
|
}, [tags]);
|
||||||
|
useEffect(() => {
|
||||||
|
getData();
|
||||||
|
if(gallery!=null)
|
||||||
|
gallerySelected(gallery);
|
||||||
|
}, [gallery]);
|
||||||
|
//TRY TESTING WITH THIS REMOVED!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData();
|
getData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Galleries key={search+"-"+tags.length+"-"+nsfw} search={search} nsfw={nsfw} tags={tags} />
|
<Galleries gallerySelected={(gallery:string)=>{setGallery(gallery)}} key={search+"-"+tags.length+"-"+nsfw} search={search} nsfw={nsfw} tags={tags} />
|
||||||
<section className="fixed flex items-center w-full p-8 pt-20 opacity-90 animate-in animate-once animate-duration-500">
|
<section className="fixed flex items-center w-full p-8 pt-20 opacity-90 animate-in animate-once animate-duration-500">
|
||||||
<div className="container mx-auto py-8">
|
<div className="container mx-auto py-8">
|
||||||
<SearchInput searchChanged={(search)=>{setSearch(search)}} nsfwChanged={(nsfw)=>{setNsfw(nsfw)}} tagsChanged={(tags)=>{setTags(tags);}} />
|
<SearchInput searchChanged={(search)=>{setSearch(search)}} nsfwChanged={(nsfw)=>{setNsfw(nsfw)}} tagsChanged={(tags)=>{setTags(tags);}} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -34,11 +34,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const getData = async () => {
|
|
||||||
const tagsResponse = await fetch(`/api/galleries/tags`);
|
|
||||||
const tagsData = await tagsResponse.json();
|
|
||||||
setTags(tagsData);
|
|
||||||
}
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
searchChanged(search);
|
searchChanged(search);
|
||||||
}, [search]);
|
}, [search]);
|
||||||
@ -49,7 +44,6 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
|
|||||||
nsfwChanged(nsfw);
|
nsfwChanged(nsfw);
|
||||||
}, [nsfw]);
|
}, [nsfw]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData();
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
@ -101,7 +95,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged}: SearchInputProp
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{(selectingTags) &&
|
{(selectingTags) &&
|
||||||
<TagSelector tagsInput={tags} key={tagSearch} tagSearch={tagSearch} tagsChanged={(newTags:string[])=>{ updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />}
|
<TagSelector key={tagSearch} tagSearch={tagSearch} tagsChanged={(newTags:string[])=>{ updateTags(newTags) }} selectedTagsInput={selectedTags} ref={tagSelectorRef} />}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -7,6 +7,7 @@ const Tag = ({ onTagClicked, selected, tag, }:TagProps) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
|
key={tag}
|
||||||
type="button"
|
type="button"
|
||||||
className={`animate-in w-full h-8 rounded-md no-underline text-sm text-white py-1 font-medium text-center ${selected ? 'hover:bg-pink-800 bg-pink-900' : 'hover:bg-pink-600 bg-neroshi-blue-800 border-neroshi-blue-900 border-2'}`}
|
className={`animate-in w-full h-8 rounded-md no-underline text-sm text-white py-1 font-medium text-center ${selected ? 'hover:bg-pink-800 bg-pink-900' : 'hover:bg-pink-600 bg-neroshi-blue-800 border-neroshi-blue-900 border-2'}`}
|
||||||
onClick={() => onTagClicked(tag)}
|
onClick={() => onTagClicked(tag)}
|
||||||
|
@ -3,15 +3,14 @@ import React, { forwardRef, useState, useEffect } from 'react';
|
|||||||
import Tag from './tag_pill';
|
import Tag from './tag_pill';
|
||||||
|
|
||||||
interface TagSelectorProps {
|
interface TagSelectorProps {
|
||||||
tagsInput: any[],
|
|
||||||
tagSearch: string,
|
tagSearch: string,
|
||||||
selectedTagsInput: string[],
|
selectedTagsInput: string[],
|
||||||
tagsChanged: (tags: string[]) => void
|
tagsChanged: (tags: string[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: string, selectedTagsInput: string[], tagsChanged: (tags: string[]) => void }>((props, ref) => {
|
const TagSelector = forwardRef<TagSelectorProps, {tagSearch: string, selectedTagsInput: string[], tagsChanged: (tags: string[]) => void }>((props, ref) => {
|
||||||
|
|
||||||
const [tags, setTags] = useState<any[]>(props.tagsInput);
|
const [tags, setTags] = useState<any[]>([]);
|
||||||
const [tagSearch, setTagSearch] = useState<string>(props.tagSearch);
|
const [tagSearch, setTagSearch] = useState<string>(props.tagSearch);
|
||||||
const [selectedTags, setSelectedTags] = useState<string[]>(props.selectedTagsInput);
|
const [selectedTags, setSelectedTags] = useState<string[]>(props.selectedTagsInput);
|
||||||
|
|
||||||
@ -26,14 +25,25 @@ const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: st
|
|||||||
setTags(selectedTags);
|
setTags(selectedTags);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
|
const tagsResponse = await fetch(`/api/galleries/tags`);
|
||||||
|
const tagsData = await tagsResponse.json();
|
||||||
|
setTags(tagsData);
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
props.tagsChanged(selectedTags);
|
props.tagsChanged(selectedTags);
|
||||||
getData();
|
getData();
|
||||||
}, [selectedTags,tagSearch,tags]);
|
}, [selectedTags,tagSearch]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
props.tagsChanged(selectedTags);
|
||||||
|
getData();
|
||||||
|
}, [selectedTags,tagSearch]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
const generateRandomString = () => {
|
const generateRandomString = () => {
|
||||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||||
@ -43,17 +53,19 @@ const TagSelector = forwardRef<TagSelectorProps, {tagsInput:any[], tagSearch: st
|
|||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
console.log(tags.length)
|
||||||
return (
|
return (
|
||||||
(tags.length > 0)? (
|
|
||||||
<div className="animate-in flex md:w-full animate-in pt-4 justify-center items-center">
|
<div className="animate-in flex md:w-full animate-in pt-4 justify-center items-center">
|
||||||
|
{(tags.length > 0) && (
|
||||||
<div className="z-10 grid p-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-1 w-full max-h-96 overflow-y-scroll pt-4 bg-neroshi-blue-900 rounded-md opacity-90 backdrop-filter backdrop-blur-md mx-auto">
|
<div className="z-10 grid p-4 grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-1 w-full max-h-96 overflow-y-scroll pt-4 bg-neroshi-blue-900 rounded-md opacity-90 backdrop-filter backdrop-blur-md mx-auto">
|
||||||
{props.tagsInput.map((tag: any) => (
|
{tags.map((tag: any) => (
|
||||||
(tagSearch === '' || tag.name.toLowerCase().includes(tagSearch.toLowerCase())) && // Updated condition
|
(tagSearch === '' || tag.name.toLowerCase().includes(tagSearch.toLowerCase())) && // Updated condition
|
||||||
<Tag key={generateRandomString()} tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
|
<Tag tag={tag.name} selected={selectedTags.includes(tag.name)} onTagClicked={(tag) => handleTag(tag)} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
):(<></>)
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user