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 (