[WIL 5週目]航海99ミニTOYプロジェクト偽STAGRAMとREACT

今回の航行の995週目は、より深化した反応概念で個人ミニプロジェクターを制作した.

プロジェクトの説明

プロジェクト期間:2021年07月05日から2012-07-08
プロジェクト名:画像コミュニティ(偽スター)
使用スキル:反応、火の基礎
IDE:VSコードの使用
プロジェクトの説明:ユーザーは画像とコメントの文章をアップロードして他のユーザーと共有します.
機能:会員登録と登録、投稿のアップロードと変更(画像を含む)、投稿のアップロード時に3種類の露出レイアウトを設定

プロジェクト成果物

会員登録と登録

const signupFB = (id, pwd, userName) => {
  return function (dispatch, getState, { history }) {
    auth
      .createUserWithEmailAndPassword(id, pwd)
      .then((user) => {
        auth.currentUser
          .updateProfile({
            displayName: userName,
          })
          .then(() => {
            dispatch(
              setUser({ user_name: userName, id: id, user_profile: "" })
            );
            history.push("/");
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode, errorMessage);
      });
  };
};

登録会員ID、パスワード、ニックネームを入力すると、userInfoというステータス値を入力し、登録会員ボタンをクリックしてFirebaseにEメールで格納されている会員リポジトリ

に追加する.

const loginFB = (id, pwd) => {
  return function (dispatch, getState, { history }) {
    auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res) => {
      auth
        .signInWithEmailAndPassword(id, pwd)
        .then((user) => {
          console.log(user);

          dispatch(
            setUser({
              user_name: user.user.displayName,
              id: id,
              user_profile: "",
              uid: user.user.uid,
            })
          );

          history.push("/");
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;
          console.log("error : ", error);
          if (error.code === "auth/invalid-email") {
            alert("아이디를 이메일 형식으로 입력해주세요");
          } else if (error.code === "auth/user-not-found") {
            alert("존재하는 아이디가 없습니다.");
          } else if (error.code === "auth/wrong-password") {
            alert("비밀번호가 일치하지 않습니다.");
          }
          console.log(errorCode, errorMessage);
        });
    });
  };
};

ログイン時にfirebaseログインリポジトリにアイデンティティとパスワードのパラメータを渡し、一致する場合はredusリポジトリにユーザー情報を保存し、ホームページに移動します

一致する情報がない場合は、エラーコードでalertを出力します.

パブリケーションの作成、変更、出力

出版物合成ビュー

投稿の作成前

投稿の作成後

 const selectFile = (e) => {
    const reader = new FileReader();
    const file = e.target.files[0];

    reader.readAsDataURL(file);
    setUploadFile(true);

    reader.onloadend = () => {
      dispatch(imageActions.setPreview(reader.result));
      setUploadedFile(file);
    };
    setHideUploadBtn(true);
  };

ファイルに画像をアップロードすると、読み込んだファイルの結果値がpreviewとして保存され、

にプレビューとして発行する.

		<FormControl component="fieldset" style={{ marginTop: "30px" }}>
          <FormLabel component="legend">레이아웃 (택1)</FormLabel>
          <RadioGroup
            aria-label="layout"
            name="layout"
            value={radioValue}
            onChange={handleChange}
          >
            <FormControlLabel
              value="post1"
              control={<Radio selected />}
              label="텍스트 상단 이미지 하단형"
            />
            <FormControlLabel
              value="post2"
              control={<Radio />}
              label="텍스트 오른편 이미지 왼편형"
            />
            <FormControlLabel
              value="post3"
              control={<Radio />}
              label="텍스트 왼편 이미지 오른편형"
            />
          </RadioGroup>
        </FormControl>

function uploadImageFB(image) {
  return function (dispatch, getState, { history }) {
    dispatch(uploading(true));

    console.log(`images/${new Date().getTime()}_${image.name}`);
    const _upload = storage.ref(`images/${image.name}`).put(image);

    //   업로드!
    _upload
      .then((snapshot) => {
        console.log(snapshot);

        snapshot.ref.getDownloadURL().then((url) => {
          console.log(url);
          dispatch(uploadImage(url));
        });
      })
      .catch((err) => {
        dispatch(uploading(false));
      });
  };
}

2.画像をアップロードするときにFirebaseの画像リポジトリに保存し、画像urlを抽出する

<Grid style={{ margin: "30px 0" }}>
          <Typography variant="h4" style={{ fontWeight: 500 }}>
            미리보기
          </Typography>
          {(function () {
            if (radioValue === "post1") {
              return (
                <Post1Box
                  contents={textContent}
                  image_url={
                    preview ? preview : "http://via.placeholder.com/400x300"
                  }
                ></Post1Box>
              );
            } else if (radioValue === "post2") {
              return (
                <Post2Box
                  contents={textContent}
                  image_url={
                    preview ? preview : "http://via.placeholder.com/400x300"
                  }
                ></Post2Box>
              );
            } else if (radioValue === "post3") {
              return (
                <Post3Box
                  contents={textContent}
                  image_url={
                    preview ? preview : "http://via.placeholder.com/400x300"
                  }
                ></Post3Box>
              );
            }
          })()}
        </Grid>

露光

を条件に合うレイアウト形式でプレビューする3種類のレイアウト値を設定する.

const addPostFB = (contents = "", type = "post1") => {
  return function (dispatch, getState, { history }) {
    const postDB = firestore.collection("post");
    const _user = getState().user.user;
    const _image = getState().image.preview;

    const user_info = {
      user_name: _user.user_name,
      user_id: _user.uid,
      user_profile: _user.user_profile,
    };

    const _upload = storage
      .ref(`images/${user_info.user_id}_${new Date().getTime()}`)
      .putString(_image, "data_url");

    const _post = {
      ...initialPost,
      contents: contents,
      type: type,
      insert_dt: moment().format("YYYY-MM-DD hh:mm:ss"),
    };

    _upload
      .then((snapshot) => {
        snapshot.ref
          .getDownloadURL()
          .then((url) => {
            console.log(url);
            dispatch(imageActions.uploadImage(url));
            return url;
          })
          .then((url) => {
            console.log(url);
            postDB
              .add({ ...user_info, ..._post, image_url: url })
              .then((doc) => {
                let post = {
                  user_info,
                  ..._post,
                  id: doc.id,
                  image_url: url,
                };
                dispatch(addPost(post));
                dispatch(imageActions.deletePreview());
                history.replace("/");
              })
              .catch((err) => {
                window.alert("앗! 포스트 작성에 문제가 있어요!");
                console.log("post 작성 실패!", err);
              });
          });
      })
      .catch((err) => {
        window.alert("앗! 이미지 업로드에 문제가 있어요!");
        console.log(err);
      });
  };
};

「

投稿の作成」ボタンをクリックすると、Firebaseに登録するpostセットに画像URLを含む必要な情報データ

が挿入される.

const getPostFB = (start = null, size = 3) => {
  return function (dispatch, getState, { history }) {
    let _paging = getState().post.paging;

    if (_paging.start && !_paging.next) {
      return;
    }
    const postDB = firestore.collection("post");

    let query = postDB.orderBy("insert_dt", "desc");
    if (start) {
      query = query.startAt(start);
    }

    query
      .limit(size + 1)
      .get()
      .then((docs) => {
        console.log("docs : ", docs.docs);
        let post_list = [];

        docs.forEach((doc) => {
          let _post = doc.data();

          let post = Object.keys(_post).reduce(
            (acc, cur) => {
              if (cur.indexOf("user_") !== -1) {
                return {
                  ...acc,
                  user_info: { ...acc.user_info, [cur]: _post[cur] },
                };
              }
              return { ...acc, [cur]: _post[cur] };
            },
            { id: doc.id, user_info: {} }
          );

          post_list.push(post);
        });

        // 마지막 하나는 빼줍니다.
        // 그래야 size대로 리스트가 추가되니까요!
        // 마지막 데이터는 다음 페이지의 유무를 알려주기 위한 친구일 뿐! 리스트에 들어가지 않아요!
        post_list.pop();

        dispatch(setPost(post_list));
      });
  };
};

投稿の作成後、Firebaseコレクション内のドキュメントの情報を取得し、ホームページ

に公開します.

const editPostFB = (post_id = null, post = {}) => {
  return function (dispatch, getState, { history }) {
    if (!post_id) {
      console.log("게시물 정보가 없어요!");
      return;
    }
    const _image = getState().image.preview;
    const _post_idx = getState().post.list.findIndex((p) => p.id === post_id);
    const _post = getState().post.list[_post_idx];

    const postDB = firestore.collection("post");

    if (_image === _post.image_url) {
      postDB
        .doc(post_id)
        .update(post)
        .then((doc) => {
          dispatch(editPost(post_id, { ...post }));
          history.replace("/");
        });

      return;
    } else {
      const user_id = getState().user.user.uid;
      const _upload = storage
        .ref(`images/${user_id}_${new Date().getTime()}`)
        .putString(_image, "data_url");

      _upload.then((snapshot) => {
        snapshot.ref
          .getDownloadURL()
          .then((url) => {
            console.log(url);

            return url;
          })
          .then((url) => {
            postDB
              .doc(post_id)
              .update({ ...post, image_url: url })
              .then((doc) => {
                dispatch(editPost(post_id, { ...post, image_url: url }));
                dispatch(imageActions.deletePreview());

                history.replace("/");
              });
          })
          .catch((err) => {
            window.alert("앗! 이미지 업로드에 문제가 있어요!");
            console.log("앗! 이미지 업로드에 문제가 있어요!", err);
          });
      });
    }
  };
};

投稿の変更ボタンをクリックすると、投稿の変更ページに移動し、写真、レイアウトタイプ、コンテンツなどの必要な情報を変更し、変更ボタンをクリックすると変更を変数と見なし、ドキュメントid値の文字値

を変更します.

に感銘を与える

先週学習した反応基本概念では,より深い反応概念を用い,登録と会員加入,登録と投稿修正など多様な機能を用いてプロジェクトを行った.
まだまだ熟練していませんが、開発されているのが面白いようです.開発は最初は分かりにくいですが、プロジェクトを進める過程で、いろいろ考えて、応用すると、急に理解してチャンスをつかむことができます.このような過程はとても喜んでいるようで、とても面白いです.
99を航行する過程で複数のプロジェクトを創造し、実務的な感覚を育成してくれたことに改めて感謝します.
私はこの機会を利用して私の反応の特長感を最大値に引き上げるべきだと思います.
github url
- https://github.com/zlzlzlmo/image_community