編集履歴

質問編集履歴

更新

2017/11/24 00:55

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,20 +1,6 @@
 javascriptとreact、material-uiを用いて、アプリ作成しています。
 ---
-- 搭載したい機能リスト
-　　　　・ユーザー認証（とりあえずは完成。）
-　　　　ーー（ページごとにユーザーのみ、ゲストのみと分けたい。）
-進行中→●ゲスト、ユーザーが見れるプラットホーム。（ほぼ完成。これから投稿の時間等も管理したいと思います。）
-　　　　ーー（ユーザーが投稿した内容が時系列で表示）
-　　　　・ユーザー課金、ゲスト課金とかも導入したい。
 現在のプロジェクトは[こちら。](http://plzdonation-56b64.firebaseapp.com)
@@ -26,337 +12,21 @@
-不明点（セキュリティルール）
+課題点（要素の多さによる遅延の軽減）
 ---
-ルール設定に四苦八苦しています。
+現在、componentDidMountにて、たくさんのfetchや処理が混雑していて、遅延によりページが表示できないことが増えてきました。
-ルール
-```JSON
-{
-  "rules": {
-    ".read": true,
-    "users": {
-      ".read": true,
-      "$uid": {
-        ".validate": "newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
-        "user":{
-          ".write": "$uid === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 15",
-        },
-        "uid":{
-          ".write": "$uid === auth.uid",
-          ".validate": "newData.isString() && newData.val() == auth.uid",
-        },
-        "explain":{
-          ".write": "$uid === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
-        "title":{
-          ".write": "$uid === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 20",
-        },
-        "profile_image":{
-          ".write": "$uid === auth.uid",
-          ".validate": "newData.isString() && newData.val().matches(/^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*((0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\+&=%\$#_]*)?$/)"
-        },
-        "user_posts":{
-          "$postsId":{
-            ".write": "$uid === auth.uid",
-          	".validate":"newData.val() === true"
-          }
-        },
-        "starred_users":{
-          "$starredUid":{
-            ".write": "$uid === auth.uid",
-          	".validate":"newData.val() === true",
-          },
-        },
-        "userStar":{
-  				 ".validate":"newData.hasChild('starCount')",
-  				 "stars":{
-     				 "$starUid":{
-        				 ".write":"auth.uid == $starUid &&
-                 	 (!data.exists() && newData.exists() &&
-                 	 newData.parent().parent().child('starCount').val() == data.parent().parent().child('starCount').val() + 1
-                  	 ) ||
-                  	(data.exists() && !newData.exists() &&
-                  	newData.parent().parent().child('starCount').val() == data.parent().parent().child('starCount').val() - 1
-                  	 )",
+これを解消したいです。
-        					".validate": "newData.val() == true"
-     				 }
-  				 },
-  				 "starCount":{
-     				 ".write":"auth != null",
-     				 ".validate":"(newData.val() == data.val() + 1 &&
-                  newData.parent().child('stars').child(auth.uid).val() == true &&
-                  !data.parent().child('stars').child(auth.uid).exists()
-                 ) ||
-                 (newData.val() == data.val() - 1 &&
-                  !newData.parent().child('stars').child(auth.uid).exists() &&
-                  data.parent().child('stars').child(auth.uid).val() == true
-                 )"
-   				},
-  				"$others":{
-     				".validate":false
-  				}
-				}
-    	}
-  	},
-    "posts":{
-      ".read": true,
-      ".write":"auth != null",
-      "$post":{
-				".write": "data.exists() ? (newData.child('uid').val() === auth.uid &&
-        newData.child('uid').val() === data.child('uid').val()) :
-        newData.child('uid').val() === auth.uid",
-				".validate":"newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp'])",
-      	"author":{
-          ".write":"newData.parent().child('uid').val() === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 15",
-        },
-        "title":{
-          ".write":"newData.parent().child('uid').val() === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 20",
-        },
-        "body":{
-          ".write":"newData.parent().child('uid').val() === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
-        "uid":{
+どのように復活させられるでしょう？
-          ".write":"newData.val() === auth.uid",
-        },
-        "timestamp":{
-          ".write":"newData.parent().child('uid').val() === auth.uid",
-        },
-        "postComment":{
-					".validate": "newData.hasChild('commentCount')",
-          ".write":true,
-          "commentCount":{
-            ".write":"auth != null",
-     				".validate":"newData.isNumber()"
-          },
-        	"comments":{
-          	"$commentId":{
-               ".write":"auth != null &&
-                 	 ((!data.exists() && newData.exists() &&
-                 	 newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() + 1
-                  	 ) ||
-                  	(data.exists() && !newData.exists() &&
-                  	newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() - 1
-                  	 ))",
-        					".validate": "newData.val() == true"
-            }
-        	},
-          "$others": {
-						".write": false
-					}
-      	},
-        "postId":{
-          ".write": "$post === newData.val()",
-        },
-        "postStar":{
-          ".write": "newData.val() === data.val() + 1",
-        },
-    	},
-    },
-    "comments":{
-      ".read": true,
-      ".write":true,
-      "$comment":{
-        ".write": "newData.child('uid').val() === auth.uid",
-        ".validate": "newData.hasChildren(['author','body','commentId','uid','profile_image'])",
-      }
-    },
-    "$others": {
-			".validate": false
-		}
-  }
-}
-```
@@ -366,29 +36,13 @@
-今後ホームに実装する機能として、
+＜今後実装したいが搭載に困っている機能＞
-❎スターをつけたユーザーのカードを表示し、そこには最新のユーザーの記事を載せていきます。
+①多言語化（とりあえず英語と日本語）
-❎ユーザーの検索機能。　だいたい目測はついた。
-❎記事ごとのコメント機能　　カードにつける。
-❎プロフィール画像等の投稿作成
-⑤多言語化（とりあえず英語と日本語）
-などがあります。
+②デザイニング
-![全体](5ff4cbe16a89c64dcb1b6b4076e39517.png)
-![コメント](b643dbceff4f341075cf23893b9062f5.png)
-![ポスト](3d0d833e727dad1f1b03c77d22203710.png)
-![ユーザー](5558ba2fcb0814557e162aa8f8dc4cd5.png)

更新

2017/11/24 00:55

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -208,9 +208,7 @@
         newData.child('uid').val() === auth.uid",
-				".validate":"(newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp']))||
+				".validate":"newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp'])",
-        (newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp','post_image']))",
@@ -262,7 +260,7 @@
             ".write":"auth != null",
-     				".validate":"(newData.val() == data.val() + 1) ||(newData.val() == data.val() - 1)"
+     				".validate":"newData.isNumber()"
           },

更新

2017/11/17 02:32

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -158,7 +158,7 @@
   				 "starCount":{
-     				 ".write":"auth != null && newData.isNumber()",
+     				 ".write":"auth != null",
      				 ".validate":"(newData.val() == data.val() + 1 &&
@@ -198,7 +198,7 @@
       ".read": true,
+      ".write":"auth != null",
       "$post":{
@@ -208,9 +208,7 @@
         newData.child('uid').val() === auth.uid",
-				".validate": "
-        (newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp']))||
+				".validate":"(newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp']))||
         (newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp','post_image']))",
@@ -220,28 +218,38 @@
       	"author":{
+          ".write":"newData.parent().child('uid').val() === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 15",
         },
         "title":{
+          ".write":"newData.parent().child('uid').val() === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 20",
         },
         "body":{
+          ".write":"newData.parent().child('uid').val() === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 300",
         },
         "uid":{
+          ".write":"newData.val() === auth.uid",
         },
         "timestamp":{
+          ".write":"newData.parent().child('uid').val() === auth.uid",
         },
         "postComment":{
@@ -252,9 +260,9 @@
           "commentCount":{
-            ".write":"auth != null && newData.isNumber()",
+            ".write":"auth != null",
-     				".validate":"(newData.val() == data.val() + 1 )||(newData.val() == data.val() - 1)"
+     				".validate":"(newData.val() == data.val() + 1) ||(newData.val() == data.val() - 1)"
           },
@@ -264,7 +272,7 @@
                ".write":"auth != null &&
-                 	 ((!data.exists() && newData.exists() && newData.child('uid').val() === auth.uid &&
+                 	 ((!data.exists() && newData.exists() &&
                  	 newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() + 1
@@ -312,6 +320,10 @@
       ".read": true,
+      ".write":true,
       "$comment":{
         ".write": "newData.child('uid').val() === auth.uid",

更新

2017/11/16 16:00

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -202,9 +202,17 @@
       "$post":{
-				".write": "newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val()",
+				".write": "data.exists() ? (newData.child('uid').val() === auth.uid &&
+        newData.child('uid').val() === data.child('uid').val()) :
+        newData.child('uid').val() === auth.uid",
+				".validate": "
+        (newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp']))||
-				".validate": "newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp','profile_image'])",
+        (newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp','post_image']))",
@@ -246,7 +254,7 @@
             ".write":"auth != null && newData.isNumber()",
-     				 ".validate":"(newData.val() == data.val() + 1 )||(newData.val() == data.val() - 1)"
+     				".validate":"(newData.val() == data.val() + 1 )||(newData.val() == data.val() - 1)"
           },
@@ -256,7 +264,7 @@
                ".write":"auth != null &&
-                 	 (!data.exists() && newData.exists() && newData.child('uid').val() === auth.uid &&
+                 	 ((!data.exists() && newData.exists() && newData.child('uid').val() === auth.uid &&
                  	 newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() + 1
@@ -266,7 +274,7 @@
                   	newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() - 1
-                  	 )",
+                  	 ))",
         					".validate": "newData.val() == true"
@@ -306,9 +314,11 @@
       "$comment":{
+        ".write": "newData.child('uid').val() === auth.uid",
         ".validate": "newData.hasChildren(['author','body','commentId','uid','profile_image'])",
-        ".write": "newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val()",
       }

更新

2017/11/16 06:50

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -114,7 +114,7 @@
         },
-        "starred_user":{
+        "starred_users":{
           "$starredUid":{
@@ -202,11 +202,13 @@
       "$post":{
-      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+				".write": "newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val()",
-        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','profile_image','timestamp'])",
+				".validate": "newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','timestamp','profile_image'])",
       	"author":{
@@ -242,7 +244,9 @@
           "commentCount":{
+            ".write":"auth != null && newData.isNumber()",
-            ".validate": "(data.exists()) ? (newData.val() === data.val() + 1):(newData.val() === 0)"
+     				 ".validate":"(newData.val() == data.val() + 1 )||(newData.val() == data.val() - 1)"
           },
@@ -250,7 +254,21 @@
           	"$commentId":{
+               ".write":"auth != null &&
+                 	 (!data.exists() && newData.exists() && newData.child('uid').val() === auth.uid &&
+                 	 newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() + 1
+                  	 ) ||
+                  	(data.exists() && !newData.exists() &&
+                  	newData.parent().parent().child('commentCount').val() == data.parent().parent().child('commentCount').val() - 1
+                  	 )",
-              ".validate": "newData.val() === true"
+        					".validate": "newData.val() == true"
             }
@@ -288,9 +306,9 @@
       "$comment":{
-        ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
+        ".validate": "newData.hasChildren(['author','body','commentId','uid','profile_image'])",
-        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".write": "newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val()",
       }

更新

2017/11/14 06:04

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -58,38 +58,46 @@
       "$uid": {
-        ".write": "$uid === auth.uid",
-        ".validate": "data.exists() || newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
+        ".validate": "newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
         "user":{
+          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 15",
         },
         "uid":{
+          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val() == auth.uid",
         },
         "explain":{
+          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 300",
         },
         "title":{
+          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 20",
         },
         "profile_image":{
+          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().matches(/^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*((0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\+&=%\$#_]*)?$/)"
         },
@@ -98,6 +106,8 @@
           "$postsId":{
+            ".write": "$uid === auth.uid",
           	".validate":"newData.val() === true"
           }
@@ -108,172 +118,184 @@
           "$starredUid":{
+            ".write": "$uid === auth.uid",
           	".validate":"newData.val() === true",
           },
         },
-        "userStar":{
+        "userStar":{
-					".validate":"newData.hasChild('starCount')",
+  				 ".validate":"newData.hasChild('starCount')",
+  				 "stars":{
+     				 "$starUid":{
+        				 ".write":"auth.uid == $starUid &&
+                 	 (!data.exists() && newData.exists() &&
+                 	 newData.parent().parent().child('starCount').val() == data.parent().parent().child('starCount').val() + 1
+                  	 ) ||
+                  	(data.exists() && !newData.exists() &&
+                  	newData.parent().parent().child('starCount').val() == data.parent().parent().child('starCount').val() - 1
+                  	 )",
+        					".validate": "newData.val() == true"
+     				 }
+  				 },
+  				 "starCount":{
+     				 ".write":"auth != null && newData.isNumber()",
+     				 ".validate":"(newData.val() == data.val() + 1 &&
+                  newData.parent().child('stars').child(auth.uid).val() == true &&
+                  !data.parent().child('stars').child(auth.uid).exists()
+                 ) ||
+                 (newData.val() == data.val() - 1 &&
+                  !newData.parent().child('stars').child(auth.uid).exists() &&
+                  data.parent().child('stars').child(auth.uid).val() == true
+                 )"
+   				},
+  				"$others":{
+     				".validate":false
+  				}
+				}
+    	}
+  	},
+    "posts":{
+      ".read": true,
+      "$post":{
+      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','profile_image','timestamp'])",
+      	"author":{
+          ".validate": "newData.isString() && newData.val().length <= 15",
+        },
+        "title":{
+          ".validate": "newData.isString() && newData.val().length <= 20",
+        },
+        "body":{
+          ".validate": "newData.isString() && newData.val().length <= 300",
+        },
+        "uid":{
+        },
+        "timestamp":{
+        },
+        "postComment":{
+					".validate": "newData.hasChild('commentCount')",
           ".write":true,
-          "stars":{
-						"$starUid":{
-              ".write": "auth.uid == $starUid",
-							".validate": "(!data.exists() && newData.val() == true &&
-                      newData.parent().parent().child('starCount').val() == data.parent().parent().child('starCount').val() + 1
-                    )"
-						},
-					},
-					"starCount":{
+          "commentCount":{
-						".validate": "(newData.val() == data.val() + 1 &&
+            ".validate": "(data.exists()) ? (newData.val() === data.val() + 1):(newData.val() === 0)"
-                   newData.parent().child('stars').child(auth.uid).val() == true &&
-                   !data.parent().child('stars').child(auth.uid).exists()
-                  ) ||
-                  (newData.val() == data.val() - 1 &&
-                   !newData.parent().child('stars').child(auth.uid).exists() &&
-                   data.parent().child('stars').child(auth.uid).val() == true
-                  )",
-    				".write": "auth != null"
           },
+        	"comments":{
+          	"$commentId":{
+              ".validate": "newData.val() === true"
+            }
+        	},
-					"$others": {
+          "$others": {
 						".write": false
-					}
+					}
-				},
+      	},
-    	}
+        "postId":{
+          ".write": "$post === newData.val()",
-  	},
+        },
-    "posts":{
+        "postStar":{
+          ".write": "newData.val() === data.val() + 1",
+        },
+    	},
+    },
+    "comments":{
       ".read": true,
-      "$post":{
+      "$comment":{
+        ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
-      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','profile_image'])",
-      	"author":{
-          ".validate": "newData.isString() && newData.val().length <= 15",
-        },
-        "title":{
-          ".validate": "newData.isString() && newData.val().length <= 20",
-        },
-        "body":{
-          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
-        "uid":{
-        },
-        "postComment":{
-					".validate": "newData.hasChild('commentCount')",
-          ".write":true,
-          "commentCount":{
-            ".validate": "(data.exists()) ? (newData.val() === data.val() + 1):(newData.val() === 0)"
-          },
-        	"comments":{
-          	"$commentId":{
-              ".validate": "newData.val() === true"
-            }
+      }
-        	},
-          "$others": {
-						".write": false
-					}
-      	},
-        "postId":{
-          ".write": "$post === newData.val()",
-        },
-        "postStar":{
-          ".write": "newData.val() === data.val() + 1",
-        },
-    	},
     },
-    "comments":{
-      ".read": true,
-      "$comment":{
-        ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
-        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-      }
-    },

更新

2017/11/13 07:52

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -56,7 +56,7 @@
-      "$uid": {
+      "$uid": {
         ".write": "$uid === auth.uid",
@@ -66,57 +66,49 @@
         "user":{
-          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 15",
         },
         "uid":{
-          ".write": "$uid == auth.uid",
           ".validate": "newData.isString() && newData.val() == auth.uid",
         },
         "explain":{
-          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 300",
         },
         "title":{
-          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 20",
         },
         "profile_image":{
-          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().matches(/^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*((0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\+&=%\$#_]*)?$/)"
         },
         "user_posts":{
+          "$postsId":{
-          ".write": "$uid === auth.uid",
+          	".validate":"newData.val() === true"
+          }
         },
         "starred_user":{
-          ".write": "$uid === auth.uid",
           "$starredUid":{
-          	".validate":"data.exists() ? (newData.val() === null) : (newData.val() === true)",
+          	".validate":"newData.val() === true",
           },
@@ -124,25 +116,49 @@
         "userStar":{
-					".validate": "data.exists() ? newData.hasChildren(['starCount', 'stars']) : newData.hasChild('starCount')",
+					".validate":"newData.hasChild('starCount')",
           ".write":true,
+          "stars":{
+						"$starUid":{
+              ".write": "auth.uid == $starUid",
+							".validate": "(!data.exists() && newData.val() == true &&
+                      newData.parent().parent().child('starCount').val() == data.parent().parent().child('starCount').val() + 1
+                    )"
+						},
+					},
 					"starCount":{
+						".validate": "(newData.val() == data.val() + 1 &&
-						".validate": "data.exists() ? (newData.val() === (data.parent().child('stars').hasChild(auth.uid) ? data.val() - 1 : data.val() + 1)): ($uid === auth.uid && newData.val() === 0)",
+                   newData.parent().child('stars').child(auth.uid).val() == true &&
+                   !data.parent().child('stars').child(auth.uid).exists()
+                  ) ||
+                  (newData.val() == data.val() - 1 &&
+                   !newData.parent().child('stars').child(auth.uid).exists() &&
+                   data.parent().child('stars').child(auth.uid).val() == true
+                  )",
+    				".write": "auth != null"
-					},
+          },
-					"stars":{
-						"$starUid":{
-							".validate": "newData.val() === data.val() ||$starUid === auth.uid && (data.exists() ? (newData.val() === null) : (newData.val() === true))"
-						},
-					},
 					"$others": {
@@ -170,7 +186,7 @@
       	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid'])",
+        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid','profile_image'])",
@@ -194,13 +210,11 @@
         "uid":{
         },
         "postComment":{
-					".validate": "data.exists() ? newData.hasChildren(['commentCount', 'comments']) : newData.hasChild('commentCount')",
+					".validate": "newData.hasChild('commentCount')",
           ".write":true,
@@ -214,7 +228,7 @@
           	"$commentId":{
-              ".validate": "newData.val() ===root.child('comments').hasChild('$comment')||(data.exists()?(newData.val() === null) : (newData.val() === true))"
+              ".validate": "newData.val() === true"
             }
@@ -260,6 +274,16 @@
     },
+    "$others": {
+			".validate": false
+		}

不要な写真削除

2017/11/12 14:36

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -306,8 +306,6 @@
 ![ユーザー](5558ba2fcb0814557e162aa8f8dc4cd5.png)
-![エラー](f166465fc78973ceaa9cd7d8881905b8.png)
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

更新

2017/11/09 14:50

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -126,12 +126,10 @@
 					".validate": "data.exists() ? newData.hasChildren(['starCount', 'stars']) : newData.hasChild('starCount')",
+          ".write":true,
 					"starCount":{
-            ".write":true,
 						".validate": "data.exists() ? (newData.val() === (data.parent().child('stars').hasChild(auth.uid) ? data.val() - 1 : data.val() + 1)): ($uid === auth.uid && newData.val() === 0)",
 					},
@@ -140,8 +138,6 @@
 						"$starUid":{
-              ".write":true,
 							".validate": "newData.val() === data.val() ||$starUid === auth.uid && (data.exists() ? (newData.val() === null) : (newData.val() === true))"
 						},
@@ -206,12 +202,10 @@
 					".validate": "data.exists() ? newData.hasChildren(['commentCount', 'comments']) : newData.hasChild('commentCount')",
+          ".write":true,
           "commentCount":{
-            ".write":true,
             ".validate": "(data.exists()) ? (newData.val() === data.val() + 1):(newData.val() === 0)"
           },
@@ -220,8 +214,6 @@
           	"$commentId":{
-              ".write":true,
               ".validate": "newData.val() ===root.child('comments').hasChild('$comment')||(data.exists()?(newData.val() === null) : (newData.val() === true))"
             }
@@ -316,8 +308,6 @@
 ![エラー](f166465fc78973ceaa9cd7d8881905b8.png)
-![シミュレータ](fa58695cc9453d5fc162fb87c275e2df.png)
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

ルール更新

2017/11/09 14:50

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -124,14 +124,14 @@
         "userStar":{
-          ".write":true,
 					".validate": "data.exists() ? newData.hasChildren(['starCount', 'stars']) : newData.hasChild('starCount')",
 					"starCount":{
+            ".write":true,
 						".validate": "data.exists() ? (newData.val() === (data.parent().child('stars').hasChild(auth.uid) ? data.val() - 1 : data.val() + 1)): ($uid === auth.uid && newData.val() === 0)",
 					},
@@ -140,6 +140,8 @@
 						"$starUid":{
+              ".write":true,
 							".validate": "newData.val() === data.val() ||$starUid === auth.uid && (data.exists() ? (newData.val() === null) : (newData.val() === true))"
 						},
@@ -202,14 +204,14 @@
         "postComment":{
-          ".write":true,
 					".validate": "data.exists() ? newData.hasChildren(['commentCount', 'comments']) : newData.hasChild('commentCount')",
           "commentCount":{
+            ".write":true,
             ".validate": "(data.exists()) ? (newData.val() === data.val() + 1):(newData.val() === 0)"
           },
@@ -218,7 +220,9 @@
           	"$commentId":{
+              ".write":true,
-              ".validate": "newData.val() ===root.child('comments').child('$comment').key||(data.exists()?(newData.val() === null) : (newData.val() === true))"
+              ".validate": "newData.val() ===root.child('comments').hasChild('$comment')||(data.exists()?(newData.val() === null) : (newData.val() === true))"
             }
@@ -234,7 +238,7 @@
         "postId":{
-          ".validate": "$post === newData.val()",
+          ".write": "$post === newData.val()",
         },
@@ -256,8 +260,6 @@
       "$comment":{
         ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
         ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",

セキュア更新

2017/11/09 14:35

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -132,7 +132,7 @@
 					"starCount":{
-						".validate": "data.exists() ? (newData.val() === (data.parent().child('stars').hasChild(auth.uid) ? data.val() - 1 : data.val() + 1)): ($uid === auth.uid && newData.val() === 0) ",
+						".validate": "data.exists() ? (newData.val() === (data.parent().child('stars').hasChild(auth.uid) ? data.val() - 1 : data.val() + 1)): ($uid === auth.uid && newData.val() === 0)",
 					},
@@ -140,7 +140,7 @@
 						"$starUid":{
-							".validate": "$starUid === auth.uid && (data.exists() ? (newData.val() === null) : (newData.val() === true))"
+							".validate": "newData.val() === data.val() ||$starUid === auth.uid && (data.exists() ? (newData.val() === null) : (newData.val() === true))"
 						},
@@ -202,9 +202,35 @@
         "postComment":{
+          ".write":true,
+					".validate": "data.exists() ? newData.hasChildren(['commentCount', 'comments']) : newData.hasChild('commentCount')",
+          "commentCount":{
+            ".validate": "(data.exists()) ? (newData.val() === data.val() + 1):(newData.val() === 0)"
-        },
+          },
+        	"comments":{
+          	"$commentId":{
+              ".validate": "newData.val() ===root.child('comments').child('$comment').key||(data.exists()?(newData.val() === null) : (newData.val() === true))"
+            }
+        	},
+          "$others": {
+						".write": false
+					}
+      	},
         "postId":{

更新

2017/11/09 13:49

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -58,6 +58,8 @@
       "$uid": {
+        ".write": "$uid === auth.uid",
         ".validate": "data.exists() || newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
@@ -112,11 +114,21 @@
           ".write": "$uid === auth.uid",
+          "$starredUid":{
+          	".validate":"data.exists() ? (newData.val() === null) : (newData.val() === true)",
+          },
         },
         "userStar":{
+          ".write":true,
-					".validate": "newData.hasChildren(['starCount', 'stars'])",
+					".validate": "data.exists() ? newData.hasChildren(['starCount', 'stars']) : newData.hasChild('starCount')",
 					"starCount":{

画像追加

2017/11/09 00:38

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -276,6 +276,8 @@
 ![エラー](f166465fc78973ceaa9cd7d8881905b8.png)
+![シミュレータ](fa58695cc9453d5fc162fb87c275e2df.png)
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

更新

2017/11/08 14:12

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -274,6 +274,8 @@
 ![ユーザー](5558ba2fcb0814557e162aa8f8dc4cd5.png)
+![エラー](f166465fc78973ceaa9cd7d8881905b8.png)
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

更新

2017/11/08 13:50

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -72,7 +72,7 @@
         "uid":{
-          ".write": "!data.exists()",
+          ".write": "$uid == auth.uid",
           ".validate": "newData.isString() && newData.val() == auth.uid",
@@ -116,112 +116,118 @@
         "userStar":{
+					".validate": "newData.hasChildren(['starCount', 'stars'])",
+					"starCount":{
+						".validate": "data.exists() ? (newData.val() === (data.parent().child('stars').hasChild(auth.uid) ? data.val() - 1 : data.val() + 1)): ($uid === auth.uid && newData.val() === 0) ",
+					},
+					"stars":{
+						"$starUid":{
+							".validate": "$starUid === auth.uid && (data.exists() ? (newData.val() === null) : (newData.val() === true))"
+						},
+					},
+					"$others": {
+						".write": false
+					}
+				},
+    	}
+  	},
+    "posts":{
+      ".read": true,
+      "$post":{
+      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid'])",
+      	"author":{
+          ".validate": "newData.isString() && newData.val().length <= 15",
+        },
+        "title":{
+          ".validate": "newData.isString() && newData.val().length <= 20",
+        },
+        "body":{
+          ".validate": "newData.isString() && newData.val().length <= 300",
+        },
+        "uid":{
+        },
-          "starCount":{
+        "postComment":{
+        },
+        "postId":{
+          ".validate": "$post === newData.val()",
+        },
+        "postStar":{
-            ".write": "newData.val() === data.val() + 1",
+          ".write": "newData.val() === data.val() + 1",
-          },
+        },
-          "stars":{
-            "$starUid":{
-            },
+    	},
-          },
+    },
-        },
-    	}
-  	},
-    "posts":{
+    "comments":{
       ".read": true,
-      "$post":{
+      "$comment":{
+        ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
-      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid'])",
-      	"author":{
-          ".validate": "newData.isString() && newData.val().length <= 15",
-        },
+      }
-        "title":{
-          ".validate": "newData.isString() && newData.val().length <= 20",
-        },
-        "body":{
-          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
-        "uid":{
-        },
-        "postComment":{
-        },
-        "postId":{
-          ".validate": "$post === newData.val()",
-        },
-        "postStar":{
-          ".write": "newData.val() === data.val() + 1",
-        },
-    	},
     },
-    "comments":{
-      ".read": true,
-      "$comment":{
-        ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
-        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-      }
-    },

更新

2017/11/08 11:31

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -52,166 +52,176 @@
     "users": {
+      ".read": true,
+      "$uid": {
+        ".validate": "data.exists() || newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
+        "user":{
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().length <= 15",
+        },
+        "uid":{
+          ".write": "!data.exists()",
+          ".validate": "newData.isString() && newData.val() == auth.uid",
+        },
+        "explain":{
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().length <= 300",
+        },
+        "title":{
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().length <= 20",
+        },
+        "profile_image":{
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().matches(/^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*((0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\+&=%\$#_]*)?$/)"
+        },
+        "user_posts":{
+          ".write": "$uid === auth.uid",
+        },
+        "starred_user":{
+          ".write": "$uid === auth.uid",
+        },
+        "userStar":{
+          "starCount":{
+            ".write": "newData.val() === data.val() + 1",
+          },
+          "stars":{
+            "$starUid":{
+            },
+          },
+        },
+    	}
+  	},
+    "posts":{
       ".read": true,
-      ".validate": "data.exists() || newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
-      "$uid": {
+      "$post":{
+      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".validate": "data.exists() || newData.hasChildren(['author','body','postComment','postId','postStar','title','uid'])",
-        "user":{
+      	"author":{
-          ".write": "$uid === auth.uid",
           ".validate": "newData.isString() && newData.val().length <= 15",
         },
+        "title":{
+          ".validate": "newData.isString() && newData.val().length <= 20",
+        },
+        "body":{
+          ".validate": "newData.isString() && newData.val().length <= 300",
+        },
         "uid":{
-          ".write": "!data.exists()",
-          ".validate": "newData.isString() && newData.val() == auth.uid",
-        },
+        },
-        "explain":{
+        "postComment":{
-          ".write": "$uid === auth.uid",
-          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
+        },
-        "title":{
+        "postId":{
-          ".write": "$uid === auth.uid",
+          ".validate": "$post === newData.val()",
-          ".validate": "newData.isString() && newData.val().length <= 20",
-        },
+        },
-        "profile_image":{
+        "postStar":{
-          ".write": "$uid === auth.uid",
+          ".write": "newData.val() === data.val() + 1",
-          ".validate": "newData.isString() && newData.val().matches(/^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*((0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\+&=%\$#_]*)?$/)"
-        },
+        },
-        "user_posts":{
-          ".write": "$uid === auth.uid",
-        },
+    	},
-        "starred_user":{
-          ".write": "$uid === auth.uid",
-        },
+    },
-        "userStar":{
-          "starCount":{
-            ".write": "newData.val() === data.val() + 1",
-          },
-          "stars":{
-          },
-        },
-    	}
-  	},
-    "posts":{
+    "comments":{
       ".read": true,
-      ".validate": "newData.hasChildren(['author','body','postComment','postId','postStar','title','uid'])",
-      "$post":{
+      "$comment":{
+        ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
-      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
+        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-      	"author":{
-          ".validate": "newData.isString() && newData.val().length <= 15",
-        },
+      }
-        "title":{
-          ".validate": "newData.isString() && newData.val().length <= 20",
-        },
-        "body":{
-          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
-        "uid":{
-        },
-        "postComment":{
-        },
-        "postId":{
-          ".validate": "$post === newData.val()",
-        },
-        "postStar":{
-          ".write": "newData.val() === data.val() + 1",
-        },
-    	},
     },
-    "comments":{
-      ".read": true,
-      ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
-      "$comment":{
-        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-      }
-    },

セキュリティ更新

2017/11/08 10:05

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -52,55 +52,79 @@
     "users": {
-      ".validate": "newData.hasChildren()",
+      ".read": true,
+      ".validate": "data.exists() || newData.hasChildren(['explain','profile_image','title','uid','user','userStar'])",
       "$uid": {
         "user":{
-          ".write": "$uid === auth.uid"
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().length <= 15",
         },
         "uid":{
-          ".write": "$uid === auth.uid"
+          ".write": "!data.exists()",
+          ".validate": "newData.isString() && newData.val() == auth.uid",
         },
         "explain":{
-          ".write": "$uid === auth.uid"
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().length <= 300",
         },
         "title":{
-          ".write": "$uid === auth.uid"
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().length <= 20",
         },
         "profile_image":{
-          ".write": "$uid === auth.uid"
+          ".write": "$uid === auth.uid",
+          ".validate": "newData.isString() && newData.val().matches(/^(ht|f)tp(s?):\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*((0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\+&=%\$#_]*)?$/)"
         },
         "user_posts":{
-          ".write": "$uid === auth.uid"
+          ".write": "$uid === auth.uid",
         },
         "starred_user":{
-          ".write": "$uid === auth.uid"
+          ".write": "$uid === auth.uid",
         },
         "userStar":{
+          "starCount":{
+            ".write": "newData.val() === data.val() + 1",
+          },
-          ".write":true,
+          "stars":{
+          },
         },
@@ -114,51 +138,59 @@
     "posts":{
-      ".validate": "newData.hasChildren()",
+      ".read": true,
+      ".validate": "newData.hasChildren(['author','body','postComment','postId','postStar','title','uid'])",
       "$post":{
+      	".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
-        "author":{
+      	"author":{
-          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+          ".validate": "newData.isString() && newData.val().length <= 15",
+        },
+        "title":{
+          ".validate": "newData.isString() && newData.val().length <= 20",
         },
         "body":{
-          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+          ".validate": "newData.isString() && newData.val().length <= 300",
-        },
+        },
-        "title":{
+        "uid":{
+        },
-          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        "postComment":{
         },
         "postId":{
-          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+          ".validate": "$post === newData.val()",
-        },
-        "uid":{
-          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
-        },
-        "postComment":{
-          ".write":true,
         },
         "postStar":{
-          ".write":true,
+          ".write": "newData.val() === data.val() + 1",
-        },
+        },
     	},
@@ -168,11 +200,13 @@
     "comments":{
+      ".read": true,
-      ".validate": "newData.hasChildren()",
+      ".validate": "newData.hasChildren(['author','body','commentId','uid'])",
       "$comment":{
-        ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        ".write": "!data.exists() || (newData.child('uid').val() === auth.uid && newData.child('uid').val() === data.child('uid').val())",
       }

写真追加

2017/11/08 08:11

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -216,11 +216,13 @@
-![現在のプロジェクトの見た目](961c7316f1ec0b9731fe8ab2c5a9d483.png)
+![全体](5ff4cbe16a89c64dcb1b6b4076e39517.png)
+![コメント](b643dbceff4f341075cf23893b9062f5.png)
+![ポスト](3d0d833e727dad1f1b03c77d22203710.png)
+![ユーザー](5558ba2fcb0814557e162aa8f8dc4cd5.png)

更新

2017/11/08 06:28

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -26,15 +26,169 @@
-不明点（firebase realtime Databaseに投稿時間を送る。）
+不明点（セキュリティルール）
 ---
-投稿時間を取得し、データーベースに送りたいです。
+ルール設定に四苦八苦しています。
+ルール
-```js
+```JSON
+{
+  "rules": {
+    ".read": true,
+    "users": {
+      ".validate": "newData.hasChildren()",
+      "$uid": {
+        "user":{
+          ".write": "$uid === auth.uid"
+        },
+        "uid":{
+          ".write": "$uid === auth.uid"
+        },
+        "explain":{
+          ".write": "$uid === auth.uid"
+        },
+        "title":{
+          ".write": "$uid === auth.uid"
+        },
+        "profile_image":{
+          ".write": "$uid === auth.uid"
+        },
+        "user_posts":{
+          ".write": "$uid === auth.uid"
+        },
+        "starred_user":{
+          ".write": "$uid === auth.uid"
+        },
+        "userStar":{
+          ".write":true,
+        },
+    	}
+  	},
+    "posts":{
+      ".validate": "newData.hasChildren()",
+      "$post":{
+        "author":{
+          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        },
+        "body":{
+          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        },
+        "title":{
+          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        },
+        "postId":{
+          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        },
+        "uid":{
+          ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+        },
+        "postComment":{
+          ".write":true,
+        },
+        "postStar":{
+          ".write":true,
+        },
+    	},
+    },
+    "comments":{
+      ".validate": "newData.hasChildren()",
+      "$comment":{
+        ".write": "!data.exists() && newData.child('uid').val() == auth.uid"
+      }
+    },
+  }
+}
 ```

改変

2017/11/08 03:12

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,7 +8,7 @@
 　　　　ーー（ページごとにユーザーのみ、ゲストのみと分けたい。）
-進行中→●ゲスト、ユーザーが見れるプラットホーム。
+進行中→●ゲスト、ユーザーが見れるプラットホーム。（ほぼ完成。これから投稿の時間等も管理したいと思います。）
 　　　　ーー（ユーザーが投稿した内容が時系列で表示）
@@ -16,357 +16,31 @@
-作成途中のコードは[こちら。](https://github.com/MOTOMUR/plz_donation)
+現在のプロジェクトは[こちら。](http://plzdonation-56b64.firebaseapp.com)
 テストサーバーはreact-scripts startにて。
-ユーザー認証はFirebase経由で行っています。
+ホスティングサーバーはfirebaseにて。
-reduxは使いたくない！再三のバグ襲来に疲れました。
-不明点（ホームのビュー）
+不明点（firebase realtime Databaseに投稿時間を送る。）
 ---
+投稿時間を取得し、データーベースに送りたいです。
 ```js
-  onChange = (pictures) => this.setState({pictures})
-  componentDidMount(){
-    const self=this
-    var unsub = firebase.auth().onAuthStateChanged(function(user){
-      if(user){
-        self.setState({
-          userId : firebase.auth().currentUser.uid
-        })
-      }else {
-          self.props.history.push('/login')
-        }
-    })
-    this.setState({unsub});
-  }
-  handleChange_username = (event) => {
-    this.setState({
-      username: event.target.value
-    })
-  }
-  handleChange_title = (event) => {
-    this.setState({
-      title: event.target.value
-    })
-  }
-  handleChange_explain = (event) => {
-    this.setState({
-      explain: event.target.value
-    })
-  }
-  upLoadFile(){
-    const self = this
-    var file = this.state.pictures
-    var metadata = {
-      contentType: 'image/jpeg'
-    }
-    var uploadTask = firebase.storage().ref().child('profile_images/' + self.state.userId).put(file, metadata);
-    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
-      function(snapshot) {
-        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
-        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
-        console.log('Upload is ' + progress + '% done')
-        switch (snapshot.state) {
-          case firebase.storage.TaskState.PAUSED:
-            console.log('Upload is paused');
-            break;
-          case firebase.storage.TaskState.RUNNING:
-            console.log('Upload is running');
-            break;
-        }
-      }, function(error) {
-      // A full list of error codes is available at
-      // https://firebase.google.com/docs/storage/web/handle-errors
-      switch (error.code) {
-        case 'storage/unauthorized':
-          // User doesn't have permission to access the object
-          break;
-        case 'storage/canceled':
-          // User canceled the upload
-          break;
-        case 'storage/unknown':
-          // Unknown error occurred, inspect error.serverResponse
-          break;
-      }
-    }, function() {
-      var downloadURL = uploadTask.snapshot.downloadURL;
-      firebase.database().ref('users/' + this.state.userId).set({
-        title: this.state.title,
-        user: this.state.username,
-        explain: this.state.explain,
-        uid:this.state.userId,
-        profile_image:downloadURL,
-        userStar:{
-          starCount:0,
-          stars:{}
-        }
-      })
-      this.props.history.push('/')
-      window.alert("you can successfully make your page!")
-    })
-}
-  handleSubmit = () =>{
-    this.upLoadFile()
-  }
-  componentWillUnmount() {
-  this.state.unsub();
-};
-  render() {
-    return (
-      <div>
-        <div className='col s12 m4'>
-          <br />
-          <br />
-          <br />
-            <Card>
-              <CardTitle title='Make my page' subtitle='make your top page and explanation'/>
-              <CardText
-                style={{
-                   width: '35%',
-                   margin: 'auto',
-                 }}
-                >
-                <TextField
-                  id="username"
-                  floatingLabelText="type the shown username"
-                  value={this.state.username}
-                  onChange={this.handleChange_username}
-                  />
-                <br />
-                <TextField
-                  id="title"
-                  floatingLabelText="type the title"
-                  value={this.state.currentItem}
-                  onChange={this.handleChange_title}
-                  />
-                <br />
-                <TextField
-                  floatingLabelText="explaination"
-                  multiLine={true}
-                  value={this.state.explain}
-                  onChange={this.handleChange_explain}
-                  rows={5}
-                  style={{
-                    border: '1px solid #EEEEEE',
-                  }}
-                  />
-                <UploadPreview
-                  title="profile image"
-                  label="Add"
-                  initialItems={this.state.pictures}
-                  onChange={this.onChange}
-                  />
-                <br />
-                <RaisedButton
-                  label="make Your page"
-                  secondary={true}
-                  onClick={this.handleSubmit}
-                  />
-                <br />
-              </CardText>
-            </Card>
-        </div>
-      </div>
-    )}
-}
-export default makeMyPage
 ```
-makeMyPageのstate以下のコードです。
@@ -380,13 +54,15 @@
 ❎記事ごとのコメント機能　　カードにつける。
-④プロフィール画像等の投稿作成
+❎プロフィール画像等の投稿作成
+⑤多言語化（とりあえず英語と日本語）
 などがあります。
-現在画像の扱いを調整中。

不明点更新。

2017/11/07 14:02

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,11 +40,335 @@
 ```js
+  onChange = (pictures) => this.setState({pictures})
+  componentDidMount(){
+    const self=this
+    var unsub = firebase.auth().onAuthStateChanged(function(user){
+      if(user){
+        self.setState({
+          userId : firebase.auth().currentUser.uid
+        })
+      }else {
+          self.props.history.push('/login')
+        }
+    })
+    this.setState({unsub});
+  }
+  handleChange_username = (event) => {
+    this.setState({
+      username: event.target.value
+    })
+  }
+  handleChange_title = (event) => {
+    this.setState({
+      title: event.target.value
+    })
+  }
+  handleChange_explain = (event) => {
+    this.setState({
+      explain: event.target.value
+    })
+  }
+  upLoadFile(){
+    const self = this
+    var file = this.state.pictures
+    var metadata = {
+      contentType: 'image/jpeg'
+    }
+    var uploadTask = firebase.storage().ref().child('profile_images/' + self.state.userId).put(file, metadata);
+    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
+      function(snapshot) {
+        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        console.log('Upload is ' + progress + '% done')
+        switch (snapshot.state) {
+          case firebase.storage.TaskState.PAUSED:
+            console.log('Upload is paused');
+            break;
+          case firebase.storage.TaskState.RUNNING:
+            console.log('Upload is running');
+            break;
+        }
+      }, function(error) {
+      // A full list of error codes is available at
+      // https://firebase.google.com/docs/storage/web/handle-errors
+      switch (error.code) {
+        case 'storage/unauthorized':
+          // User doesn't have permission to access the object
+          break;
+        case 'storage/canceled':
+          // User canceled the upload
+          break;
+        case 'storage/unknown':
+          // Unknown error occurred, inspect error.serverResponse
+          break;
+      }
+    }, function() {
+      var downloadURL = uploadTask.snapshot.downloadURL;
+      firebase.database().ref('users/' + this.state.userId).set({
+        title: this.state.title,
+        user: this.state.username,
+        explain: this.state.explain,
+        uid:this.state.userId,
+        profile_image:downloadURL,
+        userStar:{
+          starCount:0,
+          stars:{}
+        }
+      })
+      this.props.history.push('/')
+      window.alert("you can successfully make your page!")
+    })
+}
+  handleSubmit = () =>{
+    this.upLoadFile()
+  }
+  componentWillUnmount() {
+  this.state.unsub();
+};
+  render() {
+    return (
+      <div>
+        <div className='col s12 m4'>
+          <br />
+          <br />
+          <br />
+            <Card>
+              <CardTitle title='Make my page' subtitle='make your top page and explanation'/>
+              <CardText
+                style={{
+                   width: '35%',
+                   margin: 'auto',
+                 }}
+                >
+                <TextField
+                  id="username"
+                  floatingLabelText="type the shown username"
+                  value={this.state.username}
+                  onChange={this.handleChange_username}
+                  />
+                <br />
+                <TextField
+                  id="title"
+                  floatingLabelText="type the title"
+                  value={this.state.currentItem}
+                  onChange={this.handleChange_title}
+                  />
+                <br />
+                <TextField
+                  floatingLabelText="explaination"
+                  multiLine={true}
+                  value={this.state.explain}
+                  onChange={this.handleChange_explain}
+                  rows={5}
+                  style={{
+                    border: '1px solid #EEEEEE',
+                  }}
+                  />
+                <UploadPreview
+                  title="profile image"
+                  label="Add"
+                  initialItems={this.state.pictures}
+                  onChange={this.onChange}
+                  />
+                <br />
+                <RaisedButton
+                  label="make Your page"
+                  secondary={true}
+                  onClick={this.handleSubmit}
+                  />
+                <br />
+              </CardText>
+            </Card>
+        </div>
+      </div>
+    )}
+}
+export default makeMyPage
-```
+```
-ホームのビューの簡単なところを作成しました。return内はmypageのコピペも多いので、まだまだ間違いあると思います。
+makeMyPageのstate以下のコードです。
@@ -54,23 +378,19 @@
 ❎ユーザーの検索機能。　だいたい目測はついた。
-③記事ごとのコメント機能　　カードにつける。
+❎記事ごとのコメント機能　　カードにつける。
+④プロフィール画像等の投稿作成
 などがあります。
-現在、機能分割中です。
+現在画像の扱いを調整中。
-![コメント開かない状態](961c7316f1ec0b9731fe8ab2c5a9d483.png)
+![現在のプロジェクトの見た目](961c7316f1ec0b9731fe8ab2c5a9d483.png)
-![コメント開いた状態](dd10a29835891dc9da4f86443c12defd.png)

表示の更新

2017/11/03 15:08

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,629 +40,9 @@
 ```js
-/*------------refer starred user-------------------------------------------------------------------*/
-fetchStarredUser(onchange) {
-  const self1 = this
-  const myUserId = self1.state.userId
-  var onValueChange1 = firebase.database().ref('/users/' + myUserId + '/starred_users').on('value', function(snapshot) {
-    const starred_users = [];
-    snapshot.forEach(function(childSnapshot) {
-      starred_users.push(childSnapshot.val().starUserData)
-    })
-    self1.setState({
-      starred_users: starred_users
-    }, function() {
-      if (onchange) onchange();
-    });
-  });
-  this.setState({
-    off_starred_user: onValueChange1
-  })
-}
-fetchStarredUserPosts() {
-  const self2 = this
-  const posts = [];
-  const stateStarredUsers = this.state.starred_users
-  for (var i = 0; i < stateStarredUsers.length; i++) {
-    const starredUser = stateStarredUsers[i]
-    firebase.database().ref('/users/' + starredUser + '/user_posts/').limitToFirst(1).once('value', function(snapshot) {
-      snapshot.forEach(function(childSnapshot) {
-        posts.push(childSnapshot.val())
-        self2.setState({
-          starred_posts: posts
-        });
-      })
-    });
-  }
-}
-fetchAllStarUser() {
-  const self = this
-  this.fetchStarredUser(function() {
-    self.fetchStarredUserPosts()
-  })
-}
-/*------------comment function open------------------------------------------------------------------------*/
-commentFncOpen(uid,postId){
-  this.setState({
-    commentForm:true,
-    comment_uid:uid,
-    commentPostId:postId
-  })
-}
-/*------------life cicle method--------------------------------------------------------------------*/
-    componentWillMount(){
-    }
-    componentDidMount(){
-      const self=this
-      var unsub = firebase.auth().onAuthStateChanged(function(user){
-        if(user){
-          self.setState({
-            userId : firebase.auth().currentUser.uid
-          },self.fetchAllStarUser);
-        }
-        else {
-          self.props.history.push('/login')
-        }
-      })
-      this.setState({unsub});
-    }
-  componentWillUnmount() {
-    const self = this
-  this.state.unsub();
-  firebase.database().ref('/users/'+this.state.userId+'/starred_users/').off('value', self.state.off)
-};
-/*------------search reference method--------------------------------------------------------------*/
-handleChange_search = (event) => {
-  this.setState({
-    search: event.target.value,
-  });
-};
-handleSearch = (event) =>{
-  const self = this
-  firebase.database().ref('/users/').orderByChild('user').startAt(self.state.search).endAt(self.state.search+"\uf8ff").once("value").then(function(snapshot) {
-    const search_users =[]
-    snapshot.forEach(function(childSnapshot) {
-        search_users.push(childSnapshot.val())
-      })
-    self.setState({
-      search_users:search_users,
-    });
-  })
-  this.setState({searchReference:'1'});
-}
-/*------------add star user------------------------------------------------------------------------*/
-starBtnClick(value){
-  this.addStar(value)
-}
-addStar(uid) {
-  const myUserId = this.state.userId
-  const starUserData = uid
-  var add = true
-  const self = this
-  firebase.database().ref('users/' + uid + '/userStar').transaction(function(count) {
-    if(count){
-      if(count.stars&&count.stars[myUserId]){
-        count.starCount--;
-        count.stars[myUserId] = null
-        add = false
-      }else{
-        count.starCount++
-        if (!count.stars) {
-          count.stars = {};
-        }
-        count.stars[myUserId] = true
-        add = true
-      }
-    }
-    return count
-  }).then(function (result) {
-      if (result.snapshot) {
-        const updatedUser = result.snapshot.val()
-        for(var i = 0 ; i<self.state.search_users.length ; i++){
-          if(self.state.search_users[i].uid===uid){
-            const newSearchUsers = update(self.state.search_users, {
-              [i]: {userStar: {$set: updatedUser} }
-            })
-            self.setState({search_users: newSearchUsers})
-          }
-        }
-      }
-    }).then(function(){
-      if(add){
-        return  firebase.database().ref('/users/' + myUserId + '/starred_users/').push().set({
-                  starUserData
-              })
-      }else{
-        return firebase.database().ref('/users/' + myUserId + '/starred_users/').orderByChild('starUserData').equalTo(starUserData).once("value", function (snapshot) {
-          snapshot.forEach(function (child) {
-            child.ref.remove()
-          })
-        })
-      }
-  })
-}
-handleChange_Tab = (value) => {
-  this.setState({
-    tabValue: value,
-  });
-};
-  render () {
-    return (
-<div>
-      <div
-        style={{
-          backgroundColor: '',
-        }}
-        >
-        <div className='col s12 m4'
-          style={{
-             width: '30%',
-             margin: 'auto',
-           }}
-          >
-              <TextField
-                id="search"
-                floatingLabelText="type username for search"
-                value={this.state.search}
-                onChange={this.handleChange_search}
-                />
-              <RaisedButton
-                label="Search"
-                secondary={true}
-                onClick={this.handleSearch}
-                />
-        </div>
-      </div>
-      <div>
-      <div
-        style={{
-          overflowX: 'scroll'
-        }}
-        >
-        <div
-          style={{
-            display: 'inline-block',
-            whiteSpace: 'nowrap',
-          }}
-          >
-          {
-            this.state.searchReference === '0'
-            ? <div><h>here is search reference view</h></div>
-            :<ul>{
-                this.state.search_users.map(
-                  function(searchRef){
-                    const self = this
-                    return(
-                      <li
-                        style={{
-                           width: '35%',
-                           margin: 'auto',
-                           display: 'inline-block',
-                           marginRight:'10px',
-                         }}
-                        >
-                        <Card>
-                          <CardHeader
-                            title={searchRef.user}
-                            subtitle={" star:(" + searchRef.userStar.starCount + ")"}
-                            avatar=""
-                          />
-                          <CardTitle title={searchRef.title} />
-                          <CardText>
-                            {searchRef.explain}
-                          </CardText>
-                          <CardActions>
-                            {
-                              (searchRef.userStar.stars && searchRef.userStar.stars[self.state.userId])
-                                ?<FlatButton
-                                  backgroundColor="#FDD835"
-                                  hoverColor="#8AA62F"
-                                  label="STARRED"
-                                  onClick={() => this.starBtnClick(searchRef.uid)} />
-                                :<FlatButton
-                                  label="STAR"
-                                  backgroundColor="#EOEOEO"
-                                  onClick={() => this.starBtnClick(searchRef.uid)} />
-                            }
-                          </CardActions>
-                        </Card>
-                      </li>
-                    )
-                  }.bind(this)
-                )
-              }</ul>
-          }
-          </div>
-        </div>
-      </div>
-      <div>
-        <Tabs
-          value={this.state.tabValue}
-          onChange={this.handleChange_Tab}
-        >
-          <Tab label="Stared users" value="a">
-            <div className='container'
-              style={{
-                overflowX: 'scroll',
-              }}
-              >
-              <div
-                style={{
-                  display: 'inline-block',
-                  whiteSpace: 'nowrap',
-                }}>
-                  {
-                    this.state.starred_posts.length === 0
-                    ? <div><h>There is no starred user</h></div>
-                    : <ul>{
-                        this.state.starred_posts.slice().map(
-                          function(starred_post){
-                            return(
-                              <StarredRefCard starredPost={starred_post} />
-                            )
-                          }
-                      )
-                    }</ul>
-                  }
-                  </div>
-                </div>
-          </Tab>
 ```
-![イメージ説明](4ba8a359d20610a7d8934a0d95aca2e9.png)
 ホームのビューの簡単なところを作成しました。return内はmypageのコピペも多いので、まだまだ間違いあると思います。
@@ -688,7 +68,9 @@
-![イメージ説明](a79434ba3430c9f6d5e8a23fa3be0c08.png)
+![コメント開かない状態](961c7316f1ec0b9731fe8ab2c5a9d483.png)
+![コメント開いた状態](dd10a29835891dc9da4f86443c12defd.png)

コード更新

2017/11/03 03:13

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,135 +40,533 @@
 ```js
+/*------------refer starred user-------------------------------------------------------------------*/
-class starredRefCard extends Component {
+fetchStarredUser(onchange) {
+  const self1 = this
+  const myUserId = self1.state.userId
+  var onValueChange1 = firebase.database().ref('/users/' + myUserId + '/starred_users').on('value', function(snapshot) {
-  constructor(props) {
+    const starred_users = [];
+    snapshot.forEach(function(childSnapshot) {
+      starred_users.push(childSnapshot.val().starUserData)
+    })
+    self1.setState({
+      starred_users: starred_users
-    super(props);
+    }, function() {
+      if (onchange) onchange();
+    });
+  });
-    this.state = {
+  this.setState({
+    off_starred_user: onValueChange1
+  })
+}
+fetchStarredUserPosts() {
+  const self2 = this
+  const posts = [];
+  const stateStarredUsers = this.state.starred_users
+  for (var i = 0; i < stateStarredUsers.length; i++) {
+    const starredUser = stateStarredUsers[i]
+    firebase.database().ref('/users/' + starredUser + '/user_posts/').limitToFirst(1).once('value', function(snapshot) {
+      snapshot.forEach(function(childSnapshot) {
+        posts.push(childSnapshot.val())
+        self2.setState({
+          starred_posts: posts
+        });
+      })
+    });
+  }
+}
+fetchAllStarUser() {
+  const self = this
+  this.fetchStarredUser(function() {
+    self.fetchStarredUserPosts()
+  })
+}
+/*------------comment function open------------------------------------------------------------------------*/
+commentFncOpen(uid,postId){
+  this.setState({
+    commentForm:true,
+    comment_uid:uid,
+    commentPostId:postId
+  })
+}
+/*------------life cicle method--------------------------------------------------------------------*/
+    componentWillMount(){
     }
-render(){
-  return(
-    <div
-      style={{
-        display: 'inline-block',
-        whiteSpace: 'nowrap',
-      }}>
-        {
-          props.length === 0
-          ? <div><h>There is no starred user</h></div>
-          : <ul>{
-              props.slice().map(
-                function(starred_user){
-                  return(
-                      <Card
+    componentDidMount(){
+      const self=this
+      var unsub = firebase.auth().onAuthStateChanged(function(user){
+        if(user){
+          self.setState({
+            userId : firebase.auth().currentUser.uid
+          },self.fetchAllStarUser);
+        }
+        else {
+          self.props.history.push('/login')
+        }
+      })
+      this.setState({unsub});
+    }
+  componentWillUnmount() {
+    const self = this
+  this.state.unsub();
+  firebase.database().ref('/users/'+this.state.userId+'/starred_users/').off('value', self.state.off)
+};
+/*------------search reference method--------------------------------------------------------------*/
+handleChange_search = (event) => {
+  this.setState({
+    search: event.target.value,
+  });
+};
+handleSearch = (event) =>{
+  const self = this
+  firebase.database().ref('/users/').orderByChild('user').startAt(self.state.search).endAt(self.state.search+"\uf8ff").once("value").then(function(snapshot) {
+    const search_users =[]
+    snapshot.forEach(function(childSnapshot) {
+        search_users.push(childSnapshot.val())
+      })
+    self.setState({
+      search_users:search_users,
+    });
+  })
+  this.setState({searchReference:'1'});
+}
+/*------------add star user------------------------------------------------------------------------*/
+starBtnClick(value){
+  this.addStar(value)
+}
+addStar(uid) {
+  const myUserId = this.state.userId
+  const starUserData = uid
+  var add = true
+  const self = this
+  firebase.database().ref('users/' + uid + '/userStar').transaction(function(count) {
+    if(count){
+      if(count.stars&&count.stars[myUserId]){
+        count.starCount--;
+        count.stars[myUserId] = null
+        add = false
+      }else{
+        count.starCount++
+        if (!count.stars) {
+          count.stars = {};
+        }
+        count.stars[myUserId] = true
+        add = true
+      }
+    }
+    return count
+  }).then(function (result) {
+      if (result.snapshot) {
+        const updatedUser = result.snapshot.val()
+        for(var i = 0 ; i<self.state.search_users.length ; i++){
+          if(self.state.search_users[i].uid===uid){
+            const newSearchUsers = update(self.state.search_users, {
+              [i]: {userStar: {$set: updatedUser} }
+            })
+            self.setState({search_users: newSearchUsers})
+          }
+        }
+      }
+    }).then(function(){
+      if(add){
+        return  firebase.database().ref('/users/' + myUserId + '/starred_users/').push().set({
+                  starUserData
+              })
+      }else{
+        return firebase.database().ref('/users/' + myUserId + '/starred_users/').orderByChild('starUserData').equalTo(starUserData).once("value", function (snapshot) {
+          snapshot.forEach(function (child) {
+            child.ref.remove()
+          })
+        })
+      }
+  })
+}
+handleChange_Tab = (value) => {
+  this.setState({
+    tabValue: value,
+  });
+};
+  render () {
+    return (
+<div>
+      <div
+        style={{
+          backgroundColor: '',
+        }}
+        >
+        <div className='col s12 m4'
+          style={{
+             width: '30%',
+             margin: 'auto',
+           }}
+          >
+              <TextField
+                id="search"
+                floatingLabelText="type username for search"
+                value={this.state.search}
+                onChange={this.handleChange_search}
+                />
+              <RaisedButton
+                label="Search"
+                secondary={true}
+                onClick={this.handleSearch}
+                />
+        </div>
+      </div>
+      <div>
+      <div
+        style={{
+          overflowX: 'scroll'
+        }}
+        >
+        <div
+          style={{
+            display: 'inline-block',
+            whiteSpace: 'nowrap',
+          }}
+          >
+          {
+            this.state.searchReference === '0'
+            ? <div><h>here is search reference view</h></div>
+            :<ul>{
+                this.state.search_users.map(
+                  function(searchRef){
+                    const self = this
+                    return(
+                      <li
                         style={{
-                           width: '100%',
+                           width: '35%',
+                           margin: 'auto',
                            display: 'inline-block',
-                           margin:'auto'
+                           marginRight:'10px',
                          }}
                         >
-                        <CardHeader
-                          title={starred_user.author}
-                          avatar=""
-                        />
-                      <CardTitle title={starred_user.title} subtitle={" star:(" + starred_user.postStar.starCount + ")"} />
-                        <CardText>
-                          {starred_user.body}
-                        </CardText>
-                        <CardActions>
-                          <FlatButton
-                            secondary
-                            label="Comment"
-                            onClick={() => this.commentFncOpen(starred_user.uid,starred_user.postId)} />
-                        </CardActions>
-                        <CardHeader
-                          showExpandableButton
-                          title="Comments" />
-                        <List expandable>
-                          <p>--------------------------------------</p>
-                          <ListItem
-                              leftAvatar={<Avatar src='' />}
-                              primaryText="Author"
-                              secondaryText={
-                                <p>Hello</p>
-                              }
-                            />
-                        </List>
-                      </Card>
+                        <Card>
+                          <CardHeader
+                            title={searchRef.user}
+                            subtitle={" star:(" + searchRef.userStar.starCount + ")"}
+                            avatar=""
+                          />
+                          <CardTitle title={searchRef.title} />
+                          <CardText>
+                            {searchRef.explain}
+                          </CardText>
+                          <CardActions>
+                            {
+                              (searchRef.userStar.stars && searchRef.userStar.stars[self.state.userId])
+                                ?<FlatButton
+                                  backgroundColor="#FDD835"
+                                  hoverColor="#8AA62F"
+                                  label="STARRED"
+                                  onClick={() => this.starBtnClick(searchRef.uid)} />
+                                :<FlatButton
+                                  label="STAR"
+                                  backgroundColor="#EOEOEO"
+                                  onClick={() => this.starBtnClick(searchRef.uid)} />
+                            }
+                          </CardActions>
+                        </Card>
+                      </li>
                     )
                   }.bind(this)
-              )
+                )
-            }</ul>
+              }</ul>
           }
@@ -176,17 +574,95 @@
         </div>
+      </div>
+      <div>
+        <Tabs
+          value={this.state.tabValue}
+          onChange={this.handleChange_Tab}
+        >
+          <Tab label="Stared users" value="a">
+            <div className='container'
+              style={{
+                overflowX: 'scroll',
-  )}
+              }}
+              >
+              <div
+                style={{
+                  display: 'inline-block',
+                  whiteSpace: 'nowrap',
+                }}>
+                  {
+                    this.state.starred_posts.length === 0
+                    ? <div><h>There is no starred user</h></div>
+                    : <ul>{
+                        this.state.starred_posts.slice().map(
+                          function(starred_post){
+                            return(
+                              <StarredRefCard starredPost={starred_post} />
+                            )
-}
+                          }
+                      )
-export default starredRefCard
+                    }</ul>
+                  }
+                  </div>
+                </div>
+          </Tab>
 ```
+![イメージ説明](4ba8a359d20610a7d8934a0d95aca2e9.png)
 ホームのビューの簡単なところを作成しました。return内はmypageのコピペも多いので、まだまだ間違いあると思います。

更新

2017/10/31 11:11

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -212,4 +212,8 @@
+![イメージ説明](a79434ba3430c9f6d5e8a23fa3be0c08.png)
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

更新

2017/10/31 09:27

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,7 +40,9 @@
 ```js
-class Home extends Component {
+class starredRefCard extends Component {
   constructor(props) {
@@ -48,585 +50,139 @@
     this.state = {
-      unsub:'',
-      search:'',
-      searchReference:'0',
-      tabValue:'a',
-      starBtnShown:'1',
-      off_starred_user:'',
-      off_starred_user_posts:'',
-      willStarUser:'',
-      userId:'',
-      starCount:'',
-      search_users : [],
-      starred_users : [],
-      starred_posts : [],
-      latest_posts : [],
     }
+render(){
+  return(
+    <div
+      style={{
+        display: 'inline-block',
+        whiteSpace: 'nowrap',
+      }}>
+        {
+          props.length === 0
+          ? <div><h>There is no starred user</h></div>
+          : <ul>{
+              props.slice().map(
+                function(starred_user){
+                  return(
+                      <Card
+                        style={{
+                           width: '100%',
+                           display: 'inline-block',
+                           margin:'auto'
+                         }}
+                        >
+                        <CardHeader
+                          title={starred_user.author}
+                          avatar=""
+                        />
+                      <CardTitle title={starred_user.title} subtitle={" star:(" + starred_user.postStar.starCount + ")"} />
+                        <CardText>
+                          {starred_user.body}
+                        </CardText>
+                        <CardActions>
+                          <FlatButton
+                            secondary
+                            label="Comment"
+                            onClick={() => this.commentFncOpen(starred_user.uid,starred_user.postId)} />
+                        </CardActions>
+                        <CardHeader
+                          showExpandableButton
+                          title="Comments" />
+                        <List expandable>
+                          <p>--------------------------------------</p>
+                          <ListItem
+                              leftAvatar={<Avatar src='' />}
+                              primaryText="Author"
+                              secondaryText={
+                                <p>Hello</p>
+                              }
+                            />
+                        </List>
+                      </Card>
+                    )
+                  }.bind(this)
+              )
+            }</ul>
+          }
+          </div>
+        </div>
+  )}
 }
-/*------------refer starred user-------------------------------------------------------------------*/
-fetchStarredUser(onchange) {
-  const self1 = this
-  const myUserId = self1.state.userId
-  var onValueChange1 = firebase.database().ref('/users/' + myUserId + '/starred_users').on('value', function(snapshot) {
-    const starred_users = [];
-    snapshot.forEach(function(childSnapshot) {
-      starred_users.push(childSnapshot.val().starUserData)
-    })
-    self1.setState({
-      starred_users: starred_users
-    }, function() {
-      if (onchange) onchange();
-    });
-  });
-  this.setState({
-    off_starred_user: onValueChange1
-  })
-}
-fetchStarredUserPosts() {
-  const self2 = this
-  const posts = [];
-  const stateStarredUsers = this.state.starred_users
-  for (var i = 0; i < stateStarredUsers.length; i++) {
-    const starredUser = stateStarredUsers[i]
-    firebase.database().ref('/users/' + starredUser + '/user_posts/').limitToFirst(1).once('value', function(snapshot) {
-      snapshot.forEach(function(childSnapshot) {
-        posts.push(childSnapshot.val())
-        self2.setState({
-          starred_posts: posts
-        });
-      })
-    });
-  }
-}
-fetchAllStarUser() {
-  const self = this
-  this.fetchStarredUser(function() {
-    self.fetchStarredUserPosts()
-  })
-}
-/*------------life cicle method--------------------------------------------------------------------*/
-    componentWillMount(){
-    }
-    componentDidMount(){
-      const self=this
-      var unsub = firebase.auth().onAuthStateChanged(function(user){
-        if(user){
-          self.setState({
-            userId : firebase.auth().currentUser.uid
-          },self.fetchAllStarUser);
-        }
-        else {
-          self.props.history.push('/login')
-        }
-      })
-      this.setState({unsub});
-    }
-  componentWillUnmount() {
-    const self = this
-  this.state.unsub();
-  firebase.database().ref('/users/'+this.state.userId+'/starred_users/').off('value', self.state.off)
-};
-/*------------search reference method--------------------------------------------------------------*/
-handleChange_search = (event) => {
-  this.setState({
-    search: event.target.value,
-  });
-};
-handleSearch = (event) =>{
-  const self = this
-  firebase.database().ref('/users/').orderByChild('user').startAt(self.state.search).endAt(self.state.search+"\uf8ff").once("value").then(function(snapshot) {
-    const search_users =[]
-    snapshot.forEach(function(childSnapshot) {
-      search_users.push(childSnapshot.val())
-    })
-    self.setState({
-      search_users:search_users,
-    });
-  })
-  this.setState({searchReference:'1'});
-}
-/*------------add star user------------------------------------------------------------------------*/
-starBtnClick(value){
-  this.addStar(value)
-}
-addStar(uid) {
-  const myUserId = this.state.userId
-  const starUserData = uid
-  var add = true
-  firebase.database().ref('users/' + uid + '/userStar').transaction(function(count) {
-    if(count){
-      if(count.stars&&count.stars[myUserId]){
-        count.starCount--;
-        count.stars[myUserId] = null
-        add = false
-      }else{
-        count.starCount++
-        if (!count.stars) {
-          count.stars = {};
-        }
-        count.stars[myUserId] = true
-        add = true
-      }
-    }
-    return count
-  }).then(function(){
-      if(add){
-        return  firebase.database().ref('/users/' + myUserId + '/starred_users/').push().set({
-                  starUserData
-              })
-      }else{
-        return  firebase.database().ref('/users/' + myUserId + '/starred_users/').orderByChild('starUserData').startAt(starUserData).remove()
-      }
-    })
-  }
-/*------------Tab control------------------------------------------------------------------------*/
-handleChange_Tab = (value) => {
-  this.setState({
-    tabValue: value,
-  });
-};
-  render () {
-    return (
-      <div>
-        <div className='col s12 m4'>
-          <Card>
-            <CardText>
-              <TextField
-                id="search"
-                floatingLabelText="type username for search"
-                value={this.state.search}
-                onChange={this.handleChange_search}
-                />
-              <RaisedButton
-                label="Search"
-                secondary={true}
-                onClick={this.handleSearch}
-                />
-            </CardText>
-          </Card>
-        </div>
-      <div>
-          {
-            this.state.searchReference === '0'
-            ? <div><h>here is search reference view</h></div>
-            :<ul>{
-                this.state.search_users.map(
-                  function(searchRef){
-                    return(
-                      <div className='col s12 m4'>
-                        <Card>
-                          <CardTitle title={searchRef.user} subtitle={searchRef.title} />
-                          <CardText>
-                            {searchRef.explain}
-                          </CardText>
-                          <CardActions>
-                            <FlatButton
-                               backgroundColor="#a4c639"
-                               hoverColor="#8AA62F"
-                               label="STAR"
-                               onClick={() => this.starBtnClick(searchRef.uid)}
-                               value={searchRef.uid} />
-                          </CardActions>
-                        </Card>
-                      </div>
-                    )
-                  }.bind(this)
-                )
-              }</ul>
-          }
-        </div>
-      <Tabs
-        value={this.state.tabValue}
-        onChange={this.handleChange_Tab}
-      >
-        <Tab label="Stared users" value="a">
-      <div className='container'>
-        <div>
-            {
-              this.state.starred_users.length === 0
-              ? <div><h>There is no starred user</h></div>
-              : <ul>{
-                  this.state.starred_posts.slice().map(
-                    function(starred_user){
-                return(
-                  <div className='col s12 m4'>
-                    <Card>
-                      <CardTitle title={starred_user.title} subtitle={starred_user.author+ " star:"+starred_user.starCount} />
-                      <CardText>
-                        {starred_user.body}
-                      </CardText>
-                      <CardActions>
-                        <FlatButton secondary label="Comment"  />
-                      </CardActions>
-                      <CardHeader
-                        showExpandableButton
-                        title="Comments" />
-                      <List expandable>
-                        <ListItem>
-                          <h3>John</h3>
-                          <p>post.title  post.author + post.starCount</p>
-                        </ListItem>
-                        <ListItem>
-                          <h3>Mary</h3>
-                          <p>what a bad day</p>
-                        </ListItem>
-                      </List>
-                    </Card>
-                  </div>
-                )
-                }
-                  )
-                }</ul>
-            }
-          </div>
-      </div>
-    </Tab>
-      <Tab label="latest posted users" value="b">
-        <div>
-        <ul>{
-            this.state.starred_posts.slice().reverse().map(
-              function(latest_post){
-          return(
-            <div className='col s12 m4'>
-              <Card>
-                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
-                <CardText>
-                  {latest_post.body}
-                </CardText>
-              </Card>
-            </div>
-          )
-          }
-            )
-          }</ul>
-          </div>
-        </Tab>
-      </Tabs>
-</div>
-    )
-  }
-}
-export default Home
+export default starredRefCard
 ```
@@ -638,7 +194,7 @@
 今後ホームに実装する機能として、
-①スターをつけたユーザーのカードを表示し、そこには最新のユーザーの記事を載せていきます。
+❎スターをつけたユーザーのカードを表示し、そこには最新のユーザーの記事を載せていきます。
 ❎ユーザーの検索機能。　だいたい目測はついた。
@@ -650,4 +206,10 @@
+現在、機能分割中です。
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

更新

2017/10/31 08:17

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -66,6 +66,8 @@
       userId:'',
+      starCount:'',
       search_users : [],
       starred_users : [],
@@ -98,7 +100,7 @@
     snapshot.forEach(function(childSnapshot) {
-      starred_users.push(childSnapshot.val())
+      starred_users.push(childSnapshot.val().starUserData)
     })
@@ -278,328 +280,350 @@
-starBtnClick = (value) =>{
+starBtnClick(value){
-  const self = this
+  this.addStar(value)
-  this.setState({willStarUser:value},this.allAddFunction)
 }
-addStarUserToDataBase() {
+addStar(uid) {
   const myUserId = this.state.userId
-  var starUserData = this.state.willStarUser;
-  var newStarUserRef = firebase.database().ref('/users/' + myUserId + '/starred_users/').push()
-  var path = newStarUserRef.toString()
-  newStarUserRef.set({
-    path:starUserData
-  })
+  const starUserData = uid
+  var add = true
+  firebase.database().ref('users/' + uid + '/userStar').transaction(function(count) {
+    if(count){
+      if(count.stars&&count.stars[myUserId]){
+        count.starCount--;
+        count.stars[myUserId] = null
+        add = false
+      }else{
+        count.starCount++
+        if (!count.stars) {
+          count.stars = {};
+        }
+        count.stars[myUserId] = true
+        add = true
+      }
+    }
+    return count
+  }).then(function(){
+      if(add){
+        return  firebase.database().ref('/users/' + myUserId + '/starred_users/').push().set({
+                  starUserData
+              })
+      }else{
+        return  firebase.database().ref('/users/' + myUserId + '/starred_users/').orderByChild('starUserData').startAt(starUserData).remove()
+      }
+    })
+  }
+/*------------Tab control------------------------------------------------------------------------*/
+handleChange_Tab = (value) => {
+  this.setState({
+    tabValue: value,
+  });
+};
+  render () {
+    return (
+      <div>
+        <div className='col s12 m4'>
+          <Card>
+            <CardText>
+              <TextField
+                id="search"
+                floatingLabelText="type username for search"
+                value={this.state.search}
+                onChange={this.handleChange_search}
+                />
+              <RaisedButton
+                label="Search"
+                secondary={true}
+                onClick={this.handleSearch}
+                />
+            </CardText>
+          </Card>
+        </div>
+      <div>
+          {
+            this.state.searchReference === '0'
+            ? <div><h>here is search reference view</h></div>
+            :<ul>{
+                this.state.search_users.map(
+                  function(searchRef){
+                    return(
+                      <div className='col s12 m4'>
+                        <Card>
+                          <CardTitle title={searchRef.user} subtitle={searchRef.title} />
+                          <CardText>
+                            {searchRef.explain}
+                          </CardText>
+                          <CardActions>
+                            <FlatButton
+                               backgroundColor="#a4c639"
+                               hoverColor="#8AA62F"
+                               label="STAR"
+                               onClick={() => this.starBtnClick(searchRef.uid)}
+                               value={searchRef.uid} />
+                          </CardActions>
+                        </Card>
+                      </div>
+                    )
+                  }.bind(this)
+                )
+              }</ul>
+          }
+        </div>
+      <Tabs
+        value={this.state.tabValue}
+        onChange={this.handleChange_Tab}
+      >
+        <Tab label="Stared users" value="a">
+      <div className='container'>
+        <div>
+            {
+              this.state.starred_users.length === 0
+              ? <div><h>There is no starred user</h></div>
+              : <ul>{
+                  this.state.starred_posts.slice().map(
+                    function(starred_user){
+                return(
+                  <div className='col s12 m4'>
+                    <Card>
+                      <CardTitle title={starred_user.title} subtitle={starred_user.author+ " star:"+starred_user.starCount} />
+                      <CardText>
+                        {starred_user.body}
+                      </CardText>
+                      <CardActions>
+                        <FlatButton secondary label="Comment"  />
+                      </CardActions>
+                      <CardHeader
+                        showExpandableButton
+                        title="Comments" />
+                      <List expandable>
+                        <ListItem>
+                          <h3>John</h3>
+                          <p>post.title  post.author + post.starCount</p>
+                        </ListItem>
+                        <ListItem>
+                          <h3>Mary</h3>
+                          <p>what a bad day</p>
+                        </ListItem>
+                      </List>
+                    </Card>
+                  </div>
+                )
+                }
+                  )
+                }</ul>
+            }
+          </div>
+      </div>
+    </Tab>
+      <Tab label="latest posted users" value="b">
+        <div>
+        <ul>{
+            this.state.starred_posts.slice().reverse().map(
+              function(latest_post){
+          return(
+            <div className='col s12 m4'>
+              <Card>
+                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
+                <CardText>
+                  {latest_post.body}
+                </CardText>
+              </Card>
+            </div>
+          )
+          }
+            )
+          }</ul>
+          </div>
+        </Tab>
+      </Tabs>
+</div>
+    )
+  }
 }
-resetWillStarUser(){
-  this.setState({
-    willStarUser:''
-  });
-}
-allAddFunction(){
-  const self = this
-  this.addStarUserToDataBase(function() {
-    self.resetWillStarUser()
-  })
-}
-/*------------Tab control------------------------------------------------------------------------*/
-handleChange_Tab = (value) => {
-  this.setState({
-    tabValue: value,
-  });
-};
-  render () {
-    return (
-      <div>
-        <div className='col s12 m4'>
-          <Card>
-            <CardText>
-              <TextField
-                id="search"
-                floatingLabelText="type username for search"
-                value={this.state.search}
-                onChange={this.handleChange_search}
-                />
-              <RaisedButton
-                label="Search"
-                secondary={true}
-                onClick={this.handleSearch}
-                />
-            </CardText>
-          </Card>
-        </div>
-      <div>
-          {
-            this.state.searchReference === '0'
-            ? <div><h>here is search reference view</h></div>
-            :<ul>{
-                this.state.search_users.map(
-                  function(searchRef){
-                    const self = this
-                    return(
-                      <div className='col s12 m4'>
-                        <Card>
-                          <CardTitle title={searchRef.user} subtitle={searchRef.title} />
-                          <CardText>
-                            {searchRef.explain}
-                          </CardText>
-                          <CardActions>
-                            <FlatButton primary label="STAR" onClick={this.starBtnClick}  value={searchRef.uid} />
-                          </CardActions>
-                        </Card>
-                      </div>
-                    )
-                  }.bind(this)
-                )
-              }</ul>
-          }
-        </div>
-      <Tabs
-        value={this.state.tabValue}
-        onChange={this.handleChange_Tab}
-      >
-        <Tab label="Stared users" value="a">
-      <div className='container'>
-        <div>
-            {
-              this.state.starred_users.length === 0
-              ? <div><h>There is no starred user</h></div>
-              : <ul>{
-                  this.state.starred_posts.slice().map(
-                    function(starred_user){
-                return(
-                  <div className='col s12 m4'>
-                    <Card>
-                      <CardTitle title={starred_user.title} subtitle={starred_user.author+ " star:"+starred_user.starCount} />
-                      <CardText>
-                        {starred_user.body}
-                      </CardText>
-                      <CardActions>
-                        <FlatButton secondary label="Comment"  />
-                      </CardActions>
-                      <CardHeader
-                        showExpandableButton
-                        title="Comments" />
-                      <List expandable>
-                        <ListItem>
-                          <h3>John</h3>
-                          <p>post.title  post.author + post.starCount</p>
-                        </ListItem>
-                        <ListItem>
-                          <h3>Mary</h3>
-                          <p>what a bad day</p>
-                        </ListItem>
-                      </List>
-                    </Card>
-                  </div>
-                )
-                }
-                  )
-                }</ul>
-            }
-          </div>
-      </div>
-    </Tab>
-      <Tab label="latest posted users" value="b">
-        <div>
-        <ul>{
-            this.state.starred_posts.slice().reverse().map(
-              function(latest_post){
-          return(
-            <div className='col s12 m4'>
-              <Card>
-                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
-                <CardText>
-                  {latest_post.body}
-                </CardText>
-              </Card>
-            </div>
-          )
-          }
-            )
-          }</ul>
-          </div>
-        </Tab>
-      </Tabs>
-</div>
-    )
-  }
-}
 export default Home

更新

2017/10/28 10:03

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -56,15 +56,23 @@
       tabValue:'a',
+      starBtnShown:'1',
-      off_stared_user:'',
+      off_starred_user:'',
-      off_stared_user_posts:'',
+      off_starred_user_posts:'',
+      willStarUser:'',
       userId:'',
+      search_users : [],
-      stared_users: [],
+      starred_users : [],
+      starred_posts : [],
-      posts: []
+      latest_posts : [],
     }
@@ -72,356 +80,530 @@
+/*------------refer starred user-------------------------------------------------------------------*/
+fetchStarredUser(onchange) {
+  const self1 = this
+  const myUserId = self1.state.userId
+  var onValueChange1 = firebase.database().ref('/users/' + myUserId + '/starred_users').on('value', function(snapshot) {
+    const starred_users = [];
+    snapshot.forEach(function(childSnapshot) {
+      starred_users.push(childSnapshot.val())
+    })
+    self1.setState({
+      starred_users: starred_users
+    }, function() {
+      if (onchange) onchange();
+    });
+  });
+  this.setState({
+    off_starred_user: onValueChange1
+  })
+}
+fetchStarredUserPosts() {
+  const self2 = this
+  const posts = [];
+  const stateStarredUsers = this.state.starred_users
+  for (var i = 0; i < stateStarredUsers.length; i++) {
+    const starredUser = stateStarredUsers[i]
+    firebase.database().ref('/users/' + starredUser + '/user_posts/').limitToFirst(1).once('value', function(snapshot) {
+      snapshot.forEach(function(childSnapshot) {
+        posts.push(childSnapshot.val())
+        self2.setState({
+          starred_posts: posts
+        });
+      })
+    });
+  }
+}
-    fetchStaredUser(){
+fetchAllStarUser() {
-      const self = this
+  const self = this
-      const myUserId = self.state.userId
+  this.fetchStarredUser(function() {
-      var onValueChange1 = firebase.database().ref('/users/'+myUserId+'/stared_users').on('value',function(snapshot) {
-        const stared_users = [];
+    self.fetchStarredUserPosts()
-        snapshot.forEach(function(childSnapshot){
-          stared_users.push(childSnapshot.val())
-          })
+  })
-        self.setState({ stared_users: stared_users });
-      });
+}
+/*------------life cicle method--------------------------------------------------------------------*/
-      this.setState({off_stared_user:onValueChange1})
+    componentWillMount(){
     }
-    fetchStaredUserPosts(){
-      const self = this
-      for(var i = 0 ; i < self.state.stared_users.length ; i++){
-        const staredUser = this.state.stared_users[i]
-        var onValueChange2 = firebase.database().ref('/users/' + staredUser + '/user_posts/').limitToFirst(1).on('value',function(snapshot) {
-            const posts = [];
-            snapshot.forEach(function(childSnapshot){
-              posts.push(childSnapshot.val())
-              })
-              self.setState({ posts: posts });
-            });
-            this.setState({off_stared_user_posts:onValueChange2})
+    componentDidMount(){
+      const self=this
+      var unsub = firebase.auth().onAuthStateChanged(function(user){
+        if(user){
+          self.setState({
+            userId : firebase.auth().currentUser.uid
+          },self.fetchAllStarUser);
+        }
+        else {
+          self.props.history.push('/login')
+        }
+      })
+      this.setState({unsub});
+    }
+  componentWillUnmount() {
+    const self = this
+  this.state.unsub();
+  firebase.database().ref('/users/'+this.state.userId+'/starred_users/').off('value', self.state.off)
+};
+/*------------search reference method--------------------------------------------------------------*/
+handleChange_search = (event) => {
+  this.setState({
+    search: event.target.value,
+  });
+};
+handleSearch = (event) =>{
+  const self = this
+  firebase.database().ref('/users/').orderByChild('user').startAt(self.state.search).endAt(self.state.search+"\uf8ff").once("value").then(function(snapshot) {
+    const search_users =[]
+    snapshot.forEach(function(childSnapshot) {
+      search_users.push(childSnapshot.val())
+    })
+    self.setState({
+      search_users:search_users,
+    });
+  })
+  this.setState({searchReference:'1'});
+}
+/*------------add star user------------------------------------------------------------------------*/
+starBtnClick = (value) =>{
+  const self = this
+  this.setState({willStarUser:value},this.allAddFunction)
+}
+addStarUserToDataBase() {
+  const myUserId = this.state.userId
+  var starUserData = this.state.willStarUser;
+  var newStarUserRef = firebase.database().ref('/users/' + myUserId + '/starred_users/').push()
+  var path = newStarUserRef.toString()
+  newStarUserRef.set({
+    path:starUserData
+  })
+}
+resetWillStarUser(){
+  this.setState({
+    willStarUser:''
+  });
+}
+allAddFunction(){
+  const self = this
+  this.addStarUserToDataBase(function() {
+    self.resetWillStarUser()
+  })
+}
+/*------------Tab control------------------------------------------------------------------------*/
+handleChange_Tab = (value) => {
+  this.setState({
+    tabValue: value,
+  });
+};
+  render () {
+    return (
+      <div>
+        <div className='col s12 m4'>
+          <Card>
+            <CardText>
+              <TextField
+                id="search"
+                floatingLabelText="type username for search"
+                value={this.state.search}
+                onChange={this.handleChange_search}
+                />
+              <RaisedButton
+                label="Search"
+                secondary={true}
+                onClick={this.handleSearch}
+                />
+            </CardText>
+          </Card>
+        </div>
+      <div>
+          {
+            this.state.searchReference === '0'
+            ? <div><h>here is search reference view</h></div>
+            :<ul>{
+                this.state.search_users.map(
+                  function(searchRef){
+                    const self = this
+                    return(
+                      <div className='col s12 m4'>
+                        <Card>
+                          <CardTitle title={searchRef.user} subtitle={searchRef.title} />
+                          <CardText>
+                            {searchRef.explain}
+                          </CardText>
+                          <CardActions>
+                            <FlatButton primary label="STAR" onClick={this.starBtnClick}  value={searchRef.uid} />
+                          </CardActions>
+                        </Card>
+                      </div>
+                    )
+                  }.bind(this)
+                )
+              }</ul>
           }
-        }
-    componentWillMount(){
-      const self=this
-      var unsub = firebase.auth().onAuthStateChanged(function(user){
-        if(user){
-          self.setState({
-            userId : firebase.auth().currentUser.uid
-          },self.fetchStaredUser);
-          self.fetchStaredUserPosts
+        </div>
+      <Tabs
+        value={this.state.tabValue}
+        onChange={this.handleChange_Tab}
+      >
+        <Tab label="Stared users" value="a">
+      <div className='container'>
+        <div>
+            {
+              this.state.starred_users.length === 0
+              ? <div><h>There is no starred user</h></div>
+              : <ul>{
+                  this.state.starred_posts.slice().map(
+                    function(starred_user){
+                return(
+                  <div className='col s12 m4'>
+                    <Card>
+                      <CardTitle title={starred_user.title} subtitle={starred_user.author+ " star:"+starred_user.starCount} />
+                      <CardText>
+                        {starred_user.body}
+                      </CardText>
+                      <CardActions>
+                        <FlatButton secondary label="Comment"  />
+                      </CardActions>
+                      <CardHeader
+                        showExpandableButton
+                        title="Comments" />
+                      <List expandable>
+                        <ListItem>
+                          <h3>John</h3>
+                          <p>post.title  post.author + post.starCount</p>
+                        </ListItem>
+                        <ListItem>
+                          <h3>Mary</h3>
+                          <p>what a bad day</p>
+                        </ListItem>
+                      </List>
+                    </Card>
+                  </div>
+                )
+                }
+                  )
+                }</ul>
+            }
+          </div>
+      </div>
+    </Tab>
+      <Tab label="latest posted users" value="b">
+        <div>
+        <ul>{
+            this.state.starred_posts.slice().reverse().map(
+              function(latest_post){
+          return(
+            <div className='col s12 m4'>
+              <Card>
+                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
+                <CardText>
+                  {latest_post.body}
+                </CardText>
+              </Card>
+            </div>
+          )
           }
-          else {
-            self.props.history.push('/login')
-          }
-      })
+            )
-      this.setState({unsub});
+          }</ul>
-    }
-    componentDidMount(){
+          </div>
+        </Tab>
+      </Tabs>
+</div>
+    )
   }
-  componentWillUnmount() {
-    const self = this
-  this.state.unsub();
-  firebase.database().ref('/users/'+this.state.userId+'/stared_users/').off('value', self.state.off)
-};
-handleChange_search = (event) => {
-  this.setState({
-    search: event.target.value,
-  });
-};
-handleSearch = (event) =>{
-  const self = this
-  firebase.database().ref().startAt(self.state.search).endAt(self.state.search+"\uf8ff").once("value")
-  this.setState({searchReference:'1'});
-};
-handleChange_Tab = (value) => {
-  this.setState({
-    tabValue: value,
-  });
-};
-  render () {
-    return (
-      <div>
-      <div className='col s12 m4'>
-        <Card>
-          <CardText>
-            <TextField
-              id="search"
-              floatingLabelText="type username for search"
-              value={this.state.search}
-              onChange={this.handleChange_search}
-              />
-              <RaisedButton
-                label="Search"
-                secondary={true}
-                onClick={this.handleSearch}
-                />
-          </CardText>
-        </Card>
-      </div>
-      <div>
-          {
-            this.state.searchReference === '0'
-            ? <div><h>There is no such user</h></div>
-            :<ul>{
-                <div className='col s12 m4'>
-                  <Card>
-                    <CardTitle title='you can open this' subtitle='game master' />
-                    <CardText>
-                      congra
-                    </CardText>
-                  </Card>
-                </div>
-              }
-              </ul>
-          }
-          </div>
-      <Tabs
-        value={this.state.tabValue}
-        onChange={this.handleChange_Tab}
-      >
-        <Tab label="Stared users" value="a">
-      <div className='container'>
-        <div>
-            {
-              this.state.stared_users.length === 0
-              ? <div><h>There is no stared user</h></div>
-              : <ul>{
-                  this.state.posts.slice().reverse().map(
-                    function(stared_user){
-                return(
-                  <div className='col s12 m4'>
-                    <Card>
-                      <CardTitle title={stared_user.title} subtitle={stared_user.author+ " star:"+stared_user.starCount} />
-                      <CardText>
-                        {stared_user.body}
-                      </CardText>
-                    </Card>
-                  </div>
-                )
-                }
-                  )
-                }</ul>
-            }
-            </div>
-      </div>
-    </Tab>
-      <Tab label="latest posted users" value="b">
-        <div>
-        <ul>{
-            this.state.posts.slice().reverse().map(
-              function(latest_post){
-          return(
-            <div className='col s12 m4'>
-              <Card>
-                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
-                <CardText>
-                  {latest_post.body}
-                </CardText>
-              </Card>
-            </div>
-          )
-          }
-            )
-          }</ul>
-          </div>
-        </Tab>
-      </Tabs>
-</div>
-    )
-  }
 }
 export default Home
 ```

更新

2017/10/27 15:10

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -72,14 +72,12 @@
-    fetchPosts(){
+    fetchStaredUser(){
       const self = this
       const myUserId = self.state.userId
-      const staredUser=self.state.stared_users
       var onValueChange1 = firebase.database().ref('/users/'+myUserId+'/stared_users').on('value',function(snapshot) {
         const stared_users = [];
@@ -96,26 +94,40 @@
       this.setState({off_stared_user:onValueChange1})
-      var onValueChange2 = firebase.database().ref('/users/'+staredUser+'/user_posts/').on('value',function(snapshot) {
-        const posts = [];
-        snapshot.forEach(function(childSnapshot){
-          posts.push(childSnapshot.val())
-          })
-        self.setState({ posts: posts });
-      });
-      this.setState({off_stared_user_posts:onValueChange2})
     }
+    fetchStaredUserPosts(){
+      const self = this
+      for(var i = 0 ; i < self.state.stared_users.length ; i++){
+        const staredUser = this.state.stared_users[i]
+        var onValueChange2 = firebase.database().ref('/users/' + staredUser + '/user_posts/').limitToFirst(1).on('value',function(snapshot) {
+            const posts = [];
+            snapshot.forEach(function(childSnapshot){
+              posts.push(childSnapshot.val())
+              })
+              self.setState({ posts: posts });
+            });
+            this.setState({off_stared_user_posts:onValueChange2})
+          }
+        }
     componentWillMount(){
       const self=this
@@ -128,9 +140,9 @@
             userId : firebase.auth().currentUser.uid
-          },self.fetchPosts);
+          },self.fetchStaredUser);
+          self.fetchStaredUserPosts
           }
@@ -410,8 +422,6 @@
 export default Home
 ```

修正

2017/10/26 11:23

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -104,10 +104,10 @@
           posts.push(childSnapshot.val())
-          self.setState({ posts: posts });
           })
+        self.setState({ posts: posts });
       });
       this.setState({off_stared_user_posts:onValueChange2})

コード更新

2017/10/26 09:31

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -88,10 +88,10 @@
           stared_users.push(childSnapshot.val())
-          self.setState({ stared_users: stared_users });
           })
+        self.setState({ stared_users: stared_users });
       });
       this.setState({off_stared_user:onValueChange1})

更新コード

2017/10/26 09:30

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -56,7 +56,9 @@
       tabValue:'a',
-      off:'',
+      off_stared_user:'',
+      off_stared_user_posts:'',
       userId:'',
@@ -70,6 +72,50 @@
+    fetchPosts(){
+      const self = this
+      const myUserId = self.state.userId
+      const staredUser=self.state.stared_users
+      var onValueChange1 = firebase.database().ref('/users/'+myUserId+'/stared_users').on('value',function(snapshot) {
+        const stared_users = [];
+        snapshot.forEach(function(childSnapshot){
+          stared_users.push(childSnapshot.val())
+          self.setState({ stared_users: stared_users });
+          })
+      });
+      this.setState({off_stared_user:onValueChange1})
+      var onValueChange2 = firebase.database().ref('/users/'+staredUser+'/user_posts/').on('value',function(snapshot) {
+        const posts = [];
+        snapshot.forEach(function(childSnapshot){
+          posts.push(childSnapshot.val())
+          self.setState({ posts: posts });
+          })
+      });
+      this.setState({off_stared_user_posts:onValueChange2})
+    }
     componentWillMount(){
       const self=this
@@ -104,25 +150,7 @@
     componentDidMount(){
-      const myUserId = this.state.userId
-      const self = this
-      var onValueChange = firebase.database().ref('/users/'+myUserId+'/stared_users/').on('value',function(snapshot) {
-        const stared_users = [];
-        snapshot.forEach(function(childSnapshot){
-          stared_users.push(childSnapshot.val()),
-          self.setState({ stared_users: stared_users });
-        })
-    });
-    this.setState({off:onValueChange})
   }
@@ -224,29 +252,25 @@
           {
-            this.state.searchReference === 0
+            this.state.searchReference === '0'
             ? <div><h>There is no such user</h></div>
             :<ul>{
-                this.state.posts.slice().reverse().map(
-                  function(stared_user){
-              return(
                 <div className='col s12 m4'>
                   <Card>
-                    <CardTitle title={stared_user.title} subtitle={stared_user.author+ " star:"+stared_user.starCount} />
+                    <CardTitle title='you can open this' subtitle='game master' />
                     <CardText>
-                      a
-                      {stared_user.body}
+                      congra
                     </CardText>
@@ -254,122 +278,122 @@
                 </div>
-              )
               }
+              </ul>
+          }
+          </div>
+      <Tabs
+        value={this.state.tabValue}
+        onChange={this.handleChange_Tab}
+      >
+        <Tab label="Stared users" value="a">
+      <div className='container'>
+        <div>
+            {
+              this.state.stared_users.length === 0
+              ? <div><h>There is no stared user</h></div>
+              : <ul>{
+                  this.state.posts.slice().reverse().map(
+                    function(stared_user){
+                return(
+                  <div className='col s12 m4'>
+                    <Card>
+                      <CardTitle title={stared_user.title} subtitle={stared_user.author+ " star:"+stared_user.starCount} />
+                      <CardText>
+                        {stared_user.body}
+                      </CardText>
+                    </Card>
+                  </div>
                 )
+                }
+                  )
-              }</ul>
+                }</ul>
+            }
+            </div>
+      </div>
+    </Tab>
+      <Tab label="latest posted users" value="b">
+        <div>
+        <ul>{
+            this.state.posts.slice().reverse().map(
+              function(latest_post){
+          return(
+            <div className='col s12 m4'>
+              <Card>
+                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
+                <CardText>
+                  {latest_post.body}
+                </CardText>
+              </Card>
+            </div>
+          )
           }
+            )
+          }</ul>
           </div>
-      <Tabs
-        value={this.state.tabValue}
-        onChange={this.handleChange_Tab}
-      >
-        <Tab label="Stared users" value="a">
-      <div className='container'>
-        <div>
-            {
-              this.state.stared_users.length === 0
-              ? <div><h>There is no stared user</h></div>
-              : <ul>{
-                  this.state.posts.slice().reverse().map(
-                    function(stared_user){
-                return(
-                  <div className='col s12 m4'>
-                    <Card>
-                      <CardTitle title={stared_user.title} subtitle={stared_user.author+ " star:"+stared_user.starCount} />
-                      <CardText>
-                        {stared_user.body}
-                      </CardText>
-                    </Card>
-                  </div>
-                )
-                }
-                  )
-                }</ul>
-            }
-            </div>
-      </div>
-    </Tab>
-      <Tab label="latest posted users" value="b">
-        <div>
-        <ul>{
-            this.state.posts.slice().reverse().map(
-              function(latest_post){
-          return(
-            <div className='col s12 m4'>
-              <Card>
-                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
-                <CardText>
-                  {latest_post.body}
-                </CardText>
-              </Card>
-            </div>
-          )
-          }
-            )
-          }</ul>
-          </div>
         </Tab>
       </Tabs>
@@ -386,6 +410,8 @@
 export default Home
 ```

コード更新

2017/10/26 08:29

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,16 +40,6 @@
 ```js
-import React, { Component } from 'react'
-import { Card, CardTitle, CardText } from 'material-ui/Card'
-import firebase from 'firebase'
 class Home extends Component {
   constructor(props) {
@@ -60,6 +50,12 @@
       unsub:'',
+      search:'',
+      searchReference:'0',
+      tabValue:'a',
       off:'',
       userId:'',
@@ -82,24 +78,24 @@
         if(user){
+          self.setState({
+            userId : firebase.auth().currentUser.uid
+          },self.fetchPosts);
           }
           else {
+            self.props.history.push('/login')
           }
       })
-      this.setState({
-        userId : firebase.auth().currentUser.uid
-      });
       this.setState({unsub});
     }
@@ -144,6 +140,42 @@
+handleChange_search = (event) => {
+  this.setState({
+    search: event.target.value,
+  });
+};
+handleSearch = (event) =>{
+  const self = this
+  firebase.database().ref().startAt(self.state.search).endAt(self.state.search+"\uf8ff").once("value")
+  this.setState({searchReference:'1'});
+};
+handleChange_Tab = (value) => {
+  this.setState({
+    tabValue: value,
+  });
+};
@@ -152,6 +184,102 @@
     return (
+      <div>
+      <div className='col s12 m4'>
+        <Card>
+          <CardText>
+            <TextField
+              id="search"
+              floatingLabelText="type username for search"
+              value={this.state.search}
+              onChange={this.handleChange_search}
+              />
+              <RaisedButton
+                label="Search"
+                secondary={true}
+                onClick={this.handleSearch}
+                />
+          </CardText>
+        </Card>
+      </div>
+      <div>
+          {
+            this.state.searchReference === 0
+            ? <div><h>There is no such user</h></div>
+            :<ul>{
+                this.state.posts.slice().reverse().map(
+                  function(stared_user){
+              return(
+                <div className='col s12 m4'>
+                  <Card>
+                    <CardTitle title={stared_user.title} subtitle={stared_user.author+ " star:"+stared_user.starCount} />
+                    <CardText>
+                      a
+                      {stared_user.body}
+                    </CardText>
+                  </Card>
+                </div>
+              )
+              }
+                )
+              }</ul>
+          }
+          </div>
+      <Tabs
+        value={this.state.tabValue}
+        onChange={this.handleChange_Tab}
+      >
+        <Tab label="Stared users" value="a">
       <div className='container'>
         <div>
@@ -200,7 +328,53 @@
       </div>
+    </Tab>
+      <Tab label="latest posted users" value="b">
+        <div>
+        <ul>{
+            this.state.posts.slice().reverse().map(
+              function(latest_post){
+          return(
+            <div className='col s12 m4'>
+              <Card>
+                <CardTitle title={latest_post.title} subtitle={latest_post.author+ " star:"+latest_post.starCount} />
+                <CardText>
+                  {latest_post.body}
+                </CardText>
+              </Card>
+            </div>
+          )
+          }
+            )
+          }</ul>
+          </div>
+        </Tab>
+      </Tabs>
+</div>
     )
@@ -224,9 +398,9 @@
 ①スターをつけたユーザーのカードを表示し、そこには最新のユーザーの記事を載せていきます。
-②ユーザーの検索機能。　これがないと①の機能を使いづらいのでなんとかしたいです。
+❎ユーザーの検索機能。　だいたい目測はついた。
-③記事ごとのコメント機能　　これはぜひほしい機能ですが、１、２に比べると重要性が薄く、まだまだ先でいいです。
+③記事ごとのコメント機能　　カードにつける。

ホームのビュー

2017/10/25 22:00

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -32,7 +32,7 @@
-不明点
+不明点（ホームのビュー）
 ---
@@ -40,7 +40,17 @@
 ```js
+import React, { Component } from 'react'
+import { Card, CardTitle, CardText } from 'material-ui/Card'
+import firebase from 'firebase'
-class MyPage extends Component {
+class Home extends Component {
   constructor(props) {
@@ -50,355 +60,177 @@
       unsub:'',
-      tabValue:'a',
-      title: '',
+      off:'',
-      userId: '',
+      userId:'',
-      username: '',
+      stared_users: [],
-      explain: '',
-      post_title:'',
-      post_body:'',
       posts: []
     }
+}
+    componentWillMount(){
+      const self=this
+      var unsub = firebase.auth().onAuthStateChanged(function(user){
+        if(user){
+          }
+          else {
+          }
+      })
+      this.setState({
+        userId : firebase.auth().currentUser.uid
+      });
+      this.setState({unsub});
+    }
+    componentDidMount(){
+      const myUserId = this.state.userId
+      const self = this
+      var onValueChange = firebase.database().ref('/users/'+myUserId+'/stared_users/').on('value',function(snapshot) {
+        const stared_users = [];
+        snapshot.forEach(function(childSnapshot){
+          stared_users.push(childSnapshot.val()),
+          self.setState({ stared_users: stared_users });
+        })
+    });
+    this.setState({off:onValueChange})
   }
-  componentWillMount(){
+  componentWillUnmount() {
-    const self=this
-    var unsub = firebase.auth().onAuthStateChanged(function(user){
-      if(user){
-        }
-        else {
-          self.props.history.push('/login')
-        }
-    })
-    this.setState({
-      userId : firebase.auth().currentUser.uid
-    });
-    this.setState({unsub});
-  };
-  componentDidMount(){
-    const myUserId = this.state.userId
     const self = this
-    firebase.database().ref('/users/'+myUserId).once('value').then(function(snapshot) {
-      self.setState({
+  this.state.unsub();
-        username: snapshot.val().user,
-        title: snapshot.val().title,
-        explain: snapshot.val().explain
-      });
-    });
-    firebase.database().ref('/users/'+myUserId+'/user_posts/').once('value').then(function(snapshot) {
+  firebase.database().ref('/users/'+this.state.userId+'/stared_users/').off('value', self.state.off)
-      const posts = [];
-      snapshot.forEach(function(childSnapshot){
-        posts.push(childSnapshot.val()),
-        self.setState({ posts: posts });
-      })
-  });
+};
+  render () {
+    return (
+      <div className='container'>
+        <div>
+            {
+              this.state.stared_users.length === 0
+              ? <div><h>There is no stared user</h></div>
+              : <ul>{
+                  this.state.posts.slice().reverse().map(
+                    function(stared_user){
+                return(
+                  <div className='col s12 m4'>
+                    <Card>
+                      <CardTitle title={stared_user.title} subtitle={stared_user.author+ " star:"+stared_user.starCount} />
+                      <CardText>
+                        {stared_user.body}
+                      </CardText>
+                    </Card>
+                  </div>
+                )
+                }
+                  )
+                }</ul>
+            }
+            </div>
+      </div>
+    )
+  }
 }
-  componentWillUnmount() {
-  this.state.unsub();
-};
-  handleChange_Tab = (value) => {
-    this.setState({
-      tabValue: value,
-    });
-  };
-  handleChange_title = (event) => {
-    this.setState({
-      post_title: event.target.value
-    });
-  };
-  handleChange_body = (event) => {
-    this.setState({
-      post_body: event.target.value
-    });
-  };
-  handleSubmit=(event) =>{
-    const self = this
-    function writeNewPost() {
-    // A post entry.
-    var postData = {
-    author: self.state.username,
-    uid: self.state.userId,
-    body: self.state.post_body,
-    title: self.state.post_title,
-    starCount: 0,
-    };
-    // Get a key for a new Post.
-    var newPostKey = firebase.database().ref().child('posts').push().key;
-    // Write the new post's data simultaneously in the posts list and the user's post list.
-    var updates = {};
-    updates['/posts/' + newPostKey] = postData;
-    updates['/users/' + self.state.userId + '/user_posts/' + newPostKey] = postData;
-    return firebase.database().ref().update(updates);
-    }
-    writeNewPost()
-    this.setState({
-      post_title:'',
-      post_body:''
-    });
-  };
-  render() {
-    return (
-      <div>
-        <div className='col s12 m4'>
-          <Card>
-            <CardTitle title={"MyPage For " + this.state.username}subtitle={this.state.title} />
-            <CardText>
-              {this.state.explain}
-            </CardText>
-          </Card>
-        </div>
-        <Tabs
-          value={this.state.tabValue}
-          onChange={this.handleChange_Tab}
-        >
-          <Tab label="POSTING" value="a">
-            <div>
-              <Card>
-              <CardTitle title='Make new post'  subtitle={this.state.username} />
-                <CardText>
-                  <TextField
-                    id="post_title"
-                    floatingLabelText="type the title"
-                    value={this.state.post_title}
-                    onChange={this.handleChange_title}
-                    />
-                  <br />
-                  <TextField
-                    floatingLabelText="type the body"
-                    multiLine={true}
-                    value={this.state.post_body}
-                    onChange={this.handleChange_body}
-                    />
-                  <br />
-                  <RaisedButton
-                    label="posting"
-                    secondary={true}
-                    onClick={this.handleSubmit}
-                    />
-                  <br />
-                </CardText>
-              </Card>
-            </div>
-          </Tab>
-          <Tab label="POSTED" value="b">
-            <div>
-              <span>{ this.state.posts.length }</span>
-                {
-                  this.state.posts.length === 0
-                  ? <div><h>There is no post</h></div>
-                  : <ul>{
-                      this.state.posts.slice(-5).reverse().map(
-                        function(post){
-                      <div className='col s12 m4'>
-                        <Card>
-                          <CardTitle title={post.title} subtitle={post.author} />
-                          <CardText>
-                            {post.body}
-                          </CardText>
-                        </Card>
-                      </div>
-                    }
-                      )
-                    }</ul>
-                }
-                </div>
-              </Tab>
-            </Tabs>
-          </div>
-    )}
-}
-export default MyPage
+export default Home
 ```
-なんとなく、投稿のビューを作成しました。現在搭載に困っている内容は、POSTEDにてカードを表示させたいのですが、表示できません。
+ホームのビューの簡単なところを作成しました。return内はmypageのコピペも多いので、まだまだ間違いあると思います。
+今後ホームに実装する機能として、
+①スターをつけたユーザーのカードを表示し、そこには最新のユーザーの記事を載せていきます。
+②ユーザーの検索機能。　これがないと①の機能を使いづらいのでなんとかしたいです。
+③記事ごとのコメント機能　　これはぜひほしい機能ですが、１、２に比べると重要性が薄く、まだまだ先でいいです。
+などがあります。

更新。

2017/10/24 16:04

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,8 +40,6 @@
 ```js
 class MyPage extends Component {
   constructor(props) {
@@ -126,10 +124,10 @@
     firebase.database().ref('/users/'+myUserId+'/user_posts/').once('value').then(function(snapshot) {
+      const posts = [];
       snapshot.forEach(function(childSnapshot){
-        const posts = [];
         posts.push(childSnapshot.val()),
         self.setState({ posts: posts });
@@ -358,11 +356,11 @@
                         <Card>
-                          <CardTitle title={post.post_title} subtitle={post.username} />
+                          <CardTitle title={post.title} subtitle={post.author} />
                           <CardText>
-                            {post.post_body}
+                            {post.body}
                           </CardText>
@@ -370,7 +368,7 @@
                       </div>
-                      }
+                    }
                       )
@@ -394,15 +392,11 @@
 export default MyPage
 ```
-なんとなく、投稿のビューを作成しました。現在搭載に困っている内容は、POSTEDにて投稿があるときは最近の投稿５つを降順（最新の投稿順）で表示させたいです。、降順による表示を施工中です。がいまいちわかりません。
+なんとなく、投稿のビューを作成しました。現在搭載に困っている内容は、POSTEDにてカードを表示させたいのですが、表示できません。

更新

2017/10/24 13:17

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,6 +40,8 @@
 ```js
 class MyPage extends Component {
   constructor(props) {
@@ -348,7 +350,7 @@
                   : <ul>{
-                      this.state.items.slice(-5).reverse().map(
+                      this.state.posts.slice(-5).reverse().map(
                         function(post){
@@ -356,7 +358,7 @@
                         <Card>
-                          <CardTitle title={post.post_title} subtitle={this.state.username} />
+                          <CardTitle title={post.post_title} subtitle={post.username} />
                           <CardText>
@@ -394,6 +396,8 @@
 ```

コードの更新

2017/10/24 12:57

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -124,13 +124,37 @@
     firebase.database().ref('/users/'+myUserId+'/user_posts/').once('value').then(function(snapshot) {
+      snapshot.forEach(function(childSnapshot){
-      console.log(snapshot.val())
+        const posts = [];
-      self.setState({
-        posts: snapshot.val(),
+        posts.push(childSnapshot.val()),
+        self.setState({ posts: posts });
+      })
-      });
+  });
+}
+  componentWillUnmount() {
+  this.state.unsub();
+};
+  handleChange_Tab = (value) => {
+    this.setState({
+      tabValue: value,
     });
@@ -138,21 +162,11 @@
-  componentWillUnmount() {
-  this.state.unsub();
-};
-  handleChange_Tab = (value) => {
+  handleChange_title = (event) => {
     this.setState({
-      tabValue: value,
+      post_title: event.target.value
     });
@@ -160,11 +174,11 @@
-  handleChange_title = (event) => {
+  handleChange_body = (event) => {
     this.setState({
-      post_title: event.target.value
+      post_body: event.target.value
     });
@@ -172,11 +186,57 @@
-  handleChange_body = (event) => {
+  handleSubmit=(event) =>{
+    const self = this
+    function writeNewPost() {
+    // A post entry.
+    var postData = {
+    author: self.state.username,
+    uid: self.state.userId,
+    body: self.state.post_body,
+    title: self.state.post_title,
+    starCount: 0,
+    };
+    // Get a key for a new Post.
+    var newPostKey = firebase.database().ref().child('posts').push().key;
+    // Write the new post's data simultaneously in the posts list and the user's post list.
+    var updates = {};
+    updates['/posts/' + newPostKey] = postData;
+    updates['/users/' + self.state.userId + '/user_posts/' + newPostKey] = postData;
+    return firebase.database().ref().update(updates);
+    }
+    writeNewPost()
     this.setState({
+      post_title:'',
-      post_body: event.target.value
+      post_body:''
     });
@@ -184,64 +244,6 @@
-  handleSubmit=(event) =>{
-    const self = this
-    function writeNewPost() {
-    // A post entry.
-    var postData = {
-    author: self.state.username,
-    uid: self.state.userId,
-    body: self.state.post_body,
-    title: self.state.post_title,
-    starCount: 0,
-    };
-    // Get a key for a new Post.
-    var newPostKey = firebase.database().ref().child('posts').push().key;
-    // Write the new post's data simultaneously in the posts list and the user's post list.
-    var updates = {};
-    updates['/posts/' + newPostKey] = postData;
-    updates['/users/' + self.state.userId + '/user_posts/' + newPostKey] = postData;
-    return firebase.database().ref().update(updates);
-    }
-    writeNewPost()
-    this.setState({
-      post_title:'',
-      post_body:''
-    });
-  };
   render() {
@@ -336,27 +338,41 @@
             <div>
+              <span>{ this.state.posts.length }</span>
-              {
+                {
-                this.state.posts.length === 0
+                  this.state.posts.length === 0
-                ? <div><h>No entries</h></div>
+                  ? <div><h>There is no post</h></div>
+                  : <ul>{
+                      this.state.items.slice(-5).reverse().map(
+                        function(post){
-                : <div className='col s12 m4'>
+                      <div className='col s12 m4'>
-                  <Card>
+                        <Card>
-                    <CardTitle title={posts.post_title} subtitle={this.state.username} />
+                          <CardTitle title={post.post_title} subtitle={this.state.username} />
-                      <CardText>
+                          <CardText>
-                        {posts.post_body}
+                            {post.post_body}
-                      </CardText>
+                          </CardText>
-                    </Card>
+                        </Card>
-                  </div>
+                      </div>
+                      }
+                      )
+                    }</ul>
                 }
@@ -376,17 +392,15 @@
 export default MyPage
 ```
-なんとなく、投稿のビューを作成しました。現在搭載に困っている内容は、投稿がないときはPOSTEDにてyour posting does not exsist.と表示。投稿があるときは最近の投稿５つを降順（最新の投稿順）で表示させたいです。この場合分けと、降順による表示の考え方がいまいちわかりません。
+なんとなく、投稿のビューを作成しました。現在搭載に困っている内容は、POSTEDにて投稿があるときは最近の投稿５つを降順（最新の投稿順）で表示させたいです。、降順による表示を施工中です。がいまいちわかりません。
-また、投稿ごとにファイアーベースのデータベースを管理する方法もいまいちわかっていませんが、こちらは頑張って試行錯誤します。
-前述の内容の手助けお願いします。

カードの中身を修正

2017/10/24 12:30

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -346,11 +346,11 @@
                   <Card>
-                    <CardTitle title={this.state.post_title} subtitle={this.state.username} />
+                    <CardTitle title={posts.post_title} subtitle={this.state.username} />
                       <CardText>
-                        {this.state.post_body}
+                        {posts.post_body}
                       </CardText>

コード更新

2017/10/24 04:52

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -62,9 +62,9 @@
       post_title:'',
-      post_explain:'',
+      post_body:'',
-      items: []
+      posts: []
     }
@@ -120,8 +120,20 @@
       });
+    });
+    firebase.database().ref('/users/'+myUserId+'/user_posts/').once('value').then(function(snapshot) {
+      console.log(snapshot.val())
+      self.setState({
+        posts: snapshot.val(),
       });
+    });
   };
@@ -160,11 +172,11 @@
-  handleChange_explain = (event) => {
+  handleChange_body = (event) => {
-    this.setState({
+    this.setState({
-      post_explain: event.target.value
+      post_body: event.target.value
     });
@@ -174,17 +186,61 @@
   handleSubmit=(event) =>{
+    const self = this
-    event.preventDefault();
+    function writeNewPost() {
+    // A post entry.
+    var postData = {
-    firebase.database().ref('users/' + this.state.userId+'/posts/').set({
+    author: self.state.username,
+    uid: self.state.userId,
+    body: self.state.post_body,
-      post_title: this.state.post_title,
+    title: self.state.post_title,
-      post_explain: this.state.post_explain
+    starCount: 0,
-    })
-  };
+    };
+    // Get a key for a new Post.
+    var newPostKey = firebase.database().ref().child('posts').push().key;
+    // Write the new post's data simultaneously in the posts list and the user's post list.
+    var updates = {};
+    updates['/posts/' + newPostKey] = postData;
+    updates['/users/' + self.state.userId + '/user_posts/' + newPostKey] = postData;
+    return firebase.database().ref().update(updates);
+    }
+    writeNewPost()
+    this.setState({
+      post_title:'',
+      post_body:''
+    });
+  };
@@ -236,7 +292,7 @@
                     value={this.state.post_title}
-                    onChange={this.handleChange_tite}
+                    onChange={this.handleChange_title}
                     />
@@ -244,13 +300,13 @@
                   <TextField
-                    floatingLabelText="post_explaination"
+                    floatingLabelText="type the body"
                     multiLine={true}
-                    value={this.state.post_explain}
+                    value={this.state.post_body}
-                    onChange={this.handleChange_explain}
+                    onChange={this.handleChange_body}
                     />
@@ -280,31 +336,39 @@
             <div>
+              {
+                this.state.posts.length === 0
+                ? <div><h>No entries</h></div>
-            <div className='col s12 m4'>
+                : <div className='col s12 m4'>
-              <Card>
+                  <Card>
-                <CardTitle title={this.state.post_title} subtitle={this.state.username} />
+                    <CardTitle title={this.state.post_title} subtitle={this.state.username} />
-                <CardText>
+                      <CardText>
-                  {this.state.post_explain}
+                        {this.state.post_body}
-                </CardText>
+                      </CardText>
-              </Card>
+                    </Card>
-            </div>
+                  </div>
+                }
-            </div>
+                </div>
-          </Tab>
+              </Tab>
-        </Tabs>
+            </Tabs>
-      </div>
+          </div>
     )}
@@ -312,8 +376,6 @@
 export default MyPage
 ```

投稿のビューの不明点。

2017/10/24 04:28

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -50,6 +50,8 @@
       unsub:'',
+      tabValue:'a',
       title: '',
       userId: '',
@@ -58,6 +60,10 @@
       explain: '',
+      post_title:'',
+      post_explain:'',
       items: []
     }
@@ -130,6 +136,58 @@
+  handleChange_Tab = (value) => {
+    this.setState({
+      tabValue: value,
+    });
+  };
+  handleChange_title = (event) => {
+    this.setState({
+      post_title: event.target.value
+    });
+  };
+  handleChange_explain = (event) => {
+    this.setState({
+      post_explain: event.target.value
+    });
+  };
+  handleSubmit=(event) =>{
+    event.preventDefault();
+    firebase.database().ref('users/' + this.state.userId+'/posts/').set({
+      post_title: this.state.post_title,
+      post_explain: this.state.post_explain
+    })
+  };
   render() {
     return (
@@ -140,7 +198,7 @@
           <Card>
-            <CardTitle title='Mypage for {this.state.username}' subtitle={this.state.title} />
+            <CardTitle title={"MyPage For " + this.state.username}subtitle={this.state.title} />
             <CardText>
@@ -152,6 +210,100 @@
         </div>
+        <Tabs
+          value={this.state.tabValue}
+          onChange={this.handleChange_Tab}
+        >
+          <Tab label="POSTING" value="a">
+            <div>
+              <Card>
+              <CardTitle title='Make new post'  subtitle={this.state.username} />
+                <CardText>
+                  <TextField
+                    id="post_title"
+                    floatingLabelText="type the title"
+                    value={this.state.post_title}
+                    onChange={this.handleChange_tite}
+                    />
+                  <br />
+                  <TextField
+                    floatingLabelText="post_explaination"
+                    multiLine={true}
+                    value={this.state.post_explain}
+                    onChange={this.handleChange_explain}
+                    />
+                  <br />
+                  <RaisedButton
+                    label="posting"
+                    secondary={true}
+                    onClick={this.handleSubmit}
+                    />
+                  <br />
+                </CardText>
+              </Card>
+            </div>
+          </Tab>
+          <Tab label="POSTED" value="b">
+            <div>
+            <div className='col s12 m4'>
+              <Card>
+                <CardTitle title={this.state.post_title} subtitle={this.state.username} />
+                <CardText>
+                  {this.state.post_explain}
+                </CardText>
+              </Card>
+            </div>
+            </div>
+          </Tab>
+        </Tabs>
       </div>
     )}
@@ -160,11 +312,19 @@
 export default MyPage
 ```
+なんとなく、投稿のビューを作成しました。現在搭載に困っている内容は、投稿がないときはPOSTEDにてyour posting does not exsist.と表示。投稿があるときは最近の投稿５つを降順（最新の投稿順）で表示させたいです。この場合分けと、降順による表示の考え方がいまいちわかりません。
+また、投稿ごとにファイアーベースのデータベースを管理する方法もいまいちわかっていませんが、こちらは頑張って試行錯誤します。
-表示のさせ方にトラブルです。
+前述の内容の手助けお願いします。
-こうすると{username}だったり、 {this.state.explain}が出てこなかったり。syntaxの問題だとは思いますが、基礎が抜けててわかりません申し訳ないです。教えてもらえると助かります。

コード更新

2017/10/23 10:05

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -52,6 +52,8 @@
       title: '',
+      userId: '',
       username: '',
       explain: '',
@@ -82,6 +84,12 @@
     })
+    this.setState({
+      userId : firebase.auth().currentUser.uid
+    });
     this.setState({unsub});
   };
@@ -90,11 +98,21 @@
   componentDidMount(){
-    const myUserId = firebase.auth().currentUser.uid
+    const myUserId = this.state.userId
+    const self = this
     firebase.database().ref('/users/'+myUserId).once('value').then(function(snapshot) {
+      self.setState({
-      console.log(snapshot.val())
+        username: snapshot.val().user,
+        title: snapshot.val().title,
+        explain: snapshot.val().explain
+      });
       });
@@ -122,7 +140,7 @@
           <Card>
-            <CardTitle title='Mypage for {this.state.username}' subtitle='{this.state.title}'/>
+            <CardTitle title='Mypage for {this.state.username}' subtitle={this.state.title} />
             <CardText>
@@ -142,8 +160,6 @@
 export default MyPage
 ```
 表示のさせ方にトラブルです。

コード更新

2017/10/23 08:28

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -52,8 +52,6 @@
       title: '',
-      userId:'',
       username: '',
       explain: '',
@@ -72,11 +70,7 @@
       if(user){
-        self.setState({
-          userId : firebase.auth().currentUser.uid
-        })
         }
@@ -96,7 +90,7 @@
   componentDidMount(){
-    const myUserId = this.state.userId
+    const myUserId = firebase.auth().currentUser.uid
     firebase.database().ref('/users/'+myUserId).once('value').then(function(snapshot) {
@@ -148,6 +142,8 @@
 export default MyPage
 ```
 表示のさせ方にトラブルです。

コード更新

2017/10/23 07:34

投稿

MOTOMUR

スコア195

test CHANGED Viewed

	@@ -1 +1 @@
1	- あJSのみで投稿サイトのビュー
1	+ JSのみで投稿サイトのビュー

test CHANGED Viewed

File without changes

コード更新

2017/10/23 04:02

投稿

MOTOMUR

スコア195

test CHANGED Viewed

	@@ -1 +1 @@
1	- JSのみで投稿サイトのビュー
1	+ あJSのみで投稿サイトのビュー

test CHANGED Viewed

@@ -50,9 +50,9 @@
       unsub:'',
+      title: '',
       userId:'',
-      title: '',
       username: '',
@@ -76,7 +76,7 @@
           userId : firebase.auth().currentUser.uid
-        });
+        })
         }
@@ -96,23 +96,17 @@
   componentDidMount(){
-    const self = this
+    const myUserId = this.state.userId
-    firebase.database().ref().once('value').then(function(snapshot) {
+    firebase.database().ref('/users/'+myUserId).once('value').then(function(snapshot) {
-      self.setState({
-        username:snapshot.val().user,
-        explain:snapshot.val().explain,
-        title:snapshot.val().title
+      console.log(snapshot.val())
-      })
       });
   };
@@ -134,7 +128,7 @@
           <Card>
-            <CardTitle title='Mypage for {username}' subtitle='{this.state.title}'/>
+            <CardTitle title='Mypage for {this.state.username}' subtitle='{this.state.title}'/>
             <CardText>
@@ -152,6 +146,8 @@
 }
+export default MyPage
 ```
 表示のさせ方にトラブルです。

JS表示のstntaxがわからない。

2017/10/23 03:42

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -48,9 +48,11 @@
     this.state = {
+      unsub:'',
       userId:'',
-      currentItem: '',
+      title: '',
       username: '',
@@ -66,9 +68,15 @@
     const self=this
-    firebase.auth().onAuthStateChanged(function(user){
+    var unsub = firebase.auth().onAuthStateChanged(function(user){
       if(user){
+        self.setState({
+          userId : firebase.auth().currentUser.uid
+        });
         }
@@ -80,11 +88,7 @@
     })
-    this.setState({
+    this.setState({unsub});
-      userId : firebase.auth().currentUser.uid
-    });
   };
@@ -92,21 +96,31 @@
   componentDidMount(){
-    const itemsRef = firebase.database().ref(this.state.userId);
+    const self = this
-    const item = {
+    firebase.database().ref().once('value').then(function(snapshot) {
-      title: this.state.currentItem,
+      self.setState({
-      user: this.state.username,
+        username:snapshot.val().user,
-      explain: this.state.explain
+        explain:snapshot.val().explain,
+        title:snapshot.val().title
-    }
+      })
+      });
   };
+  componentWillUnmount() {
+  this.state.unsub();
+};
@@ -138,11 +152,11 @@
 }
-export default MyPage
 ```
+表示のさせ方にトラブルです。
-データーベースからデータを取ってくるところまではできたと思うのですが、これを取得して、renderで表示する方法に困っています。
+こうすると{username}だったり、 {this.state.explain}が出てこなかったり。syntaxの問題だとは思いますが、基礎が抜けててわかりません申し訳ないです。教えてもらえると助かります。

makemypageじゃなくてmakemypageでした

2017/10/20 02:04

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,7 +40,7 @@
 ```js
-class makeMyPage extends Component {
+class MyPage extends Component {
   constructor(props) {
@@ -138,7 +138,7 @@
 }
-export default makeMyPage
+export default MyPage
 ```

困っていること

2017/10/17 12:55

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -38,11 +38,111 @@
+```js
+class makeMyPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userId:'',
+      currentItem: '',
+      username: '',
+      explain: '',
+      items: []
+    }
+  }
+  componentWillMount(){
+    const self=this
-現在。投稿型ホームのビューを作ろうとしています。userの入力を受け取って、それを記事としてホームに追加するといった機能を導入したいです。
+    firebase.auth().onAuthStateChanged(function(user){
+      if(user){
+        }
+        else {
+          self.props.history.push('/login')
+        }
+    })
+    this.setState({
+      userId : firebase.auth().currentUser.uid
+    });
+  };
+  componentDidMount(){
+    const itemsRef = firebase.database().ref(this.state.userId);
+    const item = {
+      title: this.state.currentItem,
+      user: this.state.username,
+      explain: this.state.explain
+    }
+  };
+  render() {
+    return (
+      <div>
+        <div className='col s12 m4'>
+          <Card>
+            <CardTitle title='Mypage for {username}' subtitle='{this.state.title}'/>
+            <CardText>
+              {this.state.explain}
+            </CardText>
+          </Card>
+        </div>
+      </div>
+    )}
+}
+export default makeMyPage
+```
-まずは簡単にタイトルを記入して追加させるという機能を使って、投稿のビューがどうなってるかを学びたいです。
+データーベースからデータを取ってくるところまではできたと思うのですが、これを取得して、renderで表示する方法に困っています。

新規

2017/10/17 07:07

投稿

MOTOMUR

スコア195

test CHANGED Viewed

	@@ -1 +1 @@
1	- JSのみでユー~~ザー認証制御など。~~
1	+ JSのみで投稿サイトのビュー

test CHANGED Viewed

@@ -4,11 +4,11 @@
 - 搭載したい機能リスト
-進行中→ ●ユーザー認証
+　　　　・ユーザー認証（とりあえずは完成。）
 　　　　ーー（ページごとにユーザーのみ、ゲストのみと分けたい。）
-　　　　・ゲスト、ユーザーが見れるプラットホーム。
+進行中→●ゲスト、ユーザーが見れるプラットホーム。
 　　　　ーー（ユーザーが投稿した内容が時系列で表示）
@@ -24,7 +24,7 @@
-現在、ユーザー認証はFirebase経由で行います。
+ユーザー認証はFirebase経由で行っています。
 reduxは使いたくない！再三のバグ襲来に疲れました。
@@ -38,121 +38,11 @@
-```components/SideNav.js
-class SideNav extends Component {
+現在。投稿型ホームのビューを作ろうとしています。userの入力を受け取って、それを記事としてホームに追加するといった機能を導入したいです。
-  constructor (props) {
-    super(props)
-    this.state = {
-      open: false,
-      user: null
-    }
-  }
-  componentWillMount() {
-     var userstate= firebase.auth().currentUser;
-    this.setState({
-      user: userstate
-    });
-  };
-  handleClose = () => this.setState({ open: false })
-  render () {
-    return (
-      <div>
-        <AppBar
-          title='plz donation'
-          iconElementRight={
-            (this.state.user==null) ? <SideLoginButton></SideLoginButton>: <LogoutBtn></LogoutBtn>
-        }
-          onLeftIconButtonTouchTap={() =>
-            this.setState({ open: !this.state.open })}
-        />
-        <Drawer
-          open={this.state.open}
-          docked={false}
-          onRequestChange={open => this.setState({ open })}
-        >
-          <List>
-            {links.map((link, i) => {
-              return (
-                <SideBarItem
-                  isExact={link.isExact}
-                  linkTo={link.linkTo}
-                  primaryText={link.text}
-                  onClick={this.handleClose}
-                  key={i}
-                />
-              )
-            })}
-          </List>
-        </Drawer>
-      </div>
-    )
-  }
-}
-```
-コンパイルはできるようになりました。しかし、ログイン状態、ログアウト状態に関わらず、ボタンがずっとログインボタンのままです。
+まずは簡単にタイトルを記入して追加させるという機能を使って、投稿のビューがどうなってるかを学びたいです。
-二項演算子で何か間違っている点あるのでしょうか？それとも、このコンポーネントをリロードしないといけないのでしょうか？

新たなエラー

2017/10/16 02:37

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -48,7 +48,9 @@
     this.state = {
-      open: false
+      open: false,
+      user: null
     }
@@ -58,15 +60,13 @@
   componentWillMount() {
-    var config = {
+     var userstate= firebase.auth().currentUser;
-//hide
+    this.setState({
-  };
+      user: userstate
-    firebase.initializeApp(config)
-    var user = firebase.auth().currentUser;
+    });
   };
@@ -88,7 +88,7 @@
           iconElementRight={
-            user ? <SideLoginButton />:<LogoutBtn />
+            (this.state.user==null) ? <SideLoginButton></SideLoginButton>: <LogoutBtn></LogoutBtn>
         }
@@ -148,7 +148,11 @@
-自分のイメージでは    var user = firebase.auth().currentUser　をcomponentWillMountで、コンポーネント作成前にuserを定義し、renderのAppbarのuserで条件分岐させようと思ったのですが、render内のuserがnot definedです。
+コンパイルはできるようになりました。しかし、ログイン状態、ログアウト状態に関わらず、ボタンがずっとログインボタンのままです。
+二項演算子で何か間違っている点あるのでしょうか？それとも、このコンポーネントをリロードしないといけないのでしょうか？

修正

2017/10/14 15:49

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -25,6 +25,8 @@
 現在、ユーザー認証はFirebase経由で行います。
+reduxは使いたくない！再三のバグ襲来に疲れました。

不明点

2017/10/14 15:24

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -44,9 +44,29 @@
     super(props)
-    this.state = { open: false }
+    this.state = {
+      open: false
+    }
   }
+  componentWillMount() {
+    var config = {
+//hide
+  };
+    firebase.initializeApp(config)
+    var user = firebase.auth().currentUser;
+  };
@@ -64,7 +84,11 @@
           title='plz donation'
+          iconElementRight={
-          iconElementRight={<SideLoginButton />}
+            user ? <SideLoginButton />:<LogoutBtn />
+        }
           onLeftIconButtonTouchTap={() =>
@@ -118,29 +142,11 @@
 }
 ```
-この、ログインボタンの部分を、ログイン中はログアウトボタンに変えたいです。ログイン中かどうかはrender外のfirebase.auth().onAuthStateChanged(function(user){
-      if(user){
-        }
-        else {
-        }
-    })
-こいつで判別できるとして。
-render内の<SideLoginButton/>を<LogoutBtn>に変えることってどうやれますか？
+自分のイメージでは    var user = firebase.auth().currentUser　をcomponentWillMountで、コンポーネント作成前にuserを定義し、renderのAppbarのuserで条件分岐させようと思ったのですが、render内のuserがnot definedです。

ログアウトボタンについて

2017/10/14 13:42

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -36,149 +36,79 @@
-```js
+```components/SideNav.js
-class Login extends Component{
+class SideNav extends Component {
-    constructor (props) {
+  constructor (props) {
     super(props)
-    this.state = {
+    this.state = { open: false }
-      email: '',
-      password:''
-    };
   }
-  componentWillMount() {
-    var config = {
-//中身は見せられません。個別FIrebase用ののキーです。
+  handleClose = () => this.setState({ open: false })
-  };
-      firebase.initializeApp(config)
+  render () {
-  };
-  componentDidMount(){
-    firebase.auth().onAuthStateChanged(function(user){
-      if(user){
-          this.props.history.push('/')
-          console.log(this.state.email, this.state.password)
-        }
-        else {
-          this.props.history.push('/login')
-        }
-    })
-  };
-  handleChange_email = (event) => {
-    this.setState({
-      email: event.target.value,
-    });
-  };
-  handleChange_password = (event) => {
-    this.setState({
-      password: event.target.value
-    });
-  };
-  onLoginBtnClick = (event) => {
-    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
-  };
-  render(){
-    return(
+    return (
       <div>
-        <TextField
+        <AppBar
-          id="emailform"
+          title='plz donation'
-          value={this.state.email}
+          iconElementRight={<SideLoginButton />}
-          floatingLabelText="UserID"
+          onLeftIconButtonTouchTap={() =>
-          onChange={this.handleChange_email}
+            this.setState({ open: !this.state.open })}
-          style={{
+        />
-            margin: '0 auto',
+        <Drawer
-          }}
+          open={this.state.open}
-          />
+          docked={false}
-        <br />
+          onRequestChange={open => this.setState({ open })}
-        <TextField
+        >
-          id="passwordform"
+          <List>
-          value={this.state.password}
+            {links.map((link, i) => {
-          floatingLabelText="password"
+              return (
-          type='password'
+                <SideBarItem
-          onChange={this.handleChange_password}
+                  isExact={link.isExact}
-          />
+                  linkTo={link.linkTo}
-        <br />
+                  primaryText={link.text}
-        <RaisedButton
+                  onClick={this.handleClose}
-          label="Login"
+                  key={i}
-          secondary={true}
+                />
-          onClick={this.onLoginBtnClick}
+              )
+            })}
-          />
+          </List>
+        </Drawer>
       </div>
@@ -188,15 +118,29 @@
 }
 ```
+この、ログインボタンの部分を、ログイン中はログアウトボタンに変えたいです。ログイン中かどうかはrender外のfirebase.auth().onAuthStateChanged(function(user){
-とりあえずボタン押した時の分岐作成。
+      if(user){
+        }
-historyが not defined
+        else {
+        }
+    })
+こいつで判別できるとして。
+render内の<SideLoginButton/>を<LogoutBtn>に変えることってどうやれますか？

エラー更新

2017/10/13 15:44

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -72,6 +72,30 @@
+  componentDidMount(){
+    firebase.auth().onAuthStateChanged(function(user){
+      if(user){
+          this.props.history.push('/')
+          console.log(this.state.email, this.state.password)
+        }
+        else {
+          this.props.history.push('/login')
+        }
+    })
+  };
   handleChange_email = (event) => {
     this.setState({
@@ -100,24 +124,6 @@
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
-    console.log(this.state.email, this.state.password)
-    firebase.auth().onAuthStateChanged(function(user){
-      if(user){
-          this.props.history.push('/')
-        }
-        else {
-          this.props.history.push('/login')
-        }
-    })
   };
@@ -188,7 +194,9 @@
-propsの二つ目が、Notdefinedとなるのですが、どうやって二つ目のprops？をうまく使えますか？？？
+historyが not defined

修正

2017/10/13 15:05

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -58,7 +58,15 @@
   componentWillMount() {
+    var config = {
+//中身は見せられません。個別FIrebase用ののキーです。
+  };
-      firebase.initializeApp()
+      firebase.initializeApp(config)
   };
@@ -92,11 +100,7 @@
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
-  };
-  componentDidMount(){
+    console.log(this.state.email, this.state.password)
     firebase.auth().onAuthStateChanged(function(user){
@@ -164,7 +168,7 @@
           label="Login"
-          sedondary={true}
+          secondary={true}
           onClick={this.onLoginBtnClick}
@@ -180,9 +184,11 @@
 ```
+とりあえずボタン押した時の分岐作成。
-現在componentDidMount()に到達できていないことが判明。ボタン押した後に、この処理をさせるためにはどうしたらいいのでしょう。
+propsの二つ目が、Notdefinedとなるのですが、どうやって二つ目のprops？をうまく使えますか？？？

コード修正

2017/10/13 14:33

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -88,7 +88,7 @@
-  handleChange_button = (event) => {
+  onLoginBtnClick = (event) => {
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
@@ -96,25 +96,25 @@
-componentDidMount(){
+  componentDidMount(){
-  firebase.auth().onAuthStateChanged(function(user){
+    firebase.auth().onAuthStateChanged(function(user){
       if(user){
+          this.props.history.push('/')
         }
         else {
+          this.props.history.push('/login')
         }
-  })
+    })
-};
+  };
@@ -166,7 +166,7 @@
           sedondary={true}
-          onClick={this.handleChange_button}
+          onClick={this.onLoginBtnClick}
           />
@@ -182,7 +182,7 @@
-if(user)とelseで、別ファイルに記述した<Route>の内の一つに飛ばしたり、このページにリダイレクトしたり、したいです。
+現在componentDidMount()に到達できていないことが判明。ボタン押した後に、この処理をさせるためにはどうしたらいいのでしょう。

コード修正

2017/10/13 14:09

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -56,11 +56,19 @@
+  componentWillMount() {
+      firebase.initializeApp()
+  };
   handleChange_email = (event) => {
     this.setState({
-      email: event.target.email,
+      email: event.target.value,
     });
@@ -72,7 +80,7 @@
     this.setState({
-      password: event.target.password
+      password: event.target.value
     });
@@ -82,27 +90,31 @@
   handleChange_button = (event) => {
-    firebase.initializeApp()
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
-    firebase.auth().onAuthStateChanged(function(user){
-        if(user){
+  };
-          }
+componentDidMount(){
+  firebase.auth().onAuthStateChanged(function(user){
-          else {
+      if(user){
-          }
+        }
-    })
+        else {
+        }
+  })
-  };
+};
@@ -170,7 +182,7 @@
-if(user)で、それぞれ別の URLに飛ばせるようにしたいのですが、render外で書く方法がわかりません。
+if(user)とelseで、別ファイルに記述した<Route>の内の一つに飛ばしたり、このページにリダイレクトしたり、したいです。

ルーティング

2017/10/13 12:59

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -86,6 +86,22 @@
     firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
+    firebase.auth().onAuthStateChanged(function(user){
+        if(user){
+          }
+          else {
+          }
+    })
   };
@@ -106,6 +122,12 @@
           onChange={this.handleChange_email}
+          style={{
+            margin: '0 auto',
+          }}
           />
         <br />
@@ -122,7 +144,7 @@
           onChange={this.handleChange_password}
-        />
+          />
         <br />
@@ -134,7 +156,7 @@
           onClick={this.handleChange_button}
-        />
+          />
       </div>
@@ -148,7 +170,7 @@
-次はログイン状態の確認と、ログイン状態の画面遷移の作成します。
+if(user)で、それぞれ別の URLに飛ばせるようにしたいのですが、render外で書く方法がわかりません。

次の課題

2017/10/13 04:20

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -34,7 +34,7 @@
 ---
-テキストボックスから受け取った内容を変数に入れて、関数に渡すやり方がわかりません。
 ```js
@@ -46,9 +46,9 @@
     this.state = {
-      email: 'User ID',
+      email: '',
-      password:'Password'
+      password:''
     };
@@ -82,11 +82,9 @@
   handleChange_button = (event) => {
-    this.setState({
+    firebase.initializeApp()
-      firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
+    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
-    });
   };
@@ -104,6 +102,8 @@
           value={this.state.email}
+          floatingLabelText="UserID"
           onChange={this.handleChange_email}
           />
@@ -115,6 +115,8 @@
           id="passwordform"
           value={this.state.password}
+          floatingLabelText="password"
           type='password'
@@ -146,7 +148,7 @@
-firebaseの.が怒られます
+次はログイン状態の確認と、ログイン状態の画面遷移の作成します。

コード修正

2017/10/12 15:59

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -80,6 +80,16 @@
+  handleChange_button = (event) => {
+    this.setState({
+      firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
+    });
+  };
   render(){
@@ -90,9 +100,9 @@
         <TextField
-          id="text-field-controlled"
+          id="emailform"
-          email={this.state.email}
+          value={this.state.email}
           onChange={this.handleChange_email}
@@ -102,9 +112,9 @@
         <TextField
-          id="text-field-controlled"
+          id="passwordform"
-          password={this.state.password}
+          value={this.state.password}
           type='password'
@@ -120,9 +130,7 @@
           sedondary={true}
-          onClick={firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)}
+          onClick={this.handleChange_button}
         />
@@ -138,9 +146,7 @@
-index.jsのReactDOM.render(<App />, document.getElementById('root'))とfirebaseがreact-scripts start上で怒られます
+firebaseの.が怒られます

説明修正

2017/10/12 15:36

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -136,7 +136,11 @@
 ```
-現在emailとpasswordがnotdefined
+index.jsのReactDOM.render(<App />, document.getElementById('root'))とfirebaseがreact-scripts start上で怒られます

変更

2017/10/12 15:25

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -80,6 +80,8 @@
   render(){
     return(
@@ -118,7 +120,9 @@
           sedondary={true}
-          onClick={firebase.auth().signInWithEmailAndPassword(email, password)}
+          onClick={firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)}
         />

handleChange分離しました

2017/10/12 15:23

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -56,11 +56,21 @@
-  handleChange = (event) => {
+  handleChange_email = (event) => {
     this.setState({
       email: event.target.email,
+    });
+  };
+  handleChange_password = (event) => {
+    this.setState({
       password: event.target.password
@@ -82,7 +92,7 @@
           email={this.state.email}
-          onChange={this.handleChange}
+          onChange={this.handleChange_email}
           />
@@ -96,7 +106,7 @@
           type='password'
-          onChange={this.handleChange}
+          onChange={this.handleChange_password}
         />
@@ -122,15 +132,7 @@
 ```
-自分のイメージとしてはこれで、emailとpasswordの値を取得して代入するところまでは作れたつもりです。
+現在emailとpasswordがnotdefined
-handleChangeで二つの変数を同時に扱えるのかなと思いましたがどうなんでしょうか？
-textfieldそれぞれに別のclassを作成してあげて、最後にコンポーネントとして使用した方がいいのでしょうか？

とりあえずonChange

2017/10/12 15:06

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -82,6 +82,8 @@
           email={this.state.email}
+          onChange={this.handleChange}
           />
         <br />
@@ -93,6 +95,8 @@
           password={this.state.password}
           type='password'
+          onChange={this.handleChange}
         />

あああ

2017/10/12 15:04

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -104,13 +104,13 @@
           sedondary={true}
+          onClick={firebase.auth().signInWithEmailAndPassword(email, password)}
         />
       </div>
     )
-    firebase.auth().signInWithEmailAndPassword(email, password)
   }

2017/10/12 14:59

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -98,6 +98,14 @@
         <br />
+        <RaisedButton
+          label="Login"
+          sedondary={true}
+        />
       </div>
     )
@@ -107,8 +115,6 @@
   }
 }
-export default Login
 ```

コード修正

2017/10/12 14:51

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -70,43 +70,43 @@
-render(){
+  render(){
-  return(
+    return(
-    <div>
+      <div>
-      <TextField
+        <TextField
-        id="text-field-controlled"
+          id="text-field-controlled"
-        email={this.state.email}
+          email={this.state.email}
-      />
+          />
-      <br />
+        <br />
-      <TextField
+        <TextField
-        id="text-field-controlled"
+          id="text-field-controlled"
-        password={this.state.password}
+          password={this.state.password}
-        type='password'
+          type='password'
-      />
+        />
-      <br />
+        <br />
-    </div>
+      </div>
-  )
+    )
+    firebase.auth().signInWithEmailAndPassword(email, password)
+  }
 }
-firebase.auth().signInWithEmailAndPassword(email, password)
 export default Login

詳細

2017/10/12 14:37

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -36,7 +36,91 @@
 テキストボックスから受け取った内容を変数に入れて、関数に渡すやり方がわかりません。
+```js
+class Login extends Component{
+    constructor (props) {
+    super(props)
+    this.state = {
+      email: 'User ID',
+      password:'Password'
+    };
+  }
+  handleChange = (event) => {
+    this.setState({
+      email: event.target.email,
+      password: event.target.password
+    });
+  };
+render(){
+  return(
+    <div>
+      <TextField
+        id="text-field-controlled"
+        email={this.state.email}
+      />
+      <br />
+      <TextField
+        id="text-field-controlled"
+        password={this.state.password}
+        type='password'
+      />
+      <br />
+    </div>
+  )
+}
+firebase.auth().signInWithEmailAndPassword(email, password)
+export default Login
+```
+自分のイメージとしてはこれで、emailとpasswordの値を取得して代入するところまでは作れたつもりです。
+handleChangeで二つの変数を同時に扱えるのかなと思いましたがどうなんでしょうか？
+textfieldそれぞれに別のclassを作成してあげて、最後にコンポーネントとして使用した方がいいのでしょうか？

更新

2017/10/12 13:58

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -30,50 +30,14 @@
-目下エラー
+不明点
 ---
-git commit　がエラーに。。　git add まではできました。
+テキストボックスから受け取った内容を変数に入れて、関数に渡すやり方がわかりません。
-```git commit
-husky > npm run -s precommit (node v6.11.2)
- ✔ Running tasks for *.js
-Error: ENOENT: no such file or directory, open '/Users/owner/works/plz_donation/{"collectCoverageFrom":["src/**/*.{js,jsx}"],"setupFiles":["/Users/owner/works/plz_donation/node_modules/react-scripts/config/polyfills.js"],"testMatch":["<rootDir>/src/**/__tests__/**/*.js?(x)","<rootDir>/src/**/?(*.)(spec|test).js?(x)"],"testEnvironment":"node","testURL":"http:/localhost","transform":{"^.+\.(js|jsx)$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/babelTransform.js","^.+\.css$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\.(js|jsx|css|json)$)":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\]node_modules[/\\].+\.(js|jsx)$"],"moduleNameMapper":{"^react-native$":"react-native-web"},"moduleFileExtensions":["web.js","js","json","web.jsx","jsx"],"rootDir":"/Users/owner/works/plz_donation"}'
-    at Error (native)
-husky > pre-commit hook failed (add --no-verify to bypass)
-MurakaminoMacBook-Pro:plz_donation owner$ git commit -m "add login view"
-husky > npm run -s precommit (node v6.11.2)
- ✔ Running tasks for *.js
-Error: ENOENT: no such file or directory, open '/Users/owner/works/plz_donation/{"collectCoverageFrom":["src/**/*.{js,jsx}"],"setupFiles":["/Users/owner/works/plz_donation/node_modules/react-scripts/config/polyfills.js"],"testMatch":["<rootDir>/src/**/__tests__/**/*.js?(x)","<rootDir>/src/**/?(*.)(spec|test).js?(x)"],"testEnvironment":"node","testURL":"http:/localhost","transform":{"^.+\.(js|jsx)$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/babelTransform.js","^.+\.css$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\.(js|jsx|css|json)$)":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\]node_modules[/\\].+\.(js|jsx)$"],"moduleNameMapper":{"^react-native$":"react-native-web"},"moduleFileExtensions":["web.js","js","json","web.jsx","jsx"],"rootDir":"/Users/owner/works/plz_donation"}'
-    at Error (native)
-husky > pre-commit hook failed (add --no-verify to bypass)
-```
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

指針変更

2017/10/12 05:22

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -24,37 +24,7 @@
-[ユーザー認証参考ブログ](https://qiita.com/suin/items/b7275ff3eb3486380c7e)
-エラー履歴①
----
-ブログサンプルコンパイルエラー
-●解決しました。＠の正体はデコレーター。
-エラー履歴②
----
-reduxわからなすぎるので、
-●reduxを消し、解決しました。
-エラー履歴③
----
-Proptypesがバージョン変更により不能だった。
+現在、ユーザー認証はFirebase経由で行います。
-[ここ](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)より修正。
@@ -64,310 +34,46 @@
 ---
-コンパイルは可能。react-scripts start後のエラー。
-長すぎるのでまず最初。
-```ERROR
-TypeError: Cannot call a class as a function
-_classCallCheck
-http://localhost:3000/static/js/bundle.js:67386:99
-UserOnly
-http://localhost:3000/static/js/bundle.js:67393:5
-(anonymous function)
-node_modules/react-dom/lib/ReactCompositeComponent.js:305
-  302 | // but we'll count this as time spent rendering as the more common case.
-  303 | if (process.env.NODE_ENV !== 'production') {
-  304 |   return measureLifeCyclePerf(function () {
-> 305 |     return Component(publicProps, publicContext, updateQueue);
-  306 |   }, this._debugID, 'render');
-  307 | } else {
-  308 |   return Component(publicProps, publicContext, updateQueue);
-View compiled
-measureLifeCyclePerf
-node_modules/react-dom/lib/ReactCompositeComponent.js:75
-  72 |
-  73 | ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
-  74 | try {
-> 75 |   return fn();
-  76 | } finally {
-  77 |   ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
-  78 | }
-View compiled
-ReactCompositeComponentWrapper._constructComponentWithoutOwner
-node_modules/react-dom/lib/ReactCompositeComponent.js:304
-  301 | // This can still be an instance in case of factory components
-  302 | // but we'll count this as time spent rendering as the more common case.
-  303 | if (process.env.NODE_ENV !== 'production') {
-> 304 |   return measureLifeCyclePerf(function () {
-  305 |     return Component(publicProps, publicContext, updateQueue);
-  306 |   }, this._debugID, 'render');
-  307 | } else {
-View compiled
-ReactCompositeComponentWrapper._constructComponent
-node_modules/react-dom/lib/ReactCompositeComponent.js:279
-  276 | if (process.env.NODE_ENV !== 'production') {
-  277 |   ReactCurrentOwner.current = this;
-  278 |   try {
-> 279 |     return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
-  280 |   } finally {
-  281 |     ReactCurrentOwner.current = null;
-  282 |   }
-View compiled
-ReactCompositeComponentWrapper.mountComponent
-node_modules/react-dom/lib/ReactCompositeComponent.js:187
-  184 |
-  185 | // Initialize the public class
-  186 | var doConstruct = shouldConstruct(Component);
-> 187 | var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
-  188 | var renderedElement;
-  189 |
-  190 | // Support functional components
-View compiled
-Object.mountComponent
-node_modules/react-dom/lib/ReactReconciler.js:45
-  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
-  43 |   }
-  44 | }
-> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
-  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
-  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
-  48 | }
-View compiled
-ReactCompositeComponentWrapper.performInitialMount
-node_modules/react-dom/lib/ReactCompositeComponent.js:370
-  367 | );
-  368 | this._renderedComponent = child;
-  369 |
-> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
-  371 |
-  372 | if (process.env.NODE_ENV !== 'production') {
-  373 |   if (debugID !== 0) {
-View compiled
-ReactCompositeComponentWrapper.mountComponent
-node_modules/react-dom/lib/ReactCompositeComponent.js:257
-  254 | if (inst.unstable_handleError) {
+git commit　がエラーに。。　git add まではできました。
-  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
-  256 | } else {
-> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
-  258 | }
-  259 |
-  260 | if (inst.componentDidMount) {
-View compiled
-Object.mountComponent
-node_modules/react-dom/lib/ReactReconciler.js:45
-  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
-  43 |   }
-  44 | }
-> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
-  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
-  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
-  48 | }
-View compiled
-ReactCompositeComponentWrapper.performInitialMount
-node_modules/react-dom/lib/ReactCompositeComponent.js:370
-  367 | );
-  368 | this._renderedComponent = child;
-  369 |
-> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
-  371 |
-  372 | if (process.env.NODE_ENV !== 'production') {
-  373 |   if (debugID !== 0) {
-View compiled
-ReactCompositeComponentWrapper.mountComponent
-node_modules/react-dom/lib/ReactCompositeComponent.js:257
-  254 | if (inst.unstable_handleError) {
-  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
-  256 | } else {
-> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
-  258 | }
-  259 |
-  260 | if (inst.componentDidMount) {
-View compiled
-Object.mountComponent
-node_modules/react-dom/lib/ReactReconciler.js:45
-  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
-  43 |   }
-  44 | }
-> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
-  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
-  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
-  48 | }
-View compiled
-ReactDOMComponent.mountChildren
-node_modules/react-dom/lib/ReactMultiChild.js:236
-  233 |   if (process.env.NODE_ENV !== 'production') {
-  234 |     selfDebugID = getDebugID(this);
-  235 |   }
-> 236 |   var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
-  237 |   child._mountIndex = index++;
-  238 |   mountImages.push(mountImage);
-  239 | }
-View compiled
-ReactDOMComponent._createInitialChildren
-node_modules/react-dom/lib/ReactDOMComponent.js:703
-  700 |     DOMLazyTree.queueText(lazyTree, contentToUse);
-  701 |   }
-  702 | } else if (childrenToUse != null) {
-> 703 |   var mountImages = this.mountChildren(childrenToUse, transaction, context);
-  704 |   for (var i = 0; i < mountImages.length; i++) {
-  705 |     DOMLazyTree.queueChild(lazyTree, mountImages[i]);
-  706 |   }
+```git commit
+husky > npm run -s precommit (node v6.11.2)
+ ✔ Running tasks for *.js
+Error: ENOENT: no such file or directory, open '/Users/owner/works/plz_donation/{"collectCoverageFrom":["src/**/*.{js,jsx}"],"setupFiles":["/Users/owner/works/plz_donation/node_modules/react-scripts/config/polyfills.js"],"testMatch":["<rootDir>/src/**/__tests__/**/*.js?(x)","<rootDir>/src/**/?(*.)(spec|test).js?(x)"],"testEnvironment":"node","testURL":"http:/localhost","transform":{"^.+\.(js|jsx)$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/babelTransform.js","^.+\.css$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\.(js|jsx|css|json)$)":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\]node_modules[/\\].+\.(js|jsx)$"],"moduleNameMapper":{"^react-native$":"react-native-web"},"moduleFileExtensions":["web.js","js","json","web.jsx","jsx"],"rootDir":"/Users/owner/works/plz_donation"}'
+    at Error (native)
+husky > pre-commit hook failed (add --no-verify to bypass)
+MurakaminoMacBook-Pro:plz_donation owner$ git commit -m "add login view"
+husky > npm run -s precommit (node v6.11.2)
+ ✔ Running tasks for *.js
+Error: ENOENT: no such file or directory, open '/Users/owner/works/plz_donation/{"collectCoverageFrom":["src/**/*.{js,jsx}"],"setupFiles":["/Users/owner/works/plz_donation/node_modules/react-scripts/config/polyfills.js"],"testMatch":["<rootDir>/src/**/__tests__/**/*.js?(x)","<rootDir>/src/**/?(*.)(spec|test).js?(x)"],"testEnvironment":"node","testURL":"http:/localhost","transform":{"^.+\.(js|jsx)$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/babelTransform.js","^.+\.css$":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/cssTransform.js","^(?!.*\.(js|jsx|css|json)$)":"/Users/owner/works/plz_donation/node_modules/react-scripts/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\]node_modules[/\\].+\.(js|jsx)$"],"moduleNameMapper":{"^react-native$":"react-native-web"},"moduleFileExtensions":["web.js","js","json","web.jsx","jsx"],"rootDir":"/Users/owner/works/plz_donation"}'
+    at Error (native)
+husky > pre-commit hook failed (add --no-verify to bypass)
 ```
-redux騒動でバージョンが変わったせいでしょうか。たくさんエラーです。
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

誤字修正

2017/10/12 02:31

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -64,7 +64,7 @@
 ---
-コンパイルは可能。reactランチャー上でのエラー。
+コンパイルは可能。react-scripts start後のエラー。
 長すぎるのでまず最初。

ランチャー修正

2017/10/11 02:38

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,7 +20,7 @@
-テストサーバーはreactのランチャー
+テストサーバーはreact-scripts startにて。

ネクストエラー

2017/10/11 02:36

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,25 +4,15 @@
 - 搭載したい機能リスト
-・ユーザー認証
+進行中→ ●ユーザー認証
-ーー（ページごとにユーザーのみ、ゲストのみと分けたい。）
+　　　　ーー（ページごとにユーザーのみ、ゲストのみと分けたい。）
-・ゲスト、ユーザーが見れるプラットホーム。
+　　　　・ゲスト、ユーザーが見れるプラットホーム。
-ーー（ユーザーが投稿した内容が時系列で表示）
+　　　　ーー（ユーザーが投稿した内容が時系列で表示）
-・ユーザー課金、ゲスト課金とかも導入したい。
+　　　　・ユーザー課金、ゲスト課金とかも導入したい。
-この辺りの機能の名前がわからなくて、調べられなかったり、jsx記述のブログばかりで、思ったように解決できずに困っています。
@@ -30,107 +20,353 @@
 テストサーバーはreactのランチャー
+[ユーザー認証参考ブログ](https://qiita.com/suin/items/b7275ff3eb3486380c7e)
 エラー履歴①
 ---
-[このブログ](https://qiita.com/suin/items/b7275ff3eb3486380c7e)の内容を試しましたが、そもそもjs上だけで動くものを作りたいのに加えて、jsxはreactのランチャーから行くと、たくさんのエラーを吐きました。
-```ERRORCODE
-Failed to compile
-./src/components/UserOnly.jsx
-Syntax error: Unexpected token (5:0)
-  3 | import { connect } from "redux/react";
-  4 |
-> 5 | @connect(state => ({
-    | ^
-  6 |   session: state.session
-  7 | }))
-  8 | export default class UserOnly {
+ブログサンプルコンパイルエラー
+●解決しました。＠の正体はデコレーター。
+エラー履歴②
+---
+reduxわからなすぎるので、
+●reduxを消し、解決しました。
+エラー履歴③
+---
+Proptypesがバージョン変更により不能だった。
+[ここ](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes)より修正。
+目下エラー
+---
+コンパイルは可能。reactランチャー上でのエラー。
+長すぎるのでまず最初。
+```ERROR
+TypeError: Cannot call a class as a function
+_classCallCheck
+http://localhost:3000/static/js/bundle.js:67386:99
+UserOnly
+http://localhost:3000/static/js/bundle.js:67393:5
+(anonymous function)
+node_modules/react-dom/lib/ReactCompositeComponent.js:305
+  302 | // but we'll count this as time spent rendering as the more common case.
+  303 | if (process.env.NODE_ENV !== 'production') {
+  304 |   return measureLifeCyclePerf(function () {
+> 305 |     return Component(publicProps, publicContext, updateQueue);
+  306 |   }, this._debugID, 'render');
+  307 | } else {
+  308 |   return Component(publicProps, publicContext, updateQueue);
+View compiled
+measureLifeCyclePerf
+node_modules/react-dom/lib/ReactCompositeComponent.js:75
+  72 |
+  73 | ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
+  74 | try {
+> 75 |   return fn();
+  76 | } finally {
+  77 |   ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
+  78 | }
+View compiled
+ReactCompositeComponentWrapper._constructComponentWithoutOwner
+node_modules/react-dom/lib/ReactCompositeComponent.js:304
+  301 | // This can still be an instance in case of factory components
+  302 | // but we'll count this as time spent rendering as the more common case.
+  303 | if (process.env.NODE_ENV !== 'production') {
+> 304 |   return measureLifeCyclePerf(function () {
+  305 |     return Component(publicProps, publicContext, updateQueue);
+  306 |   }, this._debugID, 'render');
+  307 | } else {
+View compiled
+ReactCompositeComponentWrapper._constructComponent
+node_modules/react-dom/lib/ReactCompositeComponent.js:279
+  276 | if (process.env.NODE_ENV !== 'production') {
+  277 |   ReactCurrentOwner.current = this;
+  278 |   try {
+> 279 |     return this._constructComponentWithoutOwner(doConstruct, publicProps, publicContext, updateQueue);
+  280 |   } finally {
+  281 |     ReactCurrentOwner.current = null;
+  282 |   }
+View compiled
+ReactCompositeComponentWrapper.mountComponent
+node_modules/react-dom/lib/ReactCompositeComponent.js:187
+  184 |
+  185 | // Initialize the public class
+  186 | var doConstruct = shouldConstruct(Component);
+> 187 | var inst = this._constructComponent(doConstruct, publicProps, publicContext, updateQueue);
+  188 | var renderedElement;
+  189 |
+  190 | // Support functional components
+View compiled
+Object.mountComponent
+node_modules/react-dom/lib/ReactReconciler.js:45
+  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
+  43 |   }
+  44 | }
+> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
+  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
+  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+  48 | }
+View compiled
+ReactCompositeComponentWrapper.performInitialMount
+node_modules/react-dom/lib/ReactCompositeComponent.js:370
+  367 | );
+  368 | this._renderedComponent = child;
+  369 |
+> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
+  371 |
+  372 | if (process.env.NODE_ENV !== 'production') {
+  373 |   if (debugID !== 0) {
+View compiled
+ReactCompositeComponentWrapper.mountComponent
+node_modules/react-dom/lib/ReactCompositeComponent.js:257
+  254 | if (inst.unstable_handleError) {
+  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
+  256 | } else {
+> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
+  258 | }
+  259 |
+  260 | if (inst.componentDidMount) {
+View compiled
+Object.mountComponent
+node_modules/react-dom/lib/ReactReconciler.js:45
+  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
+  43 |   }
+  44 | }
+> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
+  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
+  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+  48 | }
+View compiled
+ReactCompositeComponentWrapper.performInitialMount
+node_modules/react-dom/lib/ReactCompositeComponent.js:370
+  367 | );
+  368 | this._renderedComponent = child;
+  369 |
+> 370 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
+  371 |
+  372 | if (process.env.NODE_ENV !== 'production') {
+  373 |   if (debugID !== 0) {
+View compiled
+ReactCompositeComponentWrapper.mountComponent
+node_modules/react-dom/lib/ReactCompositeComponent.js:257
+  254 | if (inst.unstable_handleError) {
+  255 |   markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
+  256 | } else {
+> 257 |   markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
+  258 | }
+  259 |
+  260 | if (inst.componentDidMount) {
+View compiled
+Object.mountComponent
+node_modules/react-dom/lib/ReactReconciler.js:45
+  42 |     ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
+  43 |   }
+  44 | }
+> 45 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
+  46 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
+  47 |   transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
+  48 | }
+View compiled
+ReactDOMComponent.mountChildren
+node_modules/react-dom/lib/ReactMultiChild.js:236
+  233 |   if (process.env.NODE_ENV !== 'production') {
+  234 |     selfDebugID = getDebugID(this);
+  235 |   }
+> 236 |   var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
+  237 |   child._mountIndex = index++;
+  238 |   mountImages.push(mountImage);
+  239 | }
+View compiled
+ReactDOMComponent._createInitialChildren
+node_modules/react-dom/lib/ReactDOMComponent.js:703
+  700 |     DOMLazyTree.queueText(lazyTree, contentToUse);
+  701 |   }
+  702 | } else if (childrenToUse != null) {
+> 703 |   var mountImages = this.mountChildren(childrenToUse, transaction, context);
+  704 |   for (var i = 0; i < mountImages.length; i++) {
+  705 |     DOMLazyTree.queueChild(lazyTree, mountImages[i]);
+  706 |   }
 ```
-jsxの勉強不足で全くなんのエラーかわかりません。エラー文のコピペでは解決しませんでした。
-●解決しました。
-デコレーターを導入する設定を検討中。
-エラー履歴②
----
-ブログサンプルを用いて、作業を進めて見ました。
-ブログにあったサンプルは、reduxも使用しているので、reduxとreact-reduxをnode-moduleに追加しました。
-UserOnly.jsxなど、追加したファイルがエラーでした。
+redux騒動でバージョンが変わったせいでしょうか。たくさんエラーです。
-import文のfrom react/redux　はreact-reduxだと思って修正しましたが、致命的にたくさんのエラーを吐きギブアップ状態です。。エラーのうちの1例としては、怒られてなかったindex.jsの ```jsx
-ReactDOM.render(<App />, document.getElementById('root'))
-```まで怒られる始末です。
-●reduxを消し、解決します。
-目下エラー
----
-```jsx
-./src/components/GuestOnly.jsx
-  Line 5:  React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead  react/no-deprecated
-```
-UserOnlyもこの症状。

新たなエラー

2017/10/11 02:35

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -120,15 +120,17 @@
 ---
+```jsx
+./src/components/GuestOnly.jsx
-ブログサンプルより、UserOnly.jsxのconnectがreduxコンポーネントなので、JSかreactでの代用品作り。
+  Line 5:  React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead  react/no-deprecated
+```
-※初心者のため、これのコーディングに時間がかかります。
+UserOnlyもこの症状。

次の課題。redux削除

2017/10/10 16:05

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,6 @@
 javascriptとreact、material-uiを用いて、アプリ作成しています。
+---
 - 搭載したい機能リスト
@@ -30,11 +32,21 @@
+テストサーバーはreactのランチャー
+エラー履歴①
+---
 [このブログ](https://qiita.com/suin/items/b7275ff3eb3486380c7e)の内容を試しましたが、そもそもjs上だけで動くものを作りたいのに加えて、jsxはreactのランチャーから行くと、たくさんのエラーを吐きました。
@@ -64,21 +76,19 @@
 ```
-__jsxの勉強不足で全くなんのエラーかわかりません。
+jsxの勉強不足で全くなんのエラーかわかりません。エラー文のコピペでは解決しませんでした。
-エラー文のコピペでは解決しませんでした。__
-＠を削除して一旦解決。
-テストサーバーはReactランチャーのチュートリアルそのままを使用。
+●解決しました。
-構文直す系のツールはよくわからないで使っています。
+デコレーターを導入する設定を検討中。
+エラー履歴②
+---
@@ -98,7 +108,27 @@
-糸口でも大歓迎なので、
+●reduxを消し、解決します。
+目下エラー
+---
+ブログサンプルより、UserOnly.jsxのconnectがreduxコンポーネントなので、JSかreactでの代用品作り。
+※初心者のため、これのコーディングに時間がかかります。

アドバイスをもとに修正。次の段階に行きましたが、エラー。

2017/10/10 15:36

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -66,9 +66,11 @@
-jsxの勉強不足で全くなんのエラーかわかりません。
+__jsxの勉強不足で全くなんのエラーかわかりません。
-エラー文のコピペでは解決しませんでした。
+エラー文のコピペでは解決しませんでした。__
+＠を削除して一旦解決。
@@ -78,4 +80,26 @@
+ブログサンプルを用いて、作業を進めて見ました。
+ブログにあったサンプルは、reduxも使用しているので、reduxとreact-reduxをnode-moduleに追加しました。
+UserOnly.jsxなど、追加したファイルがエラーでした。
+import文のfrom react/redux　はreact-reduxだと思って修正しましたが、致命的にたくさんのエラーを吐きギブアップ状態です。。エラーのうちの1例としては、怒られてなかったindex.jsの ```jsx
+ReactDOM.render(<App />, document.getElementById('root'))
+```まで怒られる始末です。
+糸口でも大歓迎なので、
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

jsx構文の導入を解決方針に。　jsx上でコンパイル不能のエラー。

2017/10/10 15:20

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -38,6 +38,44 @@
+```ERRORCODE
+Failed to compile
+./src/components/UserOnly.jsx
+Syntax error: Unexpected token (5:0)
+  3 | import { connect } from "redux/react";
+  4 |
+> 5 | @connect(state => ({
+    | ^
+  6 |   session: state.session
+  7 | }))
+  8 | export default class UserOnly {
+```
+jsxの勉強不足で全くなんのエラーかわかりません。
+エラー文のコピペでは解決しませんでした。
+テストサーバーはReactランチャーのチュートリアルそのままを使用。
+構文直す系のツールはよくわからないで使っています。
 解決できるかたからのメッセージまたはGitへの直接の書き込み待ってます。

初心者マーク

2017/10/10 14:45

投稿

MOTOMUR

スコア195

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes