Develop

.lh/.lhignore

@@ -0,0 +1,6 @@
+# list file to not track by the local-history extension. comment line starts with a '#' character
+# each line describe a regular expression pattern (search for 'Javascript regex')
+# it will relate to the workspace directory root. for example:
+# '.*\.txt' ignores any file with 'txt' extension
+# '/test/.*' ignores all the files under the 'test' directory
+# '.*/test/.*' ignores all the files under any 'test' directory (even under sub-folders)

.lh/README.md.json

@@ -0,0 +1,34 @@
+{
+    "sourceFile": "README.md",
+    "activeCommit": 0,
+    "commits": [
+        {
+            "activePatchIndex": 4,
+            "patches": [
+                {
+                    "date": 1711188626014,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n"
+                },
+                {
+                    "date": 1711189090540,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -4,9 +4,9 @@\n \n This task is similar to [Static List of TODOs](https://github.com/mate-academy/react_static-list-of-todos#react-static-list-of-todos), but you should do everything yourself:\n \n <!-- - don't change classes in the given markup (tests use them); -->\n-- create all required types in `./src/types/`;\n+<!-- - create all required types in `./src/types/`; -->\n - prepare `posts` by adding a `user` and `comments` to each `post` (each comment has a `postId`);\n - split the `App` into components based on given CSS blocks;\n   - styles from `App.scss` should be moved to separate files, as well. E.g.: `PostList.scss`;\n - `List` components should take an array of corresponding objects and render one `Info` component per object;\n"
+                },
+                {
+                    "date": 1711370233731,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -3,10 +3,10 @@\n > [React + Typescript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript)\n \n This task is similar to [Static List of TODOs](https://github.com/mate-academy/react_static-list-of-todos#react-static-list-of-todos), but you should do everything yourself:\n \n-<!-- - don't change classes in the given markup (tests use them); -->\n-<!-- - create all required types in `./src/types/`; -->\n+- don't change classes in the given markup (tests use them); -->\n+<!-- - create all required types in `./src/types/`;\n - prepare `posts` by adding a `user` and `comments` to each `post` (each comment has a `postId`);\n - split the `App` into components based on given CSS blocks;\n   - styles from `App.scss` should be moved to separate files, as well. E.g.: `PostList.scss`;\n - `List` components should take an array of corresponding objects and render one `Info` component per object;\n"
+                },
+                {
+                    "date": 1711370239982,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -4,9 +4,9 @@\n \n This task is similar to [Static List of TODOs](https://github.com/mate-academy/react_static-list-of-todos#react-static-list-of-todos), but you should do everything yourself:\n \n - don't change classes in the given markup (tests use them); -->\n-<!-- - create all required types in `./src/types/`;\n+- create all required types in `./src/types/`;\n - prepare `posts` by adding a `user` and `comments` to each `post` (each comment has a `postId`);\n - split the `App` into components based on given CSS blocks;\n   - styles from `App.scss` should be moved to separate files, as well. E.g.: `PostList.scss`;\n - `List` components should take an array of corresponding objects and render one `Info` component per object;\n"
+                },
+                {
+                    "date": 1711384158219,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -16,5 +16,5 @@\n - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.\n - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).\n - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).\n - Open one more terminal and run tests with `npm test` to ensure your solution is correct.\n-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_static-list-of-posts/) and add it to the PR description.\n+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://marinatea.github.io/react_static-list-of-posts/) and add it to the PR description.\n"
+                }
+            ],
+            "date": 1711188626014,
+            "name": "Commit-0",
+            "content": "# React Static List of Posts\n\n> [React + Typescript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript)\n\nThis task is similar to [Static List of TODOs](https://github.com/mate-academy/react_static-list-of-todos#react-static-list-of-todos), but you should do everything yourself:\n\n<!-- - don't change classes in the given markup (tests use them); -->\n- create all required types in `./src/types/`;\n- prepare `posts` by adding a `user` and `comments` to each `post` (each comment has a `postId`);\n- split the `App` into components based on given CSS blocks;\n  - styles from `App.scss` should be moved to separate files, as well. E.g.: `PostList.scss`;\n- `List` components should take an array of corresponding objects and render one `Info` component per object;\n- `Info` components should take one object and render its data.\n\n## Instructions\n- Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save.\n- Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).\n- Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).\n- Open one more terminal and run tests with `npm test` to ensure your solution is correct.\n- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_static-list-of-posts/) and add it to the PR description.\n"
+        }
+    ]
+}

.lh/src/App.scss.json

@@ -0,0 +1,38 @@
+{
+    "sourceFile": "src/App.scss",
+    "activeCommit": 0,
+    "commits": [
+        {
+            "activePatchIndex": 5,
+            "patches": [
+                {
+                    "date": 1711191090310,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n"
+                },
+                {
+                    "date": 1711191423662,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -10,11 +10,5 @@\n .UserInfo {\n   font-weight: bold;\n }\n \n-.CommentList {\n-  display: flex;\n-  flex-direction: column;\n-  gap: 0.7em;\n-  background-color: #eee;\n-  padding: 1em;\n-}\n+\n"
+                },
+                {
+                    "date": 1711307517899,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,10 +5,30 @@\n .App__title {\n   text-align: center;\n }\n \n+.PostInfo {\n+  margin: 10px auto;\n+  width: 90%;\n+  border: 1px solid #000;\n+  border-radius: 8px;\n+  background-color: lightgray;\n+  padding: 1em;\n \n-.UserInfo {\n-  font-weight: bold;\n+  &__title {\n+    margin: 0;\n+  }\n+\n+  &__header {\n+    margin-bottom: 1em;\n+  }\n }\n \n \n+\n+.CommentList {\n+  display: flex;\n+  flex-direction: column;\n+  gap: 0.7em;\n+  background-color: #eee;\n+  padding: 1em;\n+}\n"
+                },
+                {
+                    "date": 1711307548989,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -0,0 +1,19 @@\n+iframe {\n+  display: none;\n+}\n+\n+.App__title {\n+  text-align: center;\n+}\n+\n+\n+\n+\n+\n+.CommentList {\n+  display: flex;\n+  flex-direction: column;\n+  gap: 0.7em;\n+  background-color: #eee;\n+  padding: 1em;\n+}\n"
+                },
+                {
+                    "date": 1711307556082,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -16,38 +16,4 @@\n   gap: 0.7em;\n   background-color: #eee;\n   padding: 1em;\n }\n-iframe {\n-  display: none;\n-}\n-\n-.App__title {\n-  text-align: center;\n-}\n-\n-.PostInfo {\n-  margin: 10px auto;\n-  width: 90%;\n-  border: 1px solid #000;\n-  border-radius: 8px;\n-  background-color: lightgray;\n-  padding: 1em;\n-\n-  &__title {\n-    margin: 0;\n-  }\n-\n-  &__header {\n-    margin-bottom: 1em;\n-  }\n-}\n-\n-\n-\n-.CommentList {\n-  display: flex;\n-  flex-direction: column;\n-  gap: 0.7em;\n-  background-color: #eee;\n-  padding: 1em;\n-}\n"
+                },
+                {
+                    "date": 1711307586875,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -9,11 +9,4 @@\n \n \n \n \n-.CommentList {\n-  display: flex;\n-  flex-direction: column;\n-  gap: 0.7em;\n-  background-color: #eee;\n-  padding: 1em;\n-}\n"
+                }
+            ],
+            "date": 1711191090310,
+            "name": "Commit-0",
+            "content": "iframe {\n  display: none;\n}\n\n.App__title {\n  text-align: center;\n}\n\n\n.UserInfo {\n  font-weight: bold;\n}\n\n.CommentList {\n  display: flex;\n  flex-direction: column;\n  gap: 0.7em;\n  background-color: #eee;\n  padding: 1em;\n}\n"
+        }
+    ]
+}

.lh/src/App.tsx.json

@@ -0,0 +1,42 @@
+{
+    "sourceFile": "src/App.tsx",
+    "activeCommit": 0,
+    "commits": [
+        {
+            "activePatchIndex": 6,
+            "patches": [
+                {
+                    "date": 1711188445987,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n"
+                },
+                {
+                    "date": 1711188523981,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,11 +1,11 @@\n import React from 'react';\n \n import './App.scss';\n \n-import postsFromServer from './api/posts';\n-import commentsFromServer from './api/comments';\n-import usersFromServer from './api/users';\n+// import postsFromServer from './api/posts';\n+// import commentsFromServer from './api/comments';\n+// import usersFromServer from './api/users';\n \n export const App: React.FC = () => (\n   <section className=\"App\">\n     <h1 className=\"App__title\">Static list of posts</h1>\n"
+                },
+                {
+                    "date": 1711190720618,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -9,9 +9,9 @@\n export const App: React.FC = () => (\n   <section className=\"App\">\n     <h1 className=\"App__title\">Static list of posts</h1>\n \n-    <div className=\"PostList\">\n+    {/* <div className=\"PostList\">\n       <div className=\"PostInfo\">\n         <div className=\"PostInfo__header\">\n           <h3 className=\"PostInfo__title\">qui est esse</h3>\n \n@@ -100,7 +100,7 @@\n             </div>\n           </div>\n         </div>\n       </div>\n-    </div>\n+    </div> */}\n   </section>\n );\n"
+                },
+                {
+                    "date": 1711190736592,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -9,9 +9,9 @@\n export const App: React.FC = () => (\n   <section className=\"App\">\n     <h1 className=\"App__title\">Static list of posts</h1>\n \n-    {/* <div className=\"PostList\">\n+    <div className=\"PostList\">\n       <div className=\"PostInfo\">\n         <div className=\"PostInfo__header\">\n           <h3 className=\"PostInfo__title\">qui est esse</h3>\n \n@@ -100,7 +100,7 @@\n             </div>\n           </div>\n         </div>\n       </div>\n-    </div> */}\n+    </div>\n   </section>\n );\n"
+                },
+                {
+                    "date": 1711191496803,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,6 +1,6 @@\n import React from 'react';\n-\n+import \n import './App.scss';\n \n // import postsFromServer from './api/posts';\n // import commentsFromServer from './api/comments';\n@@ -9,9 +9,9 @@\n export const App: React.FC = () => (\n   <section className=\"App\">\n     <h1 className=\"App__title\">Static list of posts</h1>\n \n-    <div className=\"PostList\">\n+    {/* <div className=\"PostList\">\n       <div className=\"PostInfo\">\n         <div className=\"PostInfo__header\">\n           <h3 className=\"PostInfo__title\">qui est esse</h3>\n \n@@ -100,7 +100,7 @@\n             </div>\n           </div>\n         </div>\n       </div>\n-    </div>\n+    </div> */}\n   </section>\n );\n"
+                },
+                {
+                    "date": 1711191511407,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,7 +1,7 @@\n import React from 'react';\n import { PostList } from './components/PostList';\n-\n+i\n import './App.scss';\n \n // import postsFromServer from './api/posts';\n // import commentsFromServer from './api/comments';\n"
+                },
+                {
+                    "date": 1711191583892,
+                    "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n import postsFromServer from './api/posts';\n import commentsFromServer from './api/comments';\n import usersFromServer from './api/users';\n \n-const addComments\n+const addCommentsP\n \n export const App: React.FC = () => (\n   <section className=\"App\">\n     <h1 className=\"App__title\">Static list of posts</h1>\n"
+                }
+            ],
+            "date": 1711188445987,
+            "name": "Commit-0",
+            "content": "import React from 'react';\n\nimport './App.scss';\n\nimport postsFromServer from './api/posts';\nimport commentsFromServer from './api/comments';\nimport usersFromServer from './api/users';\n\nexport const App: React.FC = () => (\n  <section className=\"App\">\n    <h1 className=\"App__title\">Static list of posts</h1>\n\n    <div className=\"PostList\">\n      <div className=\"PostInfo\">\n        <div className=\"PostInfo__header\">\n          <h3 className=\"PostInfo__title\">qui est esse</h3>\n\n          <p>\n            {' Posted by  '}\n\n            <a className=\"UserInfo\" href=\"mailto:[email protected]\">\n              Leanne Graham\n            </a>\n          </p>\n        </div>\n\n        <p className=\"PostInfo__body\">\n          est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea\n          dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut\n          reiciendis qui aperiam non debitis possimus qui neque nisi nulla\n        </p>\n\n        <hr />\n\n        <b data-cy=\"NoCommentsMessage\">No comments yet</b>\n      </div>\n\n      <div className=\"PostInfo\">\n        <div className=\"PostInfo__header\">\n          <h3 className=\"PostInfo__title\">doloremque illum aliquid sunt</h3>\n\n          <p>\n            {' Posted by  '}\n\n            <a className=\"UserInfo\" href=\"mailto:[email protected]\">\n              Patricia Lebsack\n            </a>\n          </p>\n        </div>\n\n        <p className=\"PostInfo__body\">\n          deserunt eos nobis asperiores et hic est debitis repellat molestiae\n          optio nihil ratione ut eos beatae quibusdam distinctio maiores earum\n          voluptates et aut adipisci ea maiores voluptas maxime\n        </p>\n\n        <div className=\"CommentList\">\n          <div className=\"CommentInfo\">\n            <div className=\"CommentInfo__title\">\n              <strong className=\"CommentInfo__name\">pariatur omnis in</strong>\n\n              {' by '}\n\n              <a\n                className=\"CommentInfo__email\"\n                href=\"mailto:[email protected]\"\n              >\n                [email protected]\n              </a>\n            </div>\n\n            <div className=\"CommentInfo__body\">\n              dolorum voluptas laboriosam quisquam ab totam beatae et aut\n              aliquid optio assumenda voluptas velit itaque quidem voluptatem\n              tempore cupiditate in itaque sit molestiae minus dolores magni\n            </div>\n          </div>\n\n          <div className=\"CommentInfo\">\n            <div className=\"CommentInfo__title\">\n              <strong className=\"CommentInfo__name\">\n                odio adipisci rerum aut animi\n              </strong>\n\n              {' by '}\n\n              <a\n                className=\"CommentInfo__email\"\n                href=\"mailto:[email protected]\"\n              >\n                [email protected]\n              </a>\n            </div>\n\n            <div className=\"CommentInfo__body\">\n              quia molestiae reprehenderit quasi aspernatur aut expedita\n              occaecati aliquam eveniet laudantium omnis quibusdam delectus\n              saepe quia accusamus maiores nam est cum et ducimus et vero\n              voluptates excepturi deleniti ratione\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n);\n"
+        }
+    ]
+}