Merge pull request #32 from cherryontech/feat/communityforum

feat/communityforum

Author: CMolinaBetancourt

src/components/DailySummary.jsx

@@ -1,6 +1,5 @@
 //react
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 
 // component
 import Button from './Button';
@@ -14,20 +13,31 @@ const DailySummary = ({
   onSave,
 }) => {
   const max_chars = 500;
-  const [comment, setComment] = useState(initialComment || '');
+
+  const initialCommentObject = initialComment || {};
+  const [comment, setComment] = useState(initialCommentObject.comment || '');
+
+  const [isOptedOut, setIsOptedOut] = useState(
+    initialCommentObject.optOut || false
+  );
+
   const remainingChars = max_chars - comment.length;
 
   useEffect(() => {
-    setComment(initialComment || '');
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
   }, [initialComment, day]);
 
   const handleSave = () => {
-    onSave(day, comment);
+    onSave(day, comment, isOptedOut);
     onClose();
   };
 
   const handleCancel = () => {
-    setComment(initialComment || '');
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
     onClose();
   };
 
@@ -46,8 +56,9 @@ const DailySummary = ({
           Day {day} Summary
         </h2>
 
-        <p className="text-sm mb-4 text-eerie">{question}</p>
-
+       
+        <p className="text-sm mb-4 text-eerie text-justify">{question}</p>
+       
         <textarea
           className="w-full p-4 border border-eerie bg-white rounded-sm resize-none focus:ring-3 focus:ring-persianblue text-eerie"
           rows="6"
@@ -79,17 +90,25 @@ const DailySummary = ({
           </div>
         </div>
 
-        <div className="text-center mt-4">
-          <Link
-            to="/community" 
-            className="text-blue-700 text-sm font-semibold focus:outline-none focus-visible:ring-2 focus:p-2 focus-visible:ring-persianblue rounded-[5px]"
+        {/*Checkbox for Opt-out */}
+        <div className="flex items-center mt-5 mb-3 ml-6">
+          <input
+            id={`opt-out-${day}`}
+            type="checkbox"
+            checked={isOptedOut}
+            onChange={(e) => setIsOptedOut(e.target.checked)}
+            className="h-4 w-4 text-green border-eerie rounded focus:ring-persianblue"
+          />
+          <label
+            htmlFor={`opt-out-${day}`}
+            className="ml-2 text-sm text-eerie font-poppins"
           >
-            Visit Community Forum
-          </Link>
+            Opt out of sharing in the Community Forum
+          </label>
         </div>
       </div>
     </div>
   );
 };
 
-export default DailySummary;
+export default DailySummary;

src/components/ProgressBar.jsx

@@ -12,7 +12,7 @@ const ProgressBar = ({ effectiveDays, onArrowClick }) => {
       <div className="flex justify-between items-center mb-2">
         <h4
           id="progress-label"
-          className="text-sm font-medium text-eerie font-poppins"
+          className="text-eerie font-medium text-base"
         >
           30 Day Progress
         </h4>

src/data/questions.js

@@ -1,12 +1,185 @@
-// src/data/questions.js
-
 export const questions = [
-  "Write down three realistic, small acts of self-care I can commit to this week.",
-  "What feelings or thoughts am I having about my professional identity right now?",
-  "How can I ask my partner or support system for help with a specific task today or tomorrow?",
-  // ... (27 more questions)
-  "How has my definition of success changed since becoming a mother?",
-  "Describe one or two small, loving moments you shared with your child(ren) today.",
+  {
+    day: 1,
+    theme: 'Setting Boundaries',
+    question:
+      'Define what a truly successful, balanced week looks like for me, including personal time.',
+  },
+
+  {
+    day: 2,
+    theme: 'Self-Introspection',
+    question:
+      'What feelings or thoughts am I having about my professional identity right now?',
+  },
+  {
+    day: 3,
+    theme: 'Celebrating Wins',
+    question:
+      'Name one or two things I am proud of myself for accomplishing today, no matter how small.',
+  },
+  {
+    day: 4,
+    theme: 'Self-Introspection',
+    question:
+      'Describe how my energy level feels right now, without judgment. What would I tell a friend who was feeling exactly the way I feel today?',
+  },
+  {
+    day: 5,
+    theme: 'Self-Advocacy',
+    question:
+      'How can I ask my partner or support system for help with a specific task today or tomorrow?',
+  },
+  {
+    day: 6,
+    theme: 'Self-Introspection',
+    question:
+      "Write a 'thank you' note to your body for everything it has done.",
+  },
+  {
+    day: 7,
+    theme: 'Celebrating Wins',
+    question:
+      'What is a small way I can reconnect with my partner or a loved one this weekend?',
+  },
+  {
+    day: 8,
+    theme: 'Self-Introspection',
+    question:
+      'What is one thing I deeply miss from my life before the baby, and how can I integrate a tiny piece of it now?',
+  },
+  {
+    day: 9,
+    theme: 'Self-Introspection',
+    question:
+      'List all my current work-related tasks and mark which ones bring me energy versus draining it. If I could delegate one task right now, which one would it be and why?',
+  },
+  {
+    day: 10,
+    theme: 'Setting Boundaries',
+    question:
+      'Write a script for a conversation where I clearly and respectfully decline a new commitment.',
+  },
+  {
+    day: 11,
+    theme: 'Setting Boundaries',
+    question:
+      'Write down three realistic, small acts of self-care I can commit to this week.',
+  },
+  {
+    day: 12,
+    theme: 'Self-Introspection',
+    question:
+      'How am I currently using my lunch breaks and how could I use them to truly disconnect?',
+  },
+  {
+    day: 13,
+    theme: 'Setting Boundaries',
+    question:
+      'What boundary do I need to establish with my work device (e.g., no email after 7 PM)?',
+  },
+  {
+    day: 14,
+    theme: 'Setting Boundaries',
+    question:
+      "What is the 'good enough' standard for my current projects, and where am I over-delivering unnecessarily?",
+  },
+  {
+    day: 15,
+    theme: 'Self-Advocacy',
+    question:
+      'Name one specific way my company or manager could better support my well-being.',
+  },
+  {
+    day: 16,
+    theme: 'Self-Introspection',
+    question:
+      'How does my body feel right now? Am I holding tension anywhere (shoulders, jaw, etc.)?',
+  },
+  {
+    day: 17,
+    theme: 'Self-Introspection',
+    question:
+      'Write a letter to my future self outlining the signs of burnout to watch for.',
+  },
+  {
+    day: 18,
+    theme: 'Setting Boundaries',
+    question:
+      'What are two things I could let go of or automate that would save me an hour of time weekly?',
+  },
+  {
+    day: 19,
+    theme: 'Self-Introspection',
+    question:
+      'If I took a mental health day tomorrow, what three activities would I do?',
+  },
+  {
+    day: 20,
+    theme: 'Self-Introspection',
+    question:
+      'What is my current definition of leadership, and how am I embodying it daily?',
+  },
+  {
+    day: 21,
+    theme: 'Self-Introspection',
+    question:
+      'Describe a recent situation where I had to make a difficult decision; what was the guiding principle?',
+  },
+  {
+    day: 22,
+    theme: 'Self-Advocacy',
+    question:
+      'What is one skill I need to delegate or train my team on so I can focus on strategy?',
+  },
+  {
+    day: 23,
+    theme: 'Self-Introspection',
+    question:
+      'Who in my network or industry do I admire as a leader, and what specific traits do they possess?',
+  },
+  {
+    day: 24,
+    theme: 'Self-Introspection',
+    question:
+      'What is the most significant legacy I want to build in my current role?',
+  },
+  {
+    day: 25,
+    theme: 'Gender Bias',
+    question:
+      'How am I actively creating a more inclusive and equitable environment for my junior colleagues?',
+  },
+  {
+    day: 26,
+    theme: 'Self-Advocacy',
+    question:
+      'What is one area of my company or industry where I feel my expertise is untapped?',
+  },
+  {
+    day: 27,
+    theme: 'Self-Introspection',
+    question:
+      'How am I actively seeking and implementing critical feedback on my leadership style?',
+  },
+  {
+    day: 28,
+    theme: 'Self-Advocacy',
+    question:
+      'How does my current compensation reflect my value and impact? What are three ways I can advocate for myself and my team more effectively in the next quarter?',
+  },
+  {
+    day: 29,
+    theme: 'Self-Advocacy',
+    question:
+      'What is the single most important lesson I want to teach my mentees this year? Why?',
+  },
+  {
+    day: 30,
+    theme: 'Celebrating Wins',
+    question:
+      "If I was starting a new company today, what is the first cultural value I would establish? How am I intentionally celebrating successes—both mine and my team's—this week?",
+  },
 ];
 
 export const total_days = 30;

src/main.jsx

@@ -14,6 +14,7 @@ import Journal from './pages/journal';
 import Logout from './pages/Logout';
 import Challenges from './pages/Challenges';
 import Profile from './pages/Profile';
+import ForumResponses from './pages/ForumResponses';
 import App from './App';
 
 const router = createBrowserRouter([
@@ -32,13 +33,11 @@ const router = createBrowserRouter([
       { path: 'logout', element: <Logout /> },
       { path: 'profile', element: <Profile /> },
       { path: 'error', element: <Error /> },
+      { path: '*', element: <Error /> },
       { path: 'challenges', element: <Challenges /> },
+      { path: '/community/responses/:day', element: <ForumResponses /> },
     ],
   },
-  {
-    path: '*',
-    element: <Error />,
-  },
 ]);
 createRoot(document.getElementById('root')).render(
   <StrictMode>

src/pages/Community.jsx

@@ -1,9 +1,52 @@
-function Community() {
+// react
+import { Link } from 'react-router-dom';
+
+// data
+import { questions } from '../data/questions';
+
+//icon
+import { FaArrowRight } from 'react-icons/fa6';
+
+const Community = () => {
   return (
-    <div className="min-h-screen bg-emerald-100 flex items-center justify-center">
-      <h1 className="text-4xl font-bold text-lime-500">Community Page! 🎉</h1>
-    </div>
+    <main className="min-h-screen p-6 font-poppins">
+      <div className="max-w-[1000px] mx-auto">
+        <h1 className="text-3xl font-bold mb-2 font-playfair">
+          Community Forum
+        </h1>
+        <p className="text-eerie mb-8">
+          View how other women in tech responded to journal prompts.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {questions.map((q) => (
+            <div
+              key={q.day}
+              className="bg-white p-6 rounded-lg border border-eerie flex flex-col justify-between"
+            >
+              <div>
+                <h2 className="text-m font-semibold text-eerie font-playfair mb-2">
+                  Theme: {q.theme}
+                </h2>
+                <p className="text-m text-eerie font-poppins mb-4">
+                  {q.question}
+                </p>
+              </div>
+              <div className="text-right">
+                <Link
+                  to={`/community/responses/${q.day}`}
+                  className="bg-eerie text-white p-2 inline-flex items-center justify-center rounded-full cursor-pointer transition hover:bg-zinc active:bg-persianblue active:text-white active:p-2 flex-shrink-0 focus:outline-none focus-visible:ring-3 focus-visible:ring-persianblue focus-visible:ring-offset-2"
+                  aria-label={`View responses for day ${q.day}`}
+                >
+                  <FaArrowRight className="w-5 h-5" aria-hidden="true" />
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
   );
-}
+};
 
-export default Community;
+export default Community;