にflexを付与
58 | */}
59 |
60 | {/*
61 | データが取得されたら、`data`内に`Schema`と同じ名前のオブジェクトの中にデータが格納されます。
62 | */}
63 |
64 | {data?.users_by_pk?.name}
65 |
66 | {/*
67 | 新規動画作成のアイコンボタンを追加
68 | */}
69 |
70 |
71 |
72 |
73 | {/*
74 | プロフィールアイコンを追加
75 | */}
76 |
77 |
78 |
79 |
80 |
81 |
82 | );
83 | };
84 |
--------------------------------------------------------------------------------
/src/templates/DashboardHeader/style.ts:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/core";
2 |
3 | // カスタム用のCSSを生成してくれる、@material-uiの機能
4 | export default makeStyles({
5 | between: {
6 | justifyContent: "space-between",
7 | },
8 | flex: {
9 | display: "flex",
10 | },
11 | logo: {
12 | width: 100,
13 | display: "flex",
14 | alignItems: "center",
15 | marginLeft: 10,
16 | },
17 | profileIcon: {
18 | padding: 0,
19 | width: 44,
20 | height: 44,
21 | marginLeft: 10,
22 | },
23 | });
24 |
--------------------------------------------------------------------------------
/src/templates/Sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
2 | import HomeIcon from "@material-ui/icons/Home";
3 | import WhatshotIcon from "@material-ui/icons/Whatshot";
4 | import SubscriptionsIcon from "@material-ui/icons/Subscriptions";
5 | import useStyles from "./style";
6 |
7 | export const Sidebar = () => {
8 | const styles = useStyles();
9 |
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/templates/Sidebar/style.ts:
--------------------------------------------------------------------------------
1 | import { makeStyles } from "@material-ui/core";
2 |
3 | export default makeStyles({
4 | root: {
5 | backgroundColor: "#ffffff",
6 | minHeight: "100%",
7 | },
8 | });
9 |
--------------------------------------------------------------------------------
/src/utils/Firebase/config.ts:
--------------------------------------------------------------------------------
1 | import firebase from "firebase";
2 |
3 | // Firebase コンソールの「プロジェクトの設定」>「SDK の設定と構成」から「構成」を選択し、そのままコピペ
4 | const firebaseConfig = {
5 | apiKey: "AIzaSyCm8ZVPFvB4O5YVyNqA-16zWrRpbxd0RVQ",
6 | authDomain: "react-bootcamp-78947.firebaseapp.com",
7 | projectId: "react-bootcamp-78947",
8 | storageBucket: "react-bootcamp-78947.appspot.com",
9 | messagingSenderId: "236750478038",
10 | appId: "1:236750478038:web:fc2e6a6e2f856cae1c4777",
11 | };
12 |
13 | // firebaseパッケージをAPI Keyで初期化
14 | // Firebaseコンソールでさksウエイ他アプリとReactを紐づける処理
15 | firebase.initializeApp(firebaseConfig);
16 |
17 | // 認証用のfirebaseモジュール
18 | export const fireAuth = firebase.auth();
19 |
20 | // ストレージ用のfirebaseモジュール
21 | export const storage = firebase.storage();
22 |
23 | // 初期化済みのfirebaseパッケージを確実に使用するためのexport defaultでfirebaseパッケージをexport
24 | export default firebase;
25 |
--------------------------------------------------------------------------------
/src/utils/Firebase/forgetPass.ts:
--------------------------------------------------------------------------------
1 | import { fireAuth } from "./config";
2 |
3 | /**
4 | * パスワードリセット用のメールを送信する関数
5 | * @param email メールアドレス
6 | * @returns
7 | */
8 | export const forgetPass = (email: string) =>
9 | fireAuth.sendPasswordResetEmail(email);
10 |
--------------------------------------------------------------------------------
/src/utils/Firebase/login.ts:
--------------------------------------------------------------------------------
1 | import { fireAuth } from "./config";
2 |
3 | // ログインに必要な引数の型を定義しています。
4 | // login()関数では、引数にFireLoginTypeの型、つまり文字型の`email`と`passward`が必要になります。
5 | export type FireLoginType = {
6 | email: string;
7 | passward: string;
8 | };
9 |
10 | /**
11 | * ログイン処理の実態です。
12 | * firebaseのログイン処理をラップしているだけです。
13 | * @param {email, password} ログインに必要な値
14 | * @returns Promise
15 | */
16 | export const login = ({ email, passward }: FireLoginType) =>
17 | fireAuth.signInWithEmailAndPassword(email, passward);
18 |
--------------------------------------------------------------------------------
/src/utils/Firebase/signout.ts:
--------------------------------------------------------------------------------
1 | import { fireAuth } from "./config";
2 |
3 | export const signout = () => fireAuth.signOut();
4 |
--------------------------------------------------------------------------------
/src/utils/Firebase/signup.ts:
--------------------------------------------------------------------------------
1 | import { fireAuth } from "./config";
2 |
3 | // サインアップに必要な引数の型を定義しています。
4 | // signup()関数では、引数にFireSignupTypeの型、つまり文字型の`email`と`passward`が必要になります。
5 | export type FireSignupType = {
6 | email: string;
7 | passward: string;
8 | };
9 |
10 | /**
11 | * サインアップ処理の実態です。
12 | * firebaseのサインアップ処理をラップしているだけです。
13 | * @param {email, password} ログインに必要な値
14 | * @returns Promise
15 | */
16 | export const signup = ({ email, passward }: FireSignupType) =>
17 | fireAuth.createUserWithEmailAndPassword(email, passward);
18 |
--------------------------------------------------------------------------------
/src/utils/Firebase/storage.ts:
--------------------------------------------------------------------------------
1 | import { storage } from "./config";
2 |
3 | /**
4 | * 必要最低限のアップロード用関数
5 | * @param ref : アップロードするファイルの参照を指定する。例：'videos/example.mp4'
6 | * @param file : アップロードするファイルそのもの
7 | * @returns firebase.storage.UploadTask を返す
8 | */
9 | export const uploader = (ref: string, file: File) =>
10 | storage.ref().child(ref).put(file);
11 |
12 | /**
13 | * 必要最低限のダウンロード用関数
14 | * downloader()で取得したURLは、