fix: random pages.

fezcode · fezcode · commit df0130cee27b · 2025-11-27T19:53:08.000+03:00
diff --git a/src/pages/RandomPage.js b/src/pages/RandomPage.js
@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useSearchableData from '../hooks/useSearchableData';
+import Loading from '../components/Loading';
+import { useToast } from '../hooks/useToast';
+
+// * `hasNavigated` Ref: I introduced a useRef variable called hasNavigated.
+// * Guard Clause: The useEffect now checks hasNavigated.current at the very beginning. If it's already true, it means a
+// navigation attempt has been made, and it returns early.
+// * Set Ref: hasNavigated.current is set to true just before calling navigate.
+//
+// This pattern effectively acts as a flag that ensures the navigation logic runs only once, even if React's Strict Mode
+// re-runs useEffect in development or if other factors cause multiple renders.
+//
+//   Now, clicking "Random" should only redirect you once! ✅
+const RandomPage = () => {
+  const { items, isLoading } = useSearchableData();
+  const navigate = useNavigate();
+  const { addToast } = useToast();
+  const hasNavigated = useRef(false);
+
+  useEffect(() => {
+    if (hasNavigated.current) return; // Prevent double navigation in StrictMode or on re-render
+
+    if (!isLoading && items.length > 0) {
+      const allNavigableItems = items.filter(item => item.path && item.path !== '/random'); // Exclude itself
+
+      if (allNavigableItems.length > 0) {
+        const randomIndex = Math.floor(Math.random() * allNavigableItems.length);
+        const randomItem = allNavigableItems[randomIndex];
+        hasNavigated.current = true; // Set ref before navigating
+        navigate(randomItem.path);
+        addToast({title: 'Random', message: `Navigating to ${randomItem.title || randomItem.path}`, duration: 2000});
+      } else {
+        hasNavigated.current = true; // Set ref before navigating
+        navigate('/'); // Fallback to home if no other items exist
+        addToast({title: 'Info', message: 'No random items found, redirecting to home.', duration: 3000});
+      }
+    } else if (!isLoading && items.length === 0) {
+        hasNavigated.current = true; // Set ref before navigating
+        navigate('/'); // Fallback to home if no items loaded
+        addToast({title: 'Info', message: 'No searchable items loaded, redirecting to home.', duration: 3000});
+    }
+  }, [isLoading, items, navigate, addToast]); // Dependency array
+
+  return <Loading />; // Show loading spinner while redirecting
+};
+
+export default RandomPage;
diff --git a/src/pages/apps/NotepadPage.js b/src/pages/apps/NotepadPage.js
@@ -1,9 +1,10 @@
 import React, {useState, useEffect, useRef} from 'react';
 import {Link} from 'react-router-dom';
-import {ArrowLeftIcon, DownloadSimple, Trash, CloudRain, FloppyDisk, FolderOpen} from '@phosphor-icons/react';
+import {ArrowLeftIcon, DownloadSimple, Trash, CloudRain, FloppyDisk, FolderOpen, ArrowsOutLineHorizontal, ArrowsInLineHorizontal} from '@phosphor-icons/react';
 import useSeo from '../../hooks/useSeo';
 import {useToast} from '../../hooks/useToast';
 import ConfirmationModal from '../../components/ConfirmationModal';
+import usePersistentState from '../../hooks/usePersistentState';
 
 const NotepadPage = () => {
   useSeo({
@@ -15,6 +16,7 @@ const NotepadPage = () => {
   const [text, setText] = useState('');
   const [isRainy, setIsRainy] = useState(false);
   const [isClearModalOpen, setIsClearModalOpen] = useState(false);
+  const [isFixedSize, setIsFixedSize] = usePersistentState('fezcodex-notepad-fixed-size', true); // Default to true for fixed height
   const textareaRef = useRef(null);
   const fileInputRef = useRef(null);
   const {addToast} = useToast();
@@ -96,6 +98,15 @@ const NotepadPage = () => {
     });
   };
 
+  const toggleFixedSize = () => {
+    setIsFixedSize(prev => !prev);
+    addToast({
+        title: isFixedSize ? 'Expanded' : 'Fixed Height',
+        message: isFixedSize ? 'Notepad expanded to fill space.' : 'Notepad height is now fixed.',
+        duration: 2000
+    });
+  };
+
   return (
     <div
       className={`min-h-screen flex flex-col transition-colors duration-500 ${isRainy ? 'bg-gray-900' : 'bg-[#fdfbf7]'}`}>
@@ -153,6 +164,13 @@ const NotepadPage = () => {
             >
               <FolderOpen size={20} />
             </button>
+            <button
+              onClick={toggleFixedSize}
+              className={`p-2 rounded-full transition-colors ${isFixedSize ? 'text-gray-500 hover:bg-gray-200' : 'text-blue-300 bg-blue-900/30 hover:bg-blue-900/50'}`}
+              title={isFixedSize ? 'Expand Notepad' : 'Fix Notepad Height'}
+            >
+              {isFixedSize ? <ArrowsOutLineHorizontal size={20} /> : <ArrowsInLineHorizontal size={20} />}
+            </button>
             <button
               onClick={toggleRain}
               className={`p-2 rounded-full transition-colors ${isRainy ? 'text-blue-300 bg-blue-900/30 hover:bg-blue-900/50' : 'text-gray-500 hover:bg-gray-200'}`}
@@ -179,7 +197,7 @@ const NotepadPage = () => {
 
         {/* Notepad Area */}
         <div
-          className={`flex-grow rounded-lg shadow-lg relative overflow-hidden transition-all duration-500 ${isRainy ? 'bg-gray-800 border border-gray-700' : 'bg-white border border-gray-200'}`}>
+          className={`${isFixedSize ? 'h-[60vh]' : 'flex-grow'} rounded-lg shadow-lg relative overflow-hidden flex flex-col transition-all duration-500 ${isRainy ? 'bg-gray-800 border border-gray-700' : 'bg-white border border-gray-200'}`}>
           {/* Paper Lines Background */}
           <div
             className="absolute inset-0 pointer-events-none opacity-50"
@@ -196,7 +214,8 @@ const NotepadPage = () => {
 
           <textarea
             ref={textareaRef}
-            className={`w-full h-full p-8 pl-16 text-lg font-mono leading-8 bg-transparent border-none resize-none focus:ring-0 focus:outline-none relative z-10 ${isRainy ? 'text-gray-300 placeholder-gray-600' : 'text-gray-800 placeholder-gray-400'}`}
+            rows={1}
+            className={`w-full p-8 pl-16 text-lg font-mono leading-8 bg-transparent border-none resize-none focus:ring-0 focus:outline-none relative z-10 min-h-0 flex-1 ${isRainy ? 'text-gray-300 placeholder-gray-600' : 'text-gray-800 placeholder-gray-400'}`}
             placeholder="Start typing..."
             value={text}
             onChange={(e) => setText(e.target.value)}
