nataliaconde

/* Journal.tsx */
<div className="section">
	{journal.map((item) => (
	  <div className="card">
	    <div className="card-text">
	      <h3>{item.get("title")}</h3>
	      <p>{item.get("content")}</p>
	    </div>
	
	    <div className="buttons">

nataliaconde

/* Journal.tsx */
const deleteJournal = async (id) => {
  try {
    const Journal = Parse.Object.extend("Journal");
    const result = new Journal();
    result.id = id;
    await result.destroy();
    const newJournals = journal.filter((item) => item.id !== id);
    setJournal(newJournals);
  } catch (error) {

nataliaconde

<!-- index.astro -->
---
import Layout from "../layouts/Layout.astro";
import Journal from "../components/Journal";
---

<Layout>
	<nav>
		<a href='/journal'>Log your experience &#x270F</a>
	</nav>

nataliaconde

/**/
.card{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    border-radius: 12px;
    background-color: #ffffff;
    margin-block-start: 2rem;
}

nataliaconde

/*Journal.tsx*/
{
  journal.map((item) => (
    <div className="card">
      <div className="card-text">
        <h3>{item.get("title")}</h3>
        <p>{item.get("content")}</p>
      </div>

      <div className="buttons">

nataliaconde

/*Journal.tsx*/
const [journal, setJournal] = React.useState([]);

const fetchJournal = async () => {
  try {
    const query = new Parse.Query("Journal");
    const results = await query.find();
    setJournal(results);
  } catch (error) {
    console.log(error);

nataliaconde

/*Journal.tsx*/
const Journal = () => {
  return <div className="section"></div>;
};

export default Journal;

nataliaconde

/*Journal.tsx*/
import React from 'react'
import Parse from "parse/dist/parse.min.js";

Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";

nataliaconde

<!-- journal.astro -->
<script>
	import Parse from "parse/dist/parse.min.js";
	
	Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);
	Parse.serverURL = "<https://parseapi.back4app.com/>";
	
	const title = document.querySelector('input.title') as HTMLInputElement;
	const body = document.querySelector('textarea.body') as HTMLTextAreaElement;
	const button = document.querySelector('button.log');

nataliaconde

<!-- journal.astro-->
---
    import Layout from "../layouts/Layout.astro";
---

<Layout>
  <form>
      <input name="title" type='text' placeholder="Title" id="title" class="title"/>
      <textarea name="body"  cols="30" rows="10" placeholder="Body..." class="body"></textarea>
      <div>