Fix for mouse, next config, albums blob size limitation, cache to 10min

Co-Authored-By: Srikant Sahoo <srikantsahoo3601@gmail.com>

Author: srikant-sahoo-maersk

app/gallery/apps/albumsApp.jsx

@@ -16,6 +16,7 @@ export const IDENTIFY_USER = 'userLogIn';
 export const GET_CURRENT_TIME = () => new Date().toISOString();
 const DRAFT_NEW_ALBUM_TAG = 'new-album-draft';
 const ALBUMS_BLOB = 'albumsBlob';
+const UNIQUE_LOGIN_USER = uniqueName();
 
 export const MUTATIONS = {
     CREATE_ALBUM: 'CREATE_ALBUM',
@@ -111,7 +112,7 @@ export const updateAlbumBlob = async ({
 
     // to identify a User Login created album and create a default
     if (!props.localStorageID) {
-        const uniqueUserID = uniqueName();
+        const uniqueUserID = UNIQUE_LOGIN_USER;
         typeof window !== 'undefined' ? window?.localStorage.setItem(IDENTIFY_USER, uniqueUserID) : false;
         updateAlbums({
             uniqueUserID,
@@ -121,8 +122,13 @@ export const updateAlbumBlob = async ({
         });
     }
     if (props.localStorageID === 'delete-all-albums') await uploadAlbumAction({ parameters: { name: ALBUMS_BLOB } });
+    if (props.localStorageID === 'cleanup-all-albums') await uploadAlbumAction({ parameters: { name: ALBUMS_BLOB } });
 
     const prepareObj = (obj) => {
+        Object.keys(existingBlobData ?? {}).forEach((key) => {
+            if (existingBlobData[key] && existingBlobData[key]?.albums && existingBlobData[key]?.albums['All Photos'])
+                delete existingBlobData[key]?.albums['All Photos']; // to decrease the payload size
+        });
         if (obj['All Photos']) delete obj['All Photos']; // to decrease the payload size
 
         console.log('uploading ', { obj });
@@ -357,9 +363,15 @@ export const AlbumsAppContent = ({ selectedTab, setActiveApp, activeApp }) => {
                         )}
                     </div>
                     {Object.keys(userAlbums ?? {})?.length ? (
-                        <div style={styles.containerWrapper}>
+                        <div
+                            style={{ ...styles.containerWrapper, height: 370, overflow: 'auto' }}
+                            className="photosContainer"
+                        >
                             {otherUserAlbumTabHomePage && (
-                                <div style={{ ...styles.albumContainer, height: 370 }} className="photosContainer">
+                                <div
+                                    style={{ ...styles.albumContainer, height: 370, overflow: 'auto' }}
+                                    className="photosContainer"
+                                >
                                     {Object.keys(blobData ?? {})
                                         ?.filter((d) => d !== localStorageID)
                                         ?.map((blobUser, k) => {

app/gallery/apps/srikantApp.jsx

@@ -121,14 +121,26 @@ const References = () => {
                 </>
             )
         },
+        // {
+        //     id: 3,
+        //     text: 'UI Inspiration | Dribbble shot by Andrae Waters',
+        //     url: 'https://dribbble.com/shots/23218407-Apple-Vision-Pro-AR-Photo-Gallery',
+        //     description: (
+        //         <>
+        //             These are directly served from wikipedia random article API
+        //             https://en.wikipedia.org/api/rest_v1/page/random/summary using SSR(Server Side Rendering technique
+        //             of Next JS), and the cache is revalidated by clicking the <code>Next Article</code> button.
+        //         </>
+        //     )
+        // },
         {
             id: 4,
-            text: 'Please vote my submission of Netlify dynamic site challenge in Dev.to.',
+            text: 'Please refer my submission of Netlify dynamic site challenge in Dev.to.',
             url: 'https://dev.to/srikant_code',
             description: (
                 <>
-                    I will open source the code if it gets selected. It would also motivate me to continue doing further
-                    such work😄. You can connect with me here{' '}
+                    I will open source the UI code if it gets selected. It would also motivate me to continue doing
+                    further such work😄. You can connect with me here{' '}
                     <ExternalLink href="https://www.linkedin.com/in/srikant-design/">LinkedIn</ExternalLink> |{' '}
                     <ExternalLink href="https://twitter.com/srikant_design">Twitter</ExternalLink>
                 </>

app/gallery/pageContent.jsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import { Button, ExternalLink, ReuseCSS } from './common';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { GalleryAppContent as MemoriesAppContent } from './apps/memoriesApp';
 import { NewsAppContent } from './apps/discoverApp';
 import { SrikantAppContent } from './apps/srikantApp';
@@ -68,11 +68,11 @@ export const APP = {
                 This project is a hobby endeavor that I'm proud of, and I hope it helps you understand the
                 potential of Netlify&apos;s capabilities. <br />
                 It took me more than 5 days to build this. I will be putting up what all challenges I have faced during
-                the development of this in the submission article. Would really appreciate if you liked it and can vote
-                my submission here 👇
+                the development of this, and more details of implementation in the submission article. Would really
+                appreciate if you liked it and can vote my submission here 👇
                 <br />
                 <Button>
-                    <ExternalLink href={'https://dev.to/srikant_code'}>Please vote here😄</ExternalLink>
+                    <ExternalLink href={'https://dev.to/srikant_code'}>Please give a 👍 here😄</ExternalLink>
                 </Button>
                 <br /> You can connect with me anytime here{' '}
                 <ExternalLink href="https://www.linkedin.com/in/srikant-design/">LinkedIn</ExternalLink> |{' '}
@@ -91,6 +91,8 @@ export const PageContent = (props) => {
     const [activeApp, setActiveApp] = useState(0);
     // console.log({ props });
 
+    typeof window !== 'undefined' ? !window.location.origin?.includes('localhost') && (console.log = () => {}) : null;
+
     const internalStyles = {
         main: {
             ...ReuseCSS.font,
@@ -108,6 +110,7 @@ export const PageContent = (props) => {
     return (
         <main style={internalStyles.main}>
             <Background />
+            <Mouse />
             {Object.keys(APP).map((appKey, id) => {
                 return (
                     <AppTemplate
@@ -319,7 +322,8 @@ export const Background = () => {
             overflow: 'hidden',
             width: '100vw',
             position: 'absolute',
-            transition: `all 0.2s linear`
+            transition: `all 0.2s linear`,
+            filter: `brightness(60%)`
         }
     };
     return (
@@ -361,3 +365,41 @@ export const Modal = ({ children, style, open, onClose }) => {
         </>
     );
 };
+
+const Mouse = () => {
+    const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+
+    // Update cursor position on mouse move
+    const handleMouseMove = (e) => {
+        setCursorPosition({ x: e.clientX - 25, y: e.clientY - 25 });
+    };
+
+    useEffect(() => {
+        // Add event listener for mousemove
+        typeof window !== 'undefined' ? window.addEventListener('mousemove', handleMouseMove) : null;
+
+        // Clean up the event listener when component unmounts
+        return () => {
+            typeof window !== 'undefined' ? window.removeEventListener('mousemove', handleMouseMove) : null;
+        };
+    }, []);
+
+    // {/* Your other components go here */}
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                left: cursorPosition.x,
+                top: cursorPosition.y,
+                width: 50,
+                height: 50,
+                borderRadius: '50%',
+                pointerEvents: 'none', // Prevent the circle from blocking interactions
+                backgroundColor: `rgba(147, 147, 147, 0.26)`,
+                zIndex: 10000,
+                border: `2px solid rgba(0, 210, 159, 0.69)`,
+                transition: `all 0.2s ease 0s`
+            }}
+        />
+    );
+};

app/page.jsx

@@ -8,7 +8,7 @@ const ctx = getNetlifyContext();
 const tagName = 'randomWiki';
 const randomWikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/random/summary';
 const maxExtractLength = 200;
-const revalidateTTL = 60;
+const revalidateTTL = 600;
 
 import { revalidateTag } from 'next/cache';
 import { PageContent } from './gallery/pageContent';

next.config.js

@@ -27,7 +27,7 @@ const nextConfig = {
     },
     experimental: {
         serverActions: {
-            bodySizeLimit: '12mb'
+            bodySizeLimit: '50mb'
         }
     }
 };