Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TOTAL DISASTER - NOT working at all - W/ - Sad Thoughts and not a single happy one /Ylva K #451

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
# Happy Thoughts

Replace this readme with your own information about your project.

Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
Week 7 project with React - the task was to fetch happy thoughts from an API and showing them in a list plus have a form for new happy thoughts where people could post their happy thoughts in and make the new thoughts to also show up in the list.

## The problem

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
This week started off very good but ended in a catastrophical way for me...
With some help from a former student I managed to solve the problem and finally got my code to work - YEY! Big shoutout to Agnes Ahlman for helping me out.

I had the basic functions working but then when I wanted to add more functionality it just didn't work out and the page was completely blank/white with nothing showing up.
I've been crying, laughing and overall struggling this week but now with a working project I'm so happy and grateful.

## View it live

Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
https://happy-thoughts-w7-ylva-karlsson.netlify.app/
14 changes: 14 additions & 0 deletions code/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions code/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Expand Down
9 changes: 3 additions & 6 deletions code/src/App.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import HappyThoughtsFeed from 'components/HappyThoughtsFeed';

export const App = () => {
return (
<div>
Find me in src/app.js!
</div>
);
}
return <HappyThoughtsFeed />;
};
24 changes: 24 additions & 0 deletions code/src/components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* eslint-disable linebreak-style */
import React from 'react';

const Footer = () => {
return (
<footer>
<div aria-hidden="true" className="contact">
<p>
CREATED BY YLVA KARLSSON
<br />
STUDENT @ TECHNIGO 2023
</p>
<button
type="button"
className="contactMe"
onClick={() => window.open('https://www.linkedin.com/in/ylvakarlsson87/')}>
Contact
</button>
</div>
</footer>
);
};

export default Footer;
45 changes: 45 additions & 0 deletions code/src/components/HappyThought.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/* eslint-disable linebreak-style */
/* eslint-disable padded-blocks */
/* eslint-disable no-trailing-spaces */
import React from 'react';
import moment from 'moment';
// {props.text}

// const HappyThought = (props) => {
const HappyThought = ({ thoughtId, text, hearts, timestamp, handleHearts }) => {

const heartButtonGrey = (
<button
type="submit"
className="heart-button grey-background"
onClick={() => handleHearts(thoughtId)}>
❤️
</button>
);

const heartButtonPink = (
<button
type="submit"
className="heart-button pink-background"
onClick={() => handleHearts(thoughtId)}>
❤️
</button>
);

return (
<article className="happy-thought-card">
<p>{text}</p>
<div className="card-bottom">
<div className="card-bottom-left">
{hearts !== 0 ? heartButtonPink : heartButtonGrey}
<span> x {hearts}</span>
</div>
<div className="card-bottom-right-timestamp">
<p>{moment(timestamp).startOf('hour').fromNow()}</p>
</div>
</div>
</article>
);
};

export default HappyThought;
108 changes: 108 additions & 0 deletions code/src/components/HappyThoughtsFeed.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/* eslint-disable react/jsx-closing-bracket-location */
/* eslint-disable no-underscore-dangle */
/* eslint-disable brace-style */
/* eslint-disable object-curly-newline */
/* eslint-disable linebreak-style */
/* eslint-disable import/no-named-as-default */
/* eslint-disable no-trailing-spaces */
import React, { useState, useEffect } from 'react';
import NewHappyThought from 'components/NewHappyThought';
import HappyThoughtsList from './HappyThoughtsList';
import Loading from './Loading';
import Footer from './Footer';

const HappyThoughtsFeed = () => {
const [thoughtsList, setThoughtsList] = useState([]);
const [loading, setLoading] = useState(false);
// const [newHappyThought, setNewHappyThought] = useState('');

const API_URL = 'https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts';

const fetchThoughts = () => {
setLoading(true);
fetch(API_URL)
.then((response) => response.json())
.then((data) => setThoughtsList(data))
.catch((error) => console.log(error))
.finally(() => setLoading(false));
}

useEffect(() => {
fetchThoughts();
}, []);

// const onFormSubmit = (event) => {
// setNewHappyThought(event.target.value);
// };

// const newHappyThought = () => {
// setNewHappyThought('');
// setLoading(false);
// };

const onFormSubmit = (event) => {
event.preventDefault();

const val = event.target['thought-input'].value;

const options = {
method: 'POST',
body: JSON.stringify({ message: val }),
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
}
};

fetch(API_URL, options)
.then((response) => response.json())
.then((data) => { setThoughtsList([data, ...thoughtsList]);
})
.catch((error) => console.log(error))
.finally(() => setLoading(false));
};

const handleHearts = (id) => {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
};

fetch(`https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/${id}/like`, options)
.then((res) => res.json())
.then(console.log('likes'))
.then((error) => console.error(error))
.finally(() => fetchThoughts(''));
};

return (
<main className="happy-thoughts-app">
<h1>Happy Thoughts!</h1>
<NewHappyThought
handleFormSubmit={onFormSubmit}
/>
<HappyThoughtsList
loading={loading}
thoughtsList={thoughtsList}
handleHearts={handleHearts}
/>
{/* {thoughtsList.map((thought) => (
<HappyThought
key={thought._id}
text={thought.message}
hearts={thought.hearts}
timestamp={thought.createdAt}
handleHearts={() => handleHearts(thought._id)}
/>
))} */}
{loading && <Loading />}
<div className="footer">
<Footer />
</div>
</main>
);
};

export default HappyThoughtsFeed;
21 changes: 21 additions & 0 deletions code/src/components/HappyThoughtsList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/* eslint-disable no-underscore-dangle */
import React from 'react';
import HappyThought from './HappyThought';

const HappyThoughtsList = ({ thoughtsList, handleHearts }) => {
return (
<section className="happy-thoughts-list">
{thoughtsList.map((thought) => (
<HappyThought
key={thought._id}
thoughtId={thought._id}
text={thought.message}
hearts={thought.hearts}
timestamp={thought.createdAt}
handleHearts={() => handleHearts(thought._id)} />
))}
</section>
);
};

export default HappyThoughtsList;
11 changes: 11 additions & 0 deletions code/src/components/Loading.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

const Loading = () => {
return (
<div className="loading-overlay">
<div className="loading-spinner" />
</div>
);
};

export default Loading;
50 changes: 50 additions & 0 deletions code/src/components/NewHappyThought.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/* eslint-disable max-len */
/* eslint-disable linebreak-style */
/* eslint-disable padded-blocks */
/* eslint-disable no-trailing-spaces */
import React, { useState } from 'react';
import JSConfetti from 'js-confetti';

const NewHappyThought = ({ handleFormSubmit }) => {
const [newThought, setNewThought] = useState('');
const jsConfetti = new JSConfetti();
const isSubmitButtonDisabled = newThought.length < 5 || newThought.length > 140;

return (
<form
className="new-happy-thought-form-wrapper"
onSubmit={handleFormSubmit}>
<label htmlFor="thought-input">
What makes you happy right now?
<textarea
className="thought-input"
id="thought-input"
onChange={(e) => setNewThought(e.target.value)}
rows="4"
cols="30"
placeholder="Write your happy thought here (at least 5 characters and up to 140 characters)" />
</label>
<div className="thought-length">
<span>{newThought.length}/140</span>
{newThought.length > 140 && <span>Sorry it`&apos;`s too long, please keep within the maximum of 140 characters!</span>}
</div>
<button
className="send-new-thought-button"
type="submit"
disabled={isSubmitButtonDisabled}
onClick={() => {
(jsConfetti.addConfetti({
confettiRadius: 8,
confettiNumber: 500,
confettiColors: [
'#d44e62', '#fcfee1', '#eebed9', '#b4c8b7', '#fb91c6', '#a0bbd0'
]
}))
}}>
<span className="button-text">❤️ Share Happy Thought ❤️</span>
</button>
</form>
);
};

export default NewHappyThought;
Loading