hosonokotaro
diff --git a/‎.babelrc‎
Lines changed: 8 additions & 1 deletion b/‎.babelrc‎
Lines changed: 8 additions & 1 deletion
diff --git a/‎.github/dependabot.yml‎
Lines changed: 4 additions & 0 deletions b/‎.github/dependabot.yml‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎jest.config.json‎
Lines changed: 2 additions & 0 deletions b/‎jest.config.json‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎package-lock.json‎
Lines changed: 21975 additions & 41 deletions b/‎package-lock.json‎
Lines changed: 21975 additions & 41 deletions
diff --git a/‎package.json‎
Lines changed: 4 additions & 2 deletions b/‎package.json‎
Lines changed: 4 additions & 2 deletions
diff --git a/‎src/adapter/firebase.ts‎
Lines changed: 25 additions & 0 deletions b/‎src/adapter/firebase.ts‎
Lines changed: 25 additions & 0 deletions
diff --git a/‎src/components/CreatePost.test.tsx‎
Lines changed: 42 additions & 0 deletions b/‎src/components/CreatePost.test.tsx‎
Lines changed: 42 additions & 0 deletions
diff --git a/‎src/components/CreatePost.tsx‎
Lines changed: 46 additions & 0 deletions b/‎src/components/CreatePost.tsx‎
Lines changed: 46 additions & 0 deletions
diff --git a/‎src/components/EditPostList.test.tsx‎
Lines changed: 34 additions & 0 deletions b/‎src/components/EditPostList.test.tsx‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎src/components/EditPostList.tsx‎
Lines changed: 45 additions & 0 deletions b/‎src/components/EditPostList.tsx‎
Lines changed: 45 additions & 0 deletions
@@ -1,6 +1,13 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": 3,
+        "debug": true
+      }
+    ],
     "@babel/preset-react",
     [
       "@babel/preset-typescript",
 
@@ -7,3 +7,7 @@ updates:
       interval: 'weekly'
       day: 'saturday'
       timezone: 'Asia/Tokyo'
+    ignore:
+      - dependency-name: "husky"
+        # 5.x の新しいバージョンのみを無視する
+        versions: ["5.x"]
@@ -2,6 +2,8 @@
   "preset": "ts-jest",
   "moduleNameMapper": {
     "^@App/(.*)$": "<rootDir>/src/$1",
+    "^~/(.+)": "<rootDir>/src/$1",
+    "^@/(.+)": "<rootDir>/src/components/$1",
     ".+\\.(css|scss)$": "identity-obj-proxy"
   },
   "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
 
@@ -19,7 +19,6 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.13.8",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.12.17",
@@ -89,7 +88,10 @@
     "@types/mini-css-extract-plugin": "^1.2.2",
     "@types/react-redux": "^7.1.16",
     "axios": "^0.21.1",
+    "core-js": "^3.9.0",
+    "firebase": "^8.2.7",
     "lint-staged": "^10.5.4",
-    "react-redux": "^7.2.2"
+    "react-redux": "^7.2.2",
+    "regenerator-runtime": "^0.13.7"
   }
 }
@@ -0,0 +1,25 @@
+import 'firebase/auth';
+
+import firebase from 'firebase/app';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyBsC6ZAinkt3n3fB0B-Yo1UMqwqaoCzi4s',
+  authDomain: 'hosonokotaro-blog.firebaseapp.com',
+  databaseURL: 'https://hosonokotaro-blog.firebaseio.com',
+  projectId: 'hosonokotaro-blog',
+  storageBucket: 'hosonokotaro-blog.appspot.com',
+  messagingSenderId: '23911354523',
+  appId: '1:23911354523:web:56bec2eb2bf7d1b712f63e',
+};
+
+firebase.initializeApp(firebaseConfig);
+
+// NOTE: firebase 認証機能を利用する
+export const Auth = firebase.auth();
+
+// NOTE: Google 認証を利用する
+export const GoogleAuthProvider = new firebase.auth.GoogleAuthProvider();
+
+export type User = firebase.User;
+
+export default firebase;
@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import React from 'react';
+
+import { render, screen } from '~/testUtil';
+
+import CreatePost from './CreatePost';
+
+const handleSubmit = jest.fn();
+const onTitleChanged = jest.fn();
+
+it('it should render: CreatePost の input area に入れた文字が表示される', () => {
+  const title = 'test title';
+  const canSaveNewPost = true;
+
+  render(
+    <CreatePost
+      title={title}
+      handleSubmit={handleSubmit}
+      onTitleChanged={onTitleChanged}
+      canSaveNewPost={canSaveNewPost}
+    />
+  );
+
+  expect(screen.getByRole('textbox').getAttribute('value')).toEqual(title);
+});
+
+it('it should render: CreatePost の input area に入れた文字が表示されない', () => {
+  const title = '';
+  const canSaveNewPost = false;
+
+  render(
+    <CreatePost
+      title={title}
+      handleSubmit={handleSubmit}
+      onTitleChanged={onTitleChanged}
+      canSaveNewPost={canSaveNewPost}
+    />
+  );
+
+  expect(screen.getByRole('textbox').getAttribute('value')).toEqual(title);
+});
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {
+  StyledButton,
+  StyledInputText,
+  StyledLabel,
+  StyledSection,
+  StyledWrapper,
+} from './styledCreatePost';
+
+export interface Props {
+  title: string;
+  handleSubmit: () => void;
+  onTitleChanged: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  canSaveNewPost: boolean;
+}
+
+const CreatePost: React.FC<Props> = ({
+  title,
+  handleSubmit,
+  onTitleChanged,
+  canSaveNewPost,
+}) => {
+  return (
+    <StyledSection>
+      <h2>記事の新規作成</h2>
+      <StyledWrapper>
+        <form>
+          <StyledLabel htmlFor="postTitle">タイトル</StyledLabel>
+          <StyledInputText
+            type="text"
+            id="postTitle"
+            name="postTitle"
+            value={title}
+            onChange={onTitleChanged}
+          />
+        </form>
+        <StyledButton onClick={handleSubmit} disabled={!canSaveNewPost}>
+          記事を準備する
+        </StyledButton>
+      </StyledWrapper>
+    </StyledSection>
+  );
+};
+
+export default CreatePost;
@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom/extend-expect';
+
+import React from 'react';
+// NOTE: React Router をテストする場合は MemoryRouter を使用する
+import { Link, MemoryRouter } from 'react-router-dom';
+
+import { render, screen } from '~/testUtil';
+
+import EditPostList, { Post } from './EditPostList';
+
+const postList: Post[] = [
+  {
+    id: 'a1b2c3',
+    release: true,
+    createDate: '2021年1月10日 00:57',
+    routerLink: <Link to="/edit/a1b2c3">test title</Link>,
+  },
+  {
+    id: 'b2c3d4',
+    release: true,
+    createDate: '2021年1月11日 00:57',
+    routerLink: <Link to="/edit/b2c3d4">test title2</Link>,
+  },
+];
+
+it('should render: EditPostList に投稿記事一覧の各リンクが存在するか', () => {
+  render(
+    <MemoryRouter>
+      <EditPostList postList={postList} />
+    </MemoryRouter>
+  );
+
+  expect(screen.getAllByRole('link')).toHaveLength(postList.length);
+});
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import {
+  StyledPost,
+  StyledPosts,
+  StyledSection,
+  StyledTimestamp,
+} from './styledEditPostList';
+
+export interface Post {
+  id: string;
+  release: boolean;
+  createDate: string;
+  routerLink: React.ReactNode;
+}
+
+interface Props {
+  postList: Post[];
+}
+
+// TODO: どこかの処理で、release が false の状態だと弾く処理が入っているようだ
+const EditPostList: React.FC<Props> = ({ postList }) => {
+  return (
+    <StyledSection>
+      <h2>投稿された記事一覧</h2>
+      <StyledPosts>
+        {postList.map(({ id, release, createDate, routerLink }) => (
+          <StyledPost key={id}>
+            <div>
+              {!release && <span>【非公開】</span>}
+              {routerLink}
+            </div>
+            <StyledTimestamp>
+              作成日時: {createDate}
+              <br />
+              id: {id}
+            </StyledTimestamp>
+          </StyledPost>
+        ))}
+      </StyledPosts>
+    </StyledSection>
+  );
+};
+
+export default EditPostList;