Feature/letter receive

.eslintrc.js

@@ -30,5 +30,11 @@ module.exports = {
     '@typescript-eslint/ban-types': 'off',
     'react/prop-types': 'off',
     '@typescript-eslint/no-empty-interface': 'warn',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
-};
+};

package.json

@@ -39,10 +39,11 @@
     ]
   },
   "devDependencies": {
+    "@types/faker": "^5.1.6",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
@@ -51,6 +52,7 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
+    "faker": "^5.3.1",
     "prettier": "^2.2.1",
     "typescript": "^4.0.3"
   }

src/Router.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Home from './pages/HomePage';
+import LettersPage from './pages/LettersPage';
+import LettersReadPage from './pages/LetterReadPage';
 
 const Router: React.FC = () => {
   return (
     <Switch>
       <Route exact path="/" component={Home} />
+      <Route exact path="/letters" component={LettersPage} />
+      <Route exact path="/letter-read/:id" component={LettersReadPage} />
       <Route path="/">404 not found</Route>
     </Switch>
   );

src/components/Letter/Letter.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import Text from '../Text/Text';
+import { LetterDataType } from '../../constants/Letters';
+
+export interface LetterProps extends Omit<LetterDataType, 'id'> {
+  content: string;
+  thumbnail: string;
+  writer: string;
+}
+
+const Wrapper = styled.div``;
+
+const Writer = styled.div``;
+
+const Content = styled.div``;
+
+const Letter: React.FC<LetterDataType> = ({ content, writer }) => {
+  return (
+    <Wrapper>
+      <Text>
+        <Writer>{writer}</Writer>
+      </Text>
+      <Content>{content}</Content>
+    </Wrapper>
+  );
+};
+
+export default Letter;

src/components/Letter/LetterThumbnail.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
+import { LetterDataType } from '../../constants/Letters';
+import Text from '../Text/Text';
+
+export interface LetterProps extends Omit<LetterDataType, 'content'> {
+  id: string;
+  thumbnail: string;
+  writer: string;
+}
+
+const Wrapper = styled.div``;
+
+const Writer = styled.div``;
+
+const Thumbnail = styled.div``;
+
+const LetterThumbnail: React.FC<LetterProps> = ({ thumbnail, writer, id }) => {
+  const history = useHistory();
+  return (
+    <Wrapper onClick={() => history.push(`/letter-read/${id}`)}>
+      <Text>
+        <Writer>{writer}</Writer>
+      </Text>
+      <Thumbnail>{thumbnail}</Thumbnail>
+    </Wrapper>
+  );
+};
+
+export default LetterThumbnail;

src/constants/Letters.ts

@@ -0,0 +1,36 @@
+import faker from 'faker';
+
+export interface LetterDataType {
+  id: string;
+  content: string;
+  thumbnail: string;
+  writer: string;
+}
+
+export const emptyLetter: LetterDataType = {
+  id: '',
+  content: '',
+  writer: '',
+  thumbnail: '',
+};
+
+export const letters: LetterDataType[] = [
+  {
+    content: faker.lorem.sentences(),
+    id: faker.random.uuid(),
+    thumbnail: faker.lorem.sentence(),
+    writer: faker.name.firstName(),
+  },
+  {
+    content: faker.lorem.sentences(),
+    id: faker.random.uuid(),
+    thumbnail: faker.lorem.sentence(),
+    writer: faker.name.firstName(),
+  },
+  {
+    content: faker.lorem.sentences(),
+    id: faker.random.uuid(),
+    thumbnail: faker.lorem.sentence(),
+    writer: faker.name.firstName(),
+  },
+];

src/pages/LetterReadPage.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+import Letter from '../components/Letter/Letter';
+import { LetterDataType, letters, emptyLetter } from '../constants/Letters';
+
+const Wrapper = styled.div``;
+
+const ExitButton = styled.button``;
+
+const LetterReadPage: React.FC = () => {
+  const history = useHistory();
+  const letterId = history.location.pathname.substring(13);
+  const letterToRead: LetterDataType =
+    letters.find((letter) => letter.id === letterId) || emptyLetter;
+  return (
+    <Wrapper>
+      <Letter {...letterToRead} />
+      <ExitButton onClick={() => history.goBack()}>Return to mailbox</ExitButton>
+    </Wrapper>
+  );
+};
+
+export default LetterReadPage;

src/pages/LettersPage.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+import LetterThumbnail from '../components/Letter/LetterThumbnail';
+import { letters } from '../constants/Letters';
+const Wrapper = styled.div``;
+
+const LettersPage: React.FC = () => {
+  return (
+    <Wrapper>
+      {letters.map((letter) => {
+        return <LetterThumbnail key={letter.id} {...letter} />;
+      })}
+    </Wrapper>
+  );
+};
+
+export default LettersPage;

yarn.lock

@@ -1798,6 +1798,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/faker@^5.1.6":
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.1.6.tgz#f029aaebfc2d7931a3d729c0888c15f0187d2453"
+  integrity sha512-D+gfFWR/YCvlrYL8lgNZO1jKgIUW+cfhxsgMOqUMYwCI+tl0htD7vCCXp/oJsIxJpxuI7zqmo3gpVQBkFCM4iA==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -1908,12 +1913,12 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-dom@^16.9.8":
-  version "16.9.10"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f"
-  integrity sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw==
+"@types/react-dom@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
+  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "*"
 
 "@types/react-router-dom@^5.1.7":
   version "5.1.7"
@@ -1932,22 +1937,14 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@^17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
   integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^16", "@types/react@^16.9.53":
-  version "16.14.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
-  integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
 "@types/[email protected]":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -5211,6 +5208,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+faker@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.3.1.tgz#67f8f5c170b97a76b875389e0e8b9155da7b4853"
+  integrity sha512-sVdoApX/awJHO9DZHZsHVaJBNFiJW0n3lPs0q/nFxp/Mtya1dr2sCMktST3mdxNMHjkvKTTMAW488E+jH1eSbg==
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"