From 3ccb8f2c18de67a4e894d690cae07b163d1e0e42 Mon Sep 17 00:00:00 2001 From: Ghada Date: Mon, 14 Oct 2024 21:48:36 +0200 Subject: [PATCH 1/2] first commit - Daily journal - issue #1556 --- src/plays/daily-journa/DailyJournal.jsx | 65 +++++++++++++++++++ src/plays/daily-journa/Readme.md | 27 ++++++++ .../daily-journa/components/EntryDetails.jsx | 24 +++++++ .../daily-journa/components/EntryList.jsx | 25 +++++++ .../components/JournalEntryForm.jsx | 52 +++++++++++++++ src/plays/daily-journa/styles.css | 1 + 6 files changed, 194 insertions(+) create mode 100644 src/plays/daily-journa/DailyJournal.jsx create mode 100644 src/plays/daily-journa/Readme.md create mode 100644 src/plays/daily-journa/components/EntryDetails.jsx create mode 100644 src/plays/daily-journa/components/EntryList.jsx create mode 100644 src/plays/daily-journa/components/JournalEntryForm.jsx create mode 100644 src/plays/daily-journa/styles.css diff --git a/src/plays/daily-journa/DailyJournal.jsx b/src/plays/daily-journa/DailyJournal.jsx new file mode 100644 index 0000000000..e2382118e1 --- /dev/null +++ b/src/plays/daily-journa/DailyJournal.jsx @@ -0,0 +1,65 @@ +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); + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+
+
+
+

Daily Journal

+

Write your thoughts and feelings here.

+ +
+
+ {selectedEntry ? ( + + ) : ( + <> +

Entries

+ + + )} +
+
+
+
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +export default DailyJournal; diff --git a/src/plays/daily-journa/Readme.md b/src/plays/daily-journa/Readme.md new file mode 100644 index 0000000000..a1bfca02bc --- /dev/null +++ b/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) diff --git a/src/plays/daily-journa/components/EntryDetails.jsx b/src/plays/daily-journa/components/EntryDetails.jsx new file mode 100644 index 0000000000..68945b77d8 --- /dev/null +++ b/src/plays/daily-journa/components/EntryDetails.jsx @@ -0,0 +1,24 @@ +import React from 'react'; + +const EntryDetails = ({ entry, onBack }) => ( +
+

{entry.date}

+

+ Mood: {entry.mood} +

+

{entry.text}

+ {entry.tags.length > 0 && ( +

+ Tags: {entry.tags.join(', ')} +

+ )} + +
+); + +export default EntryDetails; diff --git a/src/plays/daily-journa/components/EntryList.jsx b/src/plays/daily-journa/components/EntryList.jsx new file mode 100644 index 0000000000..0faa047824 --- /dev/null +++ b/src/plays/daily-journa/components/EntryList.jsx @@ -0,0 +1,25 @@ +import React from 'react'; + +const EntryList = ({ entries, onSelect }) => ( +
+

Past Entries

+ {entries.length === 0 ?

No entries found

: null} + +
+); + +export default EntryList; diff --git a/src/plays/daily-journa/components/JournalEntryForm.jsx b/src/plays/daily-journa/components/JournalEntryForm.jsx new file mode 100644 index 0000000000..b5924fcefb --- /dev/null +++ b/src/plays/daily-journa/components/JournalEntryForm.jsx @@ -0,0 +1,52 @@ +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 ( +
+