Feature/add editpage

.babelrc

@@ -1,6 +1,13 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": 3,
+        "debug": true
+      }
+    ],
     "@babel/preset-react",
     [
       "@babel/preset-typescript",

.github/dependabot.yml

@@ -7,3 +7,7 @@ updates:
       interval: 'weekly'
       day: 'saturday'
       timezone: 'Asia/Tokyo'
+    ignore:
+      - dependency-name: "husky"
+        # 5.x の新しいバージョンのみを無視する
+        versions: ["5.x"]

jest.config.json

@@ -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"],

package.json

@@ -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"
   }
 }

src/adapter/firebase.ts

@@ -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;

src/components/CreatePost.test.tsx

@@ -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);
+});

src/components/CreatePost.tsx

@@ -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;

src/components/EditPostList.test.tsx

@@ -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);
+});

src/components/EditPostList.tsx

@@ -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;

src/components/Login.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Props as EditProps } from '~/pages/edit/useLogin';
+
+import { StyledLogin, StyledUid } from './styledLogin';
+
+const Login: React.FC<EditProps> = ({ user, login, logout }) => {
+  return (
+    <StyledLogin>
+      {user ? (
+        <button onClick={logout}>ログアウトする</button>
+      ) : (
+        <button onClick={login}>ログインする</button>
+      )}
+      {user && <StyledUid>uid: {user.uid}</StyledUid>}
+    </StyledLogin>
+  );
+};
+
+export default Login;

src/components/styledCreatePost.ts

@@ -0,0 +1,48 @@
+import { styled } from '@linaria/react';
+
+export const StyledSection = styled.section`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 40px 0 40px;
+`;
+
+export const StyledWrapper = styled.div`
+  padding-top: 20px;
+`;
+
+export const StyledLabel = styled.label`
+  display: block;
+  input + & {
+    margin-top: 20px;
+  }
+  textarea + & {
+    margin-top: 20px;
+  }
+`;
+
+export const StyledLabelInlineBlock = styled.label`
+  display: inline-block;
+  textarea + & {
+    margin-top: 20px;
+  }
+`;
+
+export const StyledInputText = styled.input`
+  width: 100%;
+  label + & {
+    margin-top: 4px;
+  }
+`;
+
+export const StyledTextarea = styled.textarea`
+  width: 100%;
+  max-width: 100%;
+  min-height: 400px;
+  label + & {
+    margin-top: 4px;
+  }
+`;
+
+export const StyledButton = styled.button`
+  margin-top: 20px;
+`;

src/components/styledEditPostList.ts

@@ -0,0 +1,26 @@
+import { styled } from '@linaria/react';
+
+export const StyledSection = styled.section`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 40px 0 40px;
+`;
+
+export const StyledPosts = styled.div`
+  padding-top: 20px;
+`;
+
+export const StyledPost = styled.div`
+  & + div {
+    padding-top: 20px;
+  }
+`;
+
+export const StyledTimestamp = styled.div`
+  padding-top: 20px;
+  & + label {
+    margin-top: 80px;
+    padding-top: 80px;
+    border-top: 1px solid #333;
+  }
+`;

src/components/styledLogin.ts

@@ -0,0 +1,12 @@
+import { styled } from '@linaria/react';
+
+export const StyledLogin = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px;
+  text-align: center;
+`;
+
+export const StyledUid = styled.div`
+  margin-top: 20px;
+`;

src/App.test.tsx → src/pages/App.test.tsx

@@ -3,9 +3,9 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { Provider } from 'react-redux';
 
+import store from '../store/store';
+import { render, screen } from '../testUtil';
 import App from './App';
-import store from './store';
-import { render, screen } from './testUtil';
 
 it('it should render: App の article に指定された className が存在する', () => {
   // NOTE: App は index に記載がある通り、Provider で wrap する必要がある

src/App.tsx → src/pages/App.tsx

@@ -4,10 +4,10 @@ import { Helmet } from 'react-helmet';
 import { hot } from 'react-hot-loader/root';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Footer from './components/Footer';
-import Header from './components/Header';
-import Pages from './pages/Pages';
-import ScrollToTop from './utility/ScrollToTop';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import Pages from '../pages/Pages';
+import ScrollToTop from '../utility/ScrollToTop';
 
 const App: React.FC = () => {
   return (