Daily Diary (#1564)

* first commit - Daily journal - issue #1556

* final touches

---------

Co-authored-by: Priyankar Pal <[email protected]>

src/plays/daily-journa/DailyJournal.jsx

@@ -0,0 +1,68 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import { useState, useEffect } from 'react';
+import JournalEntryForm from './components/JournalEntryForm';
+import EntryList from './components/EntryList';
+import EntryDetails from './components/EntryDetails';
+
+// WARNING: Do not change the entry componenet name
+function DailyJournal(props) {
+  // Your Code Start below.
+  const [entries, setEntries] = useState([]);
+  const [selectedEntry, setSelectedEntry] = useState(null);
+
+  useEffect(() => {
+    const savedEntries = JSON.parse(localStorage.getItem('entries')) || [];
+    setEntries(savedEntries);
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('entries', JSON.stringify(entries));
+  }, [entries]);
+
+  const addEntry = (entry) => {
+    setEntries([...entries, entry]);
+  };
+
+  const viewEntry = (entry) => setSelectedEntry(entry);
+
+  const goBack = () => setSelectedEntry(null);
+
+  const onDelete = () => setEntries([]);
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div>
+            <div className="min-h-screen flex flex-col">
+              <h1 className="text-3xl font-semibold mb-3 text-center ">Daily Journal</h1>
+              <p className="mb-6 text-gray-600 text-center">
+                Your daily companion that you can share your thoughts and feelings with.{' '}
+              </p>
+              <div className="flex flex-grow p-4">
+                <div className="w-full md:w-2/3 lg:w-2/4 p-4">
+                  <JournalEntryForm onSubmit={addEntry} />
+                </div>
+                <div className="w-full md:w-1/3 lg:w-2/4 p-4">
+                  {selectedEntry ? (
+                    <EntryDetails entry={selectedEntry} onBack={goBack} />
+                  ) : (
+                    <>
+                      <EntryList entries={entries} onDelete={onDelete} onSelect={viewEntry} />
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DailyJournal;

src/plays/daily-journa/Readme.md

@@ -0,0 +1,27 @@
+# Daily journal
+
+This play is about writing daily entries, categorising them by mood or topic, and reviewing past entries.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: GhadaRV
+- Gihub Link: https://github.com/GhadaRV
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)

src/plays/daily-journa/components/EntryDetails.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const EntryDetails = ({ entry, onBack }) => (
+  <div className="bg-white shadow-md rounded-lg p-4">
+    <h2 className="text-xl font-semibold mb-2">{entry.date}</h2>
+    <p>
+      <strong>Mood:</strong> {entry.mood}
+    </p>
+    <p>{entry.text}</p>
+    {entry.tags.length > 0 && (
+      <p>
+        <strong>Tags:</strong> {entry.tags.join(', ')}
+      </p>
+    )}
+    <button
+      className="mt-4 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded"
+      onClick={onBack}
+    >
+      Back
+    </button>
+  </div>
+);
+
+export default EntryDetails;

src/plays/daily-journa/components/EntryList.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const EntryList = ({ entries, onSelect, onDelete }) => (
+  <div className="bg-white shadow-md rounded-lg p-4">
+    <h2 className="text-center font-semibold text-pink-500">Past Entries</h2>
+    {entries.length > 0 ? (
+      <button
+        className="mt-4 mr-0 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded"
+        onClick={onDelete}
+      >
+        Delete entries
+      </button>
+    ) : null}
+    {entries.length === 0 ? <p>No entries found</p> : null}
+    <ul>
+      {entries.map((entry) => (
+        <li
+          className="cursor-pointer hover:bg-gray-100 p-2 rounded"
+          key={entry.id}
+          onClick={() => onSelect(entry)}
+        >
+          <h3>{entry.date}</h3>
+          <p>{entry.text.substring(0, 100)}...</p>
+          <p>
+            <strong>Mood:</strong> {entry.mood}
+          </p>
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default EntryList;

src/plays/daily-journa/components/JournalEntryForm.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+
+const JournalEntryForm = ({ onSubmit }) => {
+  const [text, setText] = useState('');
+  const [mood, setMood] = useState('Happy');
+  const [tags, setTags] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newEntry = {
+      id: Date.now(),
+      text,
+      mood,
+      tags: tags.split(' ').map((tag) => tag.trim()),
+      date: new Date().toLocaleDateString()
+    };
+    onSubmit(newEntry);
+    setText('');
+    setMood('Happy');
+    setTags('');
+  };
+
+  return (
+    <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 " onSubmit={handleSubmit}>
+      <textarea
+        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 "
+        placeholder="How was your day like? "
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <div className="flex flex-raw ">
+        <select className="mr-5" value={mood} onChange={(e) => setMood(e.target.value)}>
+          <option value="happy">Happy</option>
+          <option value="sad">Sad</option>
+          <option value="excited">Excited</option>
+          <option value="anxious">Anxious</option>
+        </select>
+        <input
+          className=""
+          placeholder="Tags: Home Family ..."
+          type="text"
+          value={tags}
+          onChange={(e) => setTags(e.target.value)}
+        />
+      </div>
+      <button
+        className="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded mt-6"
+        type="submit"
+      >
+        Add Entry
+      </button>
+    </form>
+  );
+};
+
+export default JournalEntryForm;

src/plays/daily-journa/styles.css

@@ -0,0 +1 @@
+/* enter stlyes here */