Matthew's database

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -3,8 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^5.3.2",
+    "firebase": "^10.7.1",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.9.1",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

src/App.css → src/components/App.css

@@ -3,7 +3,7 @@
 }
 
 .App-logo {
-  height: 40vmin;
+  height: 5vmin;
   pointer-events: none;
 }
 

src/components/App.js

@@ -0,0 +1,66 @@
+import { onAuthStateChanged } from "firebase/auth";
+import React from "react";
+import "./App.css";
+import AuthForm from "./AuthForm";
+import Composer from "./Composer";
+import NewsFeed from "./NewsFeed";
+import { auth } from "../firebase";
+import logo from "../logo.png";
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loggedInUser: null,
+      shouldRenderAuthForm: false,
+    };
+  }
+
+  componentDidMount() {
+    onAuthStateChanged(auth, (user) => {
+      // If user is logged in, save logged-in user to state
+      if (user) {
+        this.setState({ loggedInUser: user });
+        return;
+      }
+      // Else set logged-in user in state to null
+      this.setState({ loggedInUser: null });
+    });
+  }
+
+  toggleAuthForm = () => {
+    this.setState((state) => ({
+      shouldRenderAuthForm: !state.shouldRenderAuthForm,
+    }));
+  };
+
+  render() {
+    const authForm = <AuthForm toggleAuthForm={this.toggleAuthForm} />;
+    const composer = <Composer loggedInUser={this.state.loggedInUser} />;
+    const createAccountOrSignInButton = (
+      <div>
+        <button onClick={this.toggleAuthForm}>Create Account Or Sign In</button>
+        <br />
+      </div>
+    );
+    const composerAndNewsFeed = (
+      <div>
+        {/* Render composer if user logged in, else render auth button */}
+        {this.state.loggedInUser ? composer : createAccountOrSignInButton}
+        <br />
+        <NewsFeed />
+      </div>
+    );
+    return (
+      <div className="App">
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <br />
+          {this.state.shouldRenderAuthForm ? authForm : composerAndNewsFeed}
+        </header>
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/AuthForm.js

@@ -0,0 +1,126 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+} from "firebase/auth";
+import { auth } from "../firebase";
+
+class AuthForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      emailInputValue: "",
+      passwordInputValue: "",
+      isNewUser: true,
+      errorCode: "",
+      errorMessage: "",
+    };
+  }
+
+  // Use a single method to control email and password form inputs
+  handleInputChange = (event) => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+
+    const closeAuthForm = () => {
+      // Reset auth form state
+      this.setState({
+        emailInputValue: "",
+        passwordInputValue: "",
+        isNewUser: true,
+        errorCode: "",
+        errorMessage: "",
+      });
+      // Toggle auth form off after authentication
+      this.props.toggleAuthForm();
+    };
+
+    const setErrorState = (error) => {
+      this.setState({
+        errorCode: error.code,
+        errorMessage: error.message,
+      });
+    };
+
+    // Authenticate user on submit
+    if (this.state.isNewUser) {
+      createUserWithEmailAndPassword(
+        auth,
+        this.state.emailInputValue,
+        this.state.passwordInputValue
+      )
+        .then(closeAuthForm)
+        .catch(setErrorState);
+    } else {
+      signInWithEmailAndPassword(
+        auth,
+        this.state.emailInputValue,
+        this.state.passwordInputValue
+      )
+        .then(closeAuthForm)
+        .catch(setErrorState);
+    }
+  };
+
+  toggleNewOrReturningAuth = () => {
+    this.setState((state) => ({ isNewUser: !state.isNewUser }));
+  };
+
+  render() {
+    return (
+      <div>
+        <p>
+          {this.state.errorCode ? `Error code: ${this.state.errorCode}` : null}
+        </p>
+        <p>
+          {this.state.errorMessage
+            ? `Error message: ${this.state.errorMessage}`
+            : null}
+        </p>
+        <p>Sign in with this form to post.</p>
+        <form onSubmit={this.handleSubmit}>
+          <label>
+            <span>Email: </span>
+            <input
+              type="email"
+              name="emailInputValue"
+              value={this.state.emailInputValue}
+              onChange={this.handleInputChange}
+            />
+          </label>
+          <br />
+          <label>
+            <span>Password: </span>
+            <input
+              type="password"
+              name="passwordInputValue"
+              value={this.state.passwordInputValue}
+              onChange={this.handleInputChange}
+            />
+          </label>
+          <br />
+          <input
+            type="submit"
+            value={this.state.isNewUser ? "Create Account" : "Sign In"}
+            // Disable form submission if email or password are empty
+            disabled={
+              !this.state.emailInputValue || !this.state.passwordInputValue
+            }
+          />
+          <br />
+          <Button variant="link" onClick={this.toggleNewOrReturningAuth}>
+            {this.state.isNewUser
+              ? "If you have an account, click here to login"
+              : "If you are a new user, click here to create account"}
+          </Button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default AuthForm;

src/components/Composer.js

@@ -0,0 +1,92 @@
+import { push, ref as databaseRef, set } from "firebase/database";
+import {
+  getDownloadURL,
+  ref as storageRef,
+  uploadBytes,
+} from "firebase/storage";
+import React from "react";
+import { database, storage } from "../firebase";
+
+// Save Firebase folder names as constants to avoid bugs due to misspelling
+const IMAGES_FOLDER_NAME = "images";
+const POSTS_FOLDER_NAME = "posts";
+
+class Composer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileInputFile: null,
+      fileInputValue: "",
+      textInputValue: "",
+    };
+  }
+
+  handleFileInputChange = (event) => {
+    this.setState({
+      fileInputFile: event.target.files[0],
+      fileInputValue: event.target.value,
+    });
+  };
+
+  handleTextInputChange = (event) => {
+    this.setState({ textInputValue: event.target.value });
+  };
+
+  // Note use of array fields syntax to avoid having to manually bind this method to the class
+  handleSubmit = (event) => {
+    // Prevent default form submit behaviour that will reload the page
+    event.preventDefault();
+
+    // Store images in an images folder in Firebase Storage
+    const fileRef = storageRef(
+      storage,
+      `${IMAGES_FOLDER_NAME}/${this.state.fileInputFile.name}`
+    );
+
+    // Upload file, save file download URL in database with post text
+    uploadBytes(fileRef, this.state.fileInputFile).then(() => {
+      getDownloadURL(fileRef).then((downloadUrl) => {
+        const postListRef = databaseRef(database, POSTS_FOLDER_NAME);
+        const newPostRef = push(postListRef);
+        set(newPostRef, {
+          imageLink: downloadUrl,
+          text: this.state.textInputValue,
+          authorEmail: this.props.loggedInUser.email,
+        });
+        // Reset input field after submit
+        this.setState({
+          fileInputFile: null,
+          fileInputValue: "",
+          textInputValue: "",
+        });
+      });
+    });
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <p>{this.props.loggedInUser ? this.props.loggedInUser.email : null}</p>
+        <input
+          type="file"
+          value={this.state.fileInputValue}
+          onChange={this.handleFileInputChange}
+        />
+        <br />
+        <input
+          type="text"
+          value={this.state.textInputValue}
+          onChange={this.handleTextInputChange}
+        />
+        <input
+          type="submit"
+          value="Post"
+          // Disable Send button when text input is empty
+          disabled={!this.state.textInputValue}
+        />
+      </form>
+    );
+  }
+}
+
+export default Composer;

src/components/FilterInputModal.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button";
+
+const FilterInputModal = (props) => {
+  const typeDisplay = {
+    stockCode: "stock code",
+    stockName: "stock name",
+    platform: "platform",
+  };
+  const [filterField, setFilterField] = useState("");
+  const handleChange = (e) => {
+    setFilterField(e.target.value);
+  };
+
+  const closeHandler = () => {
+    setFilterField("");
+    props.close();
+  };
+
+  const filterSetHandler = () => {
+    props.setFilter(filterField);
+    setFilterField("");
+    props.close();
+    return true;
+  };
+  return (
+    <Modal show={props.show} onHide={props.close}>
+      <Modal.Header closeButton>
+        <Modal.Title>Filter by: {typeDisplay[props.filterCat]}</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <input
+          type="text"
+          value={filterField}
+          onChange={(e) => handleChange(e)}
+        ></input>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={closeHandler}>
+          Close
+        </Button>
+        <Button variant="primary" onClick={filterSetHandler}>
+          Filter
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default FilterInputModal;