ca-archived · ffjlabo · Feb 20, 2020 · Feb 23, 2020 · Feb 24, 2020 · Feb 25, 2020
diff --git a/ffjlabo/.babelrc b/ffjlabo/.babelrc
@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": true
+        }
+      }
+    ]
+  ]
+}
diff --git a/ffjlabo/.env.sample b/ffjlabo/.env.sample
@@ -0,0 +1,4 @@
+CLIENT_ID=xxxxxxxxxxxxxx.apps.googleusercontent.com
+CLIENT_SECRET=xxxxxxxxxxxxx
+API_ENDPOINT=http://localhost:8080
+VIEW_ENDPOINT=http://localhost:3000
diff --git a/ffjlabo/.gitignore b/ffjlabo/.gitignore
@@ -0,0 +1,3 @@
+/node_modules/
+/dist/
+.env
diff --git a/ffjlabo/README.md b/ffjlabo/README.md
@@ -0,0 +1,33 @@
+# 実行方法
+
+```
+// パッケージインストール
+yarn install
+
+// 環境変数用ファイル作成
+cp .env.sample .env
+
+// .envファイル編集
+// この時，CLIENT_IDとCLIENT_SECRETSを書き換えてください
+vim .env
+
+// webpackサーバ起動
+yarn dev
+
+// 認証サーバ起動
+node server/index.js
+```
+
+その後，`http://localhost:3000`にアクセスすると確認できます．
+また，認証サーバは`http://localhost:8080`で起動します．
+
+# 概要
+
+現状 css などデザイン部分や UX の向上に関しては着手できていません．
+プレイリスト一覧表示，動画一覧表示，プレイリストの追加，動画の追加に関して必要最低限の実装となっています．
+
+# 技術ポイント
+
+- React + Redux で store でのデータ一括管理
+- できるかぎり Presentational Component と Container Component を意識
+- 認証データをサーバサイドで取得し，Cookie としてブラウザ側に保持
diff --git a/ffjlabo/package.json b/ffjlabo/package.json
@@ -0,0 +1,33 @@
+{
+  "scripts": {
+    "dev": "webpack-dev-server --mode development --hot --inline",
+    "prod": "webpack-dev-server --mode production --hot --inline",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "axios": "0.18.1",
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "js-cookie": "^2.2.1",
+    "passport": "^0.4.1",
+    "passport-youtube-v3": "^2.1.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-es2015": "^7.0.0-beta.53",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  }
+}
diff --git a/ffjlabo/public/index.html b/ffjlabo/public/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/ffjlabo/server/index.js b/ffjlabo/server/index.js
@@ -0,0 +1,53 @@
+const passport = require('passport');
+const YoutubeV3Strategy = require('passport-youtube-v3').Strategy;
+require('dotenv').config();
+const app = require('express')();
+
+apiEndpoint = process.env['API_ENDPOINT'];
+viewEndpoint = process.env['VIEW_ENDPOINT'];
+
+passport.use(
+  new YoutubeV3Strategy(
+    {
+      clientID: process.env['CLIENT_ID'],
+      clientSecret: process.env['CLIENT_SECRET'],
+      callbackURL: `${apiEndpoint}/auth/callback`,
+      scope: ['https://www.googleapis.com/auth/youtube'],
+    },
+    (accessToken, refreshToken, params, profile, done) => {
+      const {expires_in} = params;
+      return done(null, {accessToken, expires_in});
+    }
+  )
+);
+
+passport.serializeUser(function(user, done) {
+  done(null, user);
+});
+passport.deserializeUser(function(obj, done) {
+  done(null, obj);
+});
+
+app.use(passport.initialize());
+
+app.get('/auth', (req, res, next) => {
+  passport.authenticate('youtube')(req, res, next);
+});
+
+app.get(
+  '/auth/callback',
+  passport.authenticate('youtube', {
+    failureRedirect: `${viewEndpoint}`,
+  }),
+  (req, res) => {
+    const {accessToken, expires_in} = req.user;
+    res.cookie('access_token', accessToken, {
+      expires: new Date(Date.now() + expires_in * 1000),
+      maxAge: expires_in * 1000,
+      httpOnly: false,
+    });
+    res.redirect(viewEndpoint);
+  }
+);
+
+app.listen(8080, () => console.log('listen on 8080'));
diff --git a/ffjlabo/src/actions/constants.js b/ffjlabo/src/actions/constants.js
@@ -0,0 +1,5 @@
+export const GET_PLAYLISTS = 'GET_PLAYLISTS';
+export const ADD_PLAYLIST = 'ADD_PLAYLIST';
+
+export const GET_PLAYLIST_ITEMS = 'GET_PLAYLIST_ITEMS';
+export const ADD_PLAYLIST_ITEM = 'ADD_PLAYLIST_ITEM';
diff --git a/ffjlabo/src/components/pages/Login.js b/ffjlabo/src/components/pages/Login.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Login = () => {
+  const login = () => {
+    const url = `${API_ENDPOINT}/auth`;
+    window.location.href = url;
+  };
+
+  return (
+    <div>
+      <p>YouTube認証が必要です</p>
+      <button onClick={login}>認証</button>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/ffjlabo/src/components/pages/Playlist/Playlist.js b/ffjlabo/src/components/pages/Playlist/Playlist.js
@@ -0,0 +1,60 @@
+import React, {useState, useEffect} from 'react';
+import {useSelector} from 'react-redux';
+import {Link} from 'react-router-dom';
+
+const AddPlaylistForm = ({addPlaylist}) => {
+  const [isForm, setIsForm] = useState(false);
+  const [text, setText] = useState('');
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    addPlaylist(text);
+  };
+
+  return isForm ? (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="プレイリスト名"
+        onChange={e => {
+          setText(e.target.value);
+        }}
+      />
+      <button type="submit">追加</button>
+      <button
+        onClick={e => {
+          e.preventDefault();
+          setIsForm(false);
+        }}
+      >
+        キャンセル
+      </button>
+    </form>
+  ) : (
+    <div
+      onClick={() => {
+        setIsForm(true);
+      }}
+    >
+      ＋プレイリストを追加する
+    </div>
+  );
+};
+
+const Playlist = ({playlists, addPlaylist}) => {
+  return (
+    <div>
+      <AddPlaylistForm {...{addPlaylist}} />
+      {playlists.map(({id, snippet}) => (
+        <div key={id}>
+          <Link to={`/playlist/${id}`}>
+            <img src={snippet.thumbnails.default.url} />
+            {snippet.title}
+          </Link>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Playlist;
diff --git a/ffjlabo/src/components/pages/Playlist/PlaylistContainer.js b/ffjlabo/src/components/pages/Playlist/PlaylistContainer.js
@@ -0,0 +1,23 @@
+import React, {useEffect} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import Playlist from './Playlist';
+import {getPlaylists, addPlaylist} from '../../../models';
+
+const PlaylistContainer = () => {
+  const dispatch = useDispatch();
+  const playlists = useSelector(state => state.playlistReducer);
+  useEffect(() => {
+    dispatch(getPlaylists());
+  }, [JSON.stringify(playlists)]);
+
+  const _props = {
+    ...playlists,
+    addPlaylist: (title = '') => {
+      dispatch(addPlaylist(title));
+    },
+  };
+
+  return <Playlist {..._props} />;
+};
+
+export default PlaylistContainer;
diff --git a/ffjlabo/src/components/pages/Playlist/index.js b/ffjlabo/src/components/pages/Playlist/index.js
@@ -0,0 +1,3 @@
+import PlaylistContainer from './PlaylistContainer';
+
+export default PlaylistContainer;
diff --git a/ffjlabo/src/components/pages/PlaylistItems/PlaylistItems.js b/ffjlabo/src/components/pages/PlaylistItems/PlaylistItems.js
@@ -0,0 +1,58 @@
+import React, {useState, useEffect} from 'react';
+import {useSelector} from 'react-redux';
+
+const AddPlaylistItemForm = ({addPlaylistItem}) => {
+  const [isForm, setIsForm] = useState(false);
+  const [videoId, setVideoId] = useState('');
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    addPlaylistItem(videoId);
+  };
+
+  return isForm ? (
+    <form onSubmit={handleSubmit}>
+      <label>https://www.youtube.com/watch?v=</label>
+      <input
+        type="text"
+        placeholder=""
+        onChange={e => {
+          setVideoId(e.target.value);
+        }}
+      />
+      <button type="submit">追加</button>
+      <button
+        onClick={e => {
+          e.preventDefault();
+          setIsForm(false);
+        }}
+      >
+        キャンセル
+      </button>
+    </form>
+  ) : (
+    <div
+      onClick={() => {
+        setIsForm(true);
+      }}
+    >
+      ＋動画を追加する
+    </div>
+  );
+};
+
+const PlaylistItems = ({playlistItems, addPlaylistItem}) => {
+  return (
+    <div>
+      <AddPlaylistItemForm {...{addPlaylistItem}} />
+      {playlistItems.map(({id, snippet}) => (
+        <div key={id}>
+          <img src={snippet.thumbnails.default.url} />
+          {snippet.title}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PlaylistItems;
diff --git a/ffjlabo/src/components/pages/PlaylistItems/PlaylistItemsContainer.js b/ffjlabo/src/components/pages/PlaylistItems/PlaylistItemsContainer.js
@@ -0,0 +1,23 @@
+import React, {useEffect} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import PlaylistItems from './PlaylistItems';
+import {getPlaylistItems, addPlaylistItem} from '../../../models';
+
+const PlaylistItemsContainer = ({match}) => {
+  const dispatch = useDispatch();
+  const playlistId = match.params.playlistId;
+  const playlistItems = useSelector(state => state.playlistItemsReducer);
+  useEffect(() => {
+    dispatch(getPlaylistItems(playlistId));
+  }, [JSON.stringify(playlistItems)]);
+
+  const _props = {
+    ...playlistItems,
+    addPlaylistItem: (videoId = '') => {
+      dispatch(addPlaylistItem(playlistId, videoId));
+    },
+  };
+  return <PlaylistItems {..._props} />;
+};
+
+export default PlaylistItemsContainer;
diff --git a/ffjlabo/src/components/pages/PlaylistItems/index.js b/ffjlabo/src/components/pages/PlaylistItems/index.js
@@ -0,0 +1,3 @@
+import PlaylistItemsContainer from './PlaylistItemsContainer';
+
+export default PlaylistItemsContainer;
diff --git a/ffjlabo/src/index.js b/ffjlabo/src/index.js
@@ -0,0 +1,39 @@
+import React, {useState, useEffect} from 'react';
+import ReactDOM from 'react-dom';
+import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
+import {Provider} from 'react-redux';
+import thunk from 'redux-thunk';
+import {createStore, applyMiddleware} from 'redux';
+import Cookies from 'js-cookie';
+
+import Reducers from './reducers';
+import Playlist from './components/pages/Playlist';
+import PlaylistItems from './components/pages/PlaylistItems';
+import Login from './components/pages/Login';
+
+const store = createStore(Reducers, applyMiddleware(thunk));
+
+const App = () => {
+  const accessToken = Cookies.get('access_token');
+
+  if (accessToken === undefined) {
+    return <Login />;
+  }
+
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/" component={Playlist} />
+        <Route exact path="/playlist" component={Playlist} />
+        <Route path="/playlist/:playlistId" component={PlaylistItems} />
+      </Switch>
+    </Router>
+  );
+};
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('app')
+);
diff --git a/ffjlabo/src/models/index.js b/ffjlabo/src/models/index.js
@@ -0,0 +1,4 @@
+import {getPlaylists, addPlaylist} from './playlist';
+import {getPlaylistItems, addPlaylistItem} from './playlistItems';
+
+export {getPlaylists, addPlaylist, getPlaylistItems, addPlaylistItem};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PlaylistContainer from './PlaylistContainer';

		export default PlaylistContainer;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PlaylistItemsContainer from './PlaylistItemsContainer';

		export default PlaylistItemsContainer;