Junior Science Lab

README.md

@@ -1,13 +1,44 @@
-# Happy Thoughts
 
-Replace this readme with your own information about your project.
+![og-image-survey](https://user-images.githubusercontent.com/112956568/227894906-f7cb0d3a-5038-4ca9-9645-7ce4e05e4eda.jpg)
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+
+
+# Happy Thoughts aka Junior Science Lab
+
+In this week's project we practice React state skills by fetching and posting data to an API.
+
+**What we needed to do**
+
+✓ Page should follow the design as closely as possible
+✓ List the most recent thoughts at the top and older thoughts at the bottom (sorted)
+✓ Our thoughts should show the content of the message and how many likes they've received
+✓ We should have a form to post new thoughts
+✓ We should implement the heart button to send likes on a thought
 
 ## 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?
+Finland has just been selected (6th time in a row) as the happiest country, even if we genuinely love darkness, depression, heavy metal, booze, and knives.
+Did you see Antonia’s amazing happy thoughts projects?!? –It was fantastic!! …But because she already shared all the happy thoughts we have in our dear country 😉 I chose to break some rules and do something slightly different:
+A website for Junior Science Lab. It’s a website where tech kiddos can share with the rest of the group the project they want to work on next.
+
+Biggest problems just adapting all the new stuff and things we have learned with JS and React...
+This week I had time to do site for just mobile.  ...Or the resto of it works as weell but it doesn't look too good
+
+This is how I sstructured the site:
+
+	1	Parent: This is the main component that handles fetching thoughts, sending thoughts, and liking thoughts. It renders the SubmitForm and ThoughtCard components.
+	2	ThoughtCard: This component takes in a list of thoughts and displays them. It shows the message, hearts (likes), and the time it was posted. It also has a button to like a thought.
+	3	SubmitForm: This component handles the form for submitting new thoughts. It has validation to check if the entered text is too short (less than 5 characters).
+	4	Footer: Simple footer with text and animation
+
+CSS files for styling :
+	1	ThoughtCard.css: This file contains the styles for the ThoughtCard component.
+	2	SubmitForm.css: This file contains the styles for the SubmitForm component.
+	3	index.css: This file contains the global styles for the application.
 
 ## 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.
+
+My mobile site:
+
+https://junior-science-lab.netlify.app

code/.eslintrc.json

@@ -9,23 +9,20 @@
   },
   "env": {
     "node": true,
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "parserOptions": {
     "parser": "@babel/eslint-parser",
     "requireConfigFile": false,
     "sourceType": "module",
-    "ecmaVersion": 2017,
-    "ecmaFeatures": {
-      "jsx": true,
-      "experimentalObjectRestSpread": true,
-      "modules": true
-    }
+    "ecmaVersion": 2018
   },
   "plugins": [
     "react-hooks"
   ],
   "rules": {
+    "no-underscore-dangle": "off",
     "react/function-component-definition": [
       2,
       {
@@ -128,4 +125,4 @@
     "react-hooks/exhaustive-deps": "warn",
     "semi": "off"
   }
-}
+}

code/eslintrc.json

@@ -0,0 +1,133 @@
+{
+  "extends": [
+    "airbnb"
+  ],
+  "globals": {
+    "document": true,
+    "window": true,
+    "process": true
+  },
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "parser": "@babel/eslint-parser",
+    "requireConfigFile": false,
+    "sourceType": "module",
+    "ecmaVersion": 2017,
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true,
+      "modules": true
+    }
+  },
+  "plugins": [
+    "react-hooks"
+  ],
+  "rules": {
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "arrow-body-style": "off",
+    "linebreak-style": 0,
+    "class-methods-use-this": "off",
+    "brace-style": [
+      "error",
+      "1tbs",
+      {
+        "allowSingleLine": true
+      }
+    ],
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
+    "consistent-return": "off",
+    "curly": "error",
+    "eol-last": "off",
+    "import/extensions": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "import/prefer-default-export": "off",
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/href-no-hash": "off",
+    "no-alert": "off",
+    "no-console": "off",
+    "no-debugger": "off",
+    "no-underscore-dangle": "off",
+    "no-param-reassign": "off",
+    "no-else-return": "off",
+    "no-irregular-whitespace": "error",
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 1
+      }
+    ],
+    "no-restricted-syntax": "off",
+    "object-curly-newline": [
+      "error",
+      {
+        "ObjectExpression": {
+          "consistent": true
+        },
+        "ObjectPattern": {
+          "multiline": true
+        }
+      }
+    ],
+    "prefer-template": "error",
+    "react/destructuring-assignment": "off",
+    "react/forbid-prop-types": "off",
+    "react/jsx-closing-bracket-location": [
+      "error",
+      {
+        "selfClosing": "after-props",
+        "nonEmpty": "after-props"
+      }
+    ],
+    "react/jsx-curly-spacing": [
+      "error",
+      {
+        "when": "never",
+        "children": true
+      }
+    ],
+    "react/jsx-filename-extension": "off",
+    "react/jsx-no-bind": "error",
+    "react/jsx-uses-react": "warn",
+    "react/jsx-wrap-multilines": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/no-danger": "off",
+    "react/no-did-mount-set-state": "error",
+    "react/no-did-update-set-state": "error",
+    "react/no-direct-mutation-state": "error",
+    "react/no-multi-comp": [
+      "error",
+      {
+        "ignoreStateless": true
+      }
+    ],
+    "react/no-string-refs": "error",
+    "react/prop-types": "off",
+    "react/require-extension": "off",
+    "react/sort-comp": "off",
+    "react/jsx-indent": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "semi": "off"
+  }
+}