Feature/typescript #112
Open
Feature/typescript #112
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…and Footer inside a div. Add color to the Footer text.
…HappyWall. Add sections in the index.css file for better overview. Add HappyBoard and HappyWall components to App.jsx.
…ize in input field and submit button.
…BASE_URL and import useEffect and useState to the HappyWall component, but as comments to avoid errors.
…onospace to the button, as well as border-radius to make it oval, and background-color grey.
…d add a border around it
… useEffect to fetch Happy thoughts from the BASE_URL using an async/await function. Store the fetched thoughts in the 'thoughts' state using the setThoughts function. Include an empty dependency array in useEffect to ensure the fetch only runs once when the component mounts, preventing repeated API calls.
…ntainer for the styling. Map through the happyPosts array and use post._id as a unique key for each item/post. Add className post-box to display the message and hearts (likes). Add styling to the post-boxes and post-container.
…he return, add onClick function to add likes to a unique post
…notLinkedClass and likedClass.
… of the like button.
… size on the heart-icon. Style the like button.
… BASE_URL that is used in the two components HappyBoard and HappyWall. Use Async/await to fetch BASE_URL and POST the body to the HappyWall. If response is ok, clear input field. Add Error handling.
…e to the input field to prevent end-user from changing size of the field.
…size of the field
…icked to a darker grey for a higher contrast ratio.
Added link to Happy Thought project in GitHib.
Add a link to README file in Github, under the Github link in the footer.
…nd alignment to fit the ”loading” text. Add link to the animated dots in the README file. Add a delay to make the loading message appear since slow internet did barely work.
…fferent components.
…ll so the fetchHappyPosts function can be passed directly to HappyBoard as a prop (updateFormData).
…cript by updating all React components to .tsx files. Updated paths that got broken when converting.
… PostList to TypeScript. Props and , and parameter are still to be defined.
…ne happyPosts as an array of HappyPost objects. Define the state for loading as a boolean (true/false). Define that postId is a number. Add comments that start with TypeScript: where TypeScript is defined.
… HappyPost object, and one to define the PostListProps used in an array of HappyPosts and the function for adding likes to a post.
…e Main by adding ! to tell TypeScript that root is never null or undefined.
… Promise<void>. Updated README with a section explaining the Event-related TypeScript issue and how it was resolved.
…*-d-ts'. The the new file, declare that .svg files should be treated as strings
JennieDalgren
approved these changes
Dec 4, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Netlify link
Project Happy Thoughts TypeScript Version
For details regarding the TypeScript project, please see README-feature.md.