fix: resintated the creation on .env.development by github actions using Deno secrets

Author: AlexVOiceover

.github/workflows/deploy.yml

@@ -9,6 +9,7 @@ jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
+    environment: 'production'
 
     permissions:
       id-token: write # Needed for auth with Deno Deploy
@@ -29,16 +30,18 @@ jobs:
           node-version: lts/*
 
       - name: Install step
-        run: "npm install"
+        run: 'npm install'
+
+      - name: Create .env.production
+        run: |
+          echo "VITE_API_URL=${{ secrets.VITE_API_URL }}" > .env.production
 
       - name: Build step
-        run: "npm run build"
+        run: 'npm run build'
 
       - name: Upload to Deno Deploy
         uses: denoland/deployctl@v1
         with:
-          project: "lift-frontend"
-          entrypoint: "https://deno.land/[email protected]/http/file_server.ts"
-          root: "dist"
-          
-          
+          project: 'lift-frontend'
+          entrypoint: 'https://deno.land/[email protected]/http/file_server.ts'
+          root: 'dist'

README.md

@@ -98,7 +98,7 @@ The deployment workflow is defined in `.github/workflows/deploy.yml`. It include
 
 ## Configuration
 
-Configuration settings are managed through environment variables. Ensure you have a `.env` file in the root directory with the necessary variables:
+Configuration settings are managed through environment variables. Ensure you have a `.env.development` file in the root directory with the necessary variables:
 
 ```ini
 VITE_API_URL=<your_backend_api_url>

src/features/statements/components/StatementItem.tsx

@@ -112,20 +112,28 @@ const StatementItem: React.FC<StatementItemProps> = ({
   originalCategory: externalOriginalCategory, // Get original category from parent
 }) => {
   const [isActionsExpanded, setIsActionsExpanded] = React.useState(false);
-  
+
   // Create a ref for the component root element
   const itemRef = React.useRef<HTMLDivElement>(null);
-  
+
   // Create refs to track category changes for animations
   const prevCategoryRef = React.useRef<string | null>(null);
 
   // Use simple primitive values to store original state
   // This way we avoid object reference issues
-  const [originalCategory, setOriginalCategory] = React.useState<string | null>(null);
-  const [originalSubject, setOriginalSubject] = React.useState<string | null>(null);
+  const [originalCategory, setOriginalCategory] = React.useState<string | null>(
+    null
+  );
+  const [originalSubject, setOriginalSubject] = React.useState<string | null>(
+    null
+  );
   const [originalVerb, setOriginalVerb] = React.useState<string | null>(null);
-  const [originalObject, setOriginalObject] = React.useState<string | null>(null);
-  const [originalPrivacy, setOriginalPrivacy] = React.useState<boolean | null>(null);
+  const [originalObject, setOriginalObject] = React.useState<string | null>(
+    null
+  );
+  const [originalPrivacy, setOriginalPrivacy] = React.useState<boolean | null>(
+    null
+  );
 
   // Local "draft" state to track current modifications
   const [draft, setDraft] = React.useState<Entry>(statement);
@@ -141,7 +149,7 @@ const StatementItem: React.FC<StatementItemProps> = ({
         // Use the external original category from parent if available, otherwise use the current category
         const originalCategoryValue =
           externalOriginalCategory ||
-          (statement.category ? String(statement.category) : "");
+          (statement.category ? String(statement.category) : '');
 
         // Set it in the local state for immediate use in comparison
         setOriginalCategory(originalCategoryValue);
@@ -173,35 +181,33 @@ const StatementItem: React.FC<StatementItemProps> = ({
       // Keep draft updated with latest changes from the statement
       setDraft(JSON.parse(JSON.stringify(statement)));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statement, isEditing]);
-  
+
   // Dedicated effect for scrolling when needed
   useEffect(() => {
     // Check if this statement was updated with a category change (flagged by EditStatementModal)
     if (isEditing && statement._needsScroll) {
       console.log('Statement flagged for scrolling:', statement.id);
-      
+
       // Use a longer delay to ensure the DOM has fully updated
       const timer = setTimeout(() => {
         if (itemRef.current) {
           console.log('Executing scroll to element');
           // Force scroll to this element
-          itemRef.current.scrollIntoView({ 
-            behavior: 'smooth', 
-            block: 'center' 
+          itemRef.current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
           });
           console.log('Scroll instruction sent');
         }
       }, 500);
-      
+
       return () => clearTimeout(timer);
     }
-    
+
     // Keep reference updated for category change tracking
     prevCategoryRef.current = statement.category;
-  // Check this effect whenever the statement reference changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // Check this effect whenever the statement reference changes
   }, [statement, isEditing]);
 
   // Helper function to normalize category values for comparison
@@ -232,8 +238,9 @@ const StatementItem: React.FC<StatementItemProps> = ({
   if (isEditing) {
     // Use the external original category if available, otherwise use local state
     // This ensures consistent comparison even after component remounts
-    const effectiveOriginalCategory = externalOriginalCategory || originalCategory;
-    
+    const effectiveOriginalCategory =
+      externalOriginalCategory || originalCategory;
+
     if (effectiveOriginalCategory !== null || originalCategory !== null) {
       // Compare current draft with original primitive values
       hasSubjectChanged = draft.atoms.subject !== originalSubject;
@@ -243,7 +250,9 @@ const StatementItem: React.FC<StatementItemProps> = ({
 
       // Normalize categories for comparison
       const draftCategory = normalizeCategoryForComparison(draft.category);
-      const originalCategoryNormalized = normalizeCategoryForComparison(effectiveOriginalCategory);
+      const originalCategoryNormalized = normalizeCategoryForComparison(
+        effectiveOriginalCategory
+      );
 
       // Compare normalized categories
       hasCategoryChanged = draftCategory !== originalCategoryNormalized;
@@ -260,10 +269,11 @@ const StatementItem: React.FC<StatementItemProps> = ({
 
   if (isEditing) {
     return (
-      <div 
-        ref={itemRef} 
+      <div
+        ref={itemRef}
         id={`statement-${statement.id}`}
-        className='bg-gray-100 p-3 rounded-lg shadow'>
+        className='bg-gray-100 p-3 rounded-lg shadow'
+      >
         {/* Desktop layout - horizontal row */}
         <div className='hidden md:flex md:items-center md:space-x-2'>
           {/* Privacy toggle button */}
@@ -789,4 +799,4 @@ const StatementItem: React.FC<StatementItemProps> = ({
   );
 };
 
-export default StatementItem;
+export default StatementItem;

src/layouts/components/Header.tsx

@@ -9,11 +9,11 @@ const Header: React.FC = () => {
   const [isDashboardOpen, setIsDashboardOpen] = useState(false);
 
   // Debug output to make sure username is correct
-  console.log("Header rendering with username:", data.username);
-  
+  //console.log("Header rendering with username:", data.username);
+
   // Function to open the modal directly
   const openModal = () => {
-    console.log("Opening modal directly");
+    console.log('Opening modal directly');
     setIsDashboardOpen(true);
   };
 
@@ -24,11 +24,7 @@ const Header: React.FC = () => {
         <div className='flex flex-wrap items-center justify-between'>
           {/* Left section: Logo */}
           <div className='flex items-center'>
-            <img
-              src='/lift_logo.png'
-              alt='Logo'
-              className='h-8 sm:h-10 mr-2'
-            />
+            <img src='/lift_logo.png' alt='Logo' className='h-8 sm:h-10 mr-2' />
           </div>
 
           {/* Center section: Title */}
@@ -40,7 +36,7 @@ const Header: React.FC = () => {
           <div className='flex items-center relative'>
             {data.username ? (
               <div>
-                <button 
+                <button
                   onClick={openModal}
                   className='flex items-center border-2 border-white rounded-full px-2 py-1 sm:px-4 sm:py-2 cursor-pointer hover:bg-pink-600 transition-colors'
                 >
@@ -56,9 +52,11 @@ const Header: React.FC = () => {
                 <SmallCircularQuestionCounter size={18} />
               </div>
             )}
-            
+
             {/* Render the modal directly when open */}
-            {isDashboardOpen && <UserDataModal onOpenChange={setIsDashboardOpen} />}
+            {isDashboardOpen && (
+              <UserDataModal onOpenChange={setIsDashboardOpen} />
+            )}
           </div>
         </div>
       </div>