Color mapping set,Avatar Icon added to PreviewCard
This commit is contained in:
jubitjohn
parent
7f5dbf34d1
commit
1a229c65a8
|
|
@ -20,9 +20,8 @@ import { User } from 'types/user';
|
|||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
||||
import PhotoSwipe from 'photoswipe';
|
||||
import useMemoSingleThreaded from 'hooks/useMemoSingleThreaded';
|
||||
// import { getLocalFiles } from 'services/fileService';
|
||||
import { getLocalFiles } from 'services/fileService';
|
||||
import { getLocalCollections } from 'services/collectionService';
|
||||
// import { getLocalPublicFiles } from 'services/publicCollectionService';
|
||||
|
||||
const Container = styled('div')`
|
||||
display: block;
|
||||
|
|
@ -57,6 +56,14 @@ interface Props {
|
|||
showAppDownloadBanner?: boolean;
|
||||
}
|
||||
|
||||
interface CollectionItem {
|
||||
id: number;
|
||||
owner: {
|
||||
id: number;
|
||||
email: string;
|
||||
};
|
||||
}
|
||||
|
||||
const PhotoFrame = ({
|
||||
files,
|
||||
syncWithRemote,
|
||||
|
|
@ -74,6 +81,15 @@ const PhotoFrame = ({
|
|||
}: Props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [currentIndex, setCurrentIndex] = useState<number>(0);
|
||||
const [sharedAlbums, setSharedAlbums] = useState<any[]>([]);
|
||||
const [sharedAlbumsFiles, setSharedAlbumsFiles] = useState<any[]>([]);
|
||||
const [fileToAvatarName, setFileToAvatarName] = useState<{
|
||||
[key: number]: { name: string; colorCode: string };
|
||||
}>({});
|
||||
|
||||
const [ownerIdToEmail, setOwnerIdToEmail] = useState<{
|
||||
[key: number]: string;
|
||||
}>({});
|
||||
const [fetching, setFetching] = useState<{ [k: number]: boolean }>({});
|
||||
const galleryContext = useContext(GalleryContext);
|
||||
const appContext = useContext(AppContext);
|
||||
|
|
@ -87,24 +103,68 @@ const PhotoFrame = ({
|
|||
const [isSourceLoaded, setIsSourceLoaded] = useState(false);
|
||||
const [conversionFailed, setConversionFailed] = useState(false);
|
||||
|
||||
// const res =files.map((item) => item.id);
|
||||
// console.log('id of Files:', res)
|
||||
const avatarColors: string[] = [
|
||||
'#76549A',
|
||||
'#DF7861',
|
||||
'#94B49F',
|
||||
'#87A2FB',
|
||||
'#C689C6',
|
||||
'#937DC2',
|
||||
'#325288',
|
||||
'#85B4E0',
|
||||
'#C1A3A3',
|
||||
'#E1A059',
|
||||
'#426165',
|
||||
'#6B77B2',
|
||||
'#957FEF',
|
||||
'#DD9DE2',
|
||||
'#82AB8B',
|
||||
'#9BBBE8',
|
||||
'#8FBEBE',
|
||||
'#8AC3A1',
|
||||
'#A8B0F2',
|
||||
'#B0C695',
|
||||
'#E99AAD',
|
||||
'#D18484',
|
||||
'#78B5A7',
|
||||
];
|
||||
|
||||
// const resFilesCollect= getLocalFiles()
|
||||
// const resPublicfiles= getLocalPublicFiles()
|
||||
useEffect(() => {
|
||||
const fetchOwnerEmails = async () => {
|
||||
try {
|
||||
// Replace with your logic to fetch the collection array
|
||||
// const ownerUser: User = getData(LS_KEYS.USER);
|
||||
|
||||
const collection: CollectionItem[] =
|
||||
await getLocalCollections();
|
||||
|
||||
const emailMapping: { [key: number]: string } = {};
|
||||
collection.forEach((item) => {
|
||||
const { owner } = item;
|
||||
if (owner.email) {
|
||||
emailMapping[owner.id] = owner.email;
|
||||
}
|
||||
});
|
||||
|
||||
setOwnerIdToEmail(emailMapping);
|
||||
} catch (error) {
|
||||
console.error('Error fetching collection:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchOwnerEmails();
|
||||
}, []);
|
||||
|
||||
// console.log('UserId to Email mapping ', ownerIdToEmail);
|
||||
|
||||
useEffect(() => {
|
||||
const FetchSharedAlbum = async () => {
|
||||
try {
|
||||
// const resLocalFiles = getLocalFiles();
|
||||
// const files = await resLocalFiles;
|
||||
// const fileIds: number[] = files.map((file) => file.id);
|
||||
// console.log(fileIds);
|
||||
const ownerUser: User = getData(LS_KEYS.USER);
|
||||
|
||||
const collectionList = getLocalCollections();
|
||||
|
||||
const collections = await collectionList;
|
||||
const collections = await collectionList; // rename collection
|
||||
|
||||
const collectionIds = collections
|
||||
.map((collection) => {
|
||||
|
|
@ -114,11 +174,11 @@ const PhotoFrame = ({
|
|||
) {
|
||||
return collection.id;
|
||||
}
|
||||
return null; // Or you can return any other placeholder value
|
||||
return null;
|
||||
})
|
||||
.filter((id) => id !== null);
|
||||
|
||||
console.log(collectionIds);
|
||||
setSharedAlbums(collectionIds);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
|
|
@ -127,6 +187,86 @@ const PhotoFrame = ({
|
|||
FetchSharedAlbum();
|
||||
}, []);
|
||||
|
||||
// console.log('Avatar Enabled albums : ', sharedAlbums);
|
||||
|
||||
useEffect(() => {
|
||||
const filesOfSharedAlbums = async () => {
|
||||
try {
|
||||
const resLocalFiles = getLocalFiles();
|
||||
const files = await resLocalFiles;
|
||||
// console.log('ALL FILES', files);
|
||||
const sharedAlbumsFiles = files
|
||||
.map((files) => {
|
||||
if (sharedAlbums.includes(files.collectionID)) {
|
||||
return files.id;
|
||||
// console.log('Testing FileofSharedAlbums');
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((id) => id !== null);
|
||||
|
||||
setSharedAlbumsFiles(sharedAlbumsFiles);
|
||||
// setSharedAlbums(collectionIds)
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
filesOfSharedAlbums();
|
||||
}, [sharedAlbums]);
|
||||
|
||||
// console.log('sharedAlbumsFiles', sharedAlbumsFiles);
|
||||
|
||||
useEffect(() => {
|
||||
const fileIdToName = async () => {
|
||||
try {
|
||||
const resLocalFiles = getLocalFiles();
|
||||
const files = await resLocalFiles;
|
||||
// const fileIds: number[] = files.map((file) => file.id);
|
||||
// console.log('ALL FILES', files);
|
||||
|
||||
const fileIdName: {
|
||||
[key: number]: { name: string; colorCode: string };
|
||||
} = {};
|
||||
// console.log('Checking fileIdName declaration');
|
||||
files.forEach((file) => {
|
||||
if (sharedAlbumsFiles.includes(file.id)) {
|
||||
if (file.pubMagicMetadata?.data?.uploaderName) {
|
||||
const uploaderName =
|
||||
file.pubMagicMetadata?.data?.uploaderName;
|
||||
const colorCode = '#000000';
|
||||
fileIdName[file.id] = {
|
||||
name: uploaderName,
|
||||
colorCode: colorCode,
|
||||
};
|
||||
} else if (file.ownerID in ownerIdToEmail) {
|
||||
const ownerEmail = ownerIdToEmail[file.ownerID];
|
||||
const colorIndex =
|
||||
file.ownerID % avatarColors.length;
|
||||
const colorCode = avatarColors[colorIndex];
|
||||
fileIdName[file.id] = {
|
||||
name: ownerEmail,
|
||||
colorCode: colorCode,
|
||||
};
|
||||
// console.log('Testing inside else of ForEach');
|
||||
}
|
||||
// console.log('Testing inside fileIdToName');
|
||||
}
|
||||
});
|
||||
|
||||
setFileToAvatarName(fileIdName);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
|
||||
// console.log('Testing fileIdToName');
|
||||
};
|
||||
|
||||
fileIdToName();
|
||||
}, [sharedAlbumsFiles]);
|
||||
|
||||
// console.log(' Avatar to file name FileToName : ', fileToAvatarName);
|
||||
|
||||
const displayFiles = useMemoSingleThreaded(() => {
|
||||
return files.map((item) => {
|
||||
const filteredItem = {
|
||||
|
|
@ -405,6 +545,7 @@ const PhotoFrame = ({
|
|||
}
|
||||
activeCollection={activeCollection}
|
||||
showPlaceholder={isScrolling}
|
||||
avatarEnabledFiles={fileToAvatarName}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ interface IProps {
|
|||
isInsSelectRange: boolean;
|
||||
activeCollection: number;
|
||||
showPlaceholder: boolean;
|
||||
avatarEnabledFiles: { [key: number]: { name: string; colorCode: string } };
|
||||
}
|
||||
|
||||
const Check = styled('input')<{ $active: boolean }>`
|
||||
|
|
@ -217,6 +218,8 @@ const Cont = styled('div')<{ disabled: boolean }>`
|
|||
export default function PreviewCard(props: IProps) {
|
||||
const { thumbs } = useContext(GalleryContext);
|
||||
|
||||
// console.log('SharedAlbumPassed to PreviewCards', props.avatarEnabledFiles);
|
||||
|
||||
const {
|
||||
file,
|
||||
onClick,
|
||||
|
|
@ -230,6 +233,12 @@ export default function PreviewCard(props: IProps) {
|
|||
isRangeSelectActive,
|
||||
isInsSelectRange,
|
||||
} = props;
|
||||
// console.log('Files', file.id);
|
||||
|
||||
// console.log(
|
||||
// 'SharedAlbumPassed to PreviewCards value',
|
||||
// props.avatarEnabledFiles[file.id]
|
||||
// );
|
||||
|
||||
const [imgSrc, setImgSrc] = useState<string>(file.msrc);
|
||||
|
||||
|
|
@ -367,12 +376,17 @@ export default function PreviewCard(props: IProps) {
|
|||
)
|
||||
)}
|
||||
<SelectedOverlay selected={selected} />
|
||||
<AvatarOverlay>
|
||||
<AvatarCircle
|
||||
color={'green'}
|
||||
email="j"
|
||||
size={20}></AvatarCircle>
|
||||
</AvatarOverlay>
|
||||
{file.id in props.avatarEnabledFiles && (
|
||||
<AvatarOverlay>
|
||||
<AvatarCircle
|
||||
color={props.avatarEnabledFiles[file.id].colorCode}
|
||||
email={props.avatarEnabledFiles[file.id].name
|
||||
?.charAt(0)
|
||||
?.toUpperCase()}
|
||||
size={20}></AvatarCircle>
|
||||
</AvatarOverlay>
|
||||
)}
|
||||
|
||||
<HoverOverlay checked={selected} />
|
||||
<InSelectRangeOverLay
|
||||
$active={isRangeSelectActive && isInsSelectRange}
|
||||
|
|
|
|||
Loading…
Reference in a new issue