react-movies-router-firebase-app

dushky · Mar 7, 2023 · a56d051 · a56d051
1 parent aa7d632
commit a56d051
Show file tree

Hide file tree

Showing 26 changed files with 954 additions and 107 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+src/firebase/config.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="sk">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,24 @@
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import Home from "./pages/Home"
+import AllMovies from "./pages/AllMovies"
+import Movie from "./pages/Movie"
+import Form from "./pages/Form"
+import SharedLayout from "./pages/SharedLayout"
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<SharedLayout/>}>
+
+          <Route index element={<Home/>}/>
+          <Route path="/all-movies" element={<AllMovies/>}/>
+          <Route path="/one-movie/:movieId" element={<Movie/>}/>
+          <Route path="/form" element={<Form/>}/>
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
 }
 
-export default App;
+export default App
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -0,0 +1,3 @@
+footer {
+    text-align: center;
+}
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,11 @@
+import "./Footer.css"
+
+const Footer = () => {
+  return (
+    <footer>
+      <p>pätička</p>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -0,0 +1,23 @@
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+}
+
+nav {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+nav a {
+    margin-right: 10px;
+    display: inline-block;
+    text-decoration: none;
+    color: #e5e5e5;
+    font-size: 20px;
+}
+
+.active {
+    text-decoration: underline;
+}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,16 @@
+import "./Navbar.css"
+import { NavLink } from "react-router-dom"
+
+const Navbar = () => {
+  return (
+        <header>
+            <nav>
+                <NavLink to="/">Domov</NavLink>
+                <NavLink to="/all-movies">Filmy</NavLink>
+                <NavLink to="/form">Pridanie filmu</NavLink>
+            </nav>
+        </header>
+    )
+}
+
+export default Navbar
diff --git a/src/firebase/config_example.js b/src/firebase/config_example.js
@@ -0,0 +1,20 @@
+
+import firebase from "firebase/app"
+import "firebase/firestore"
+
+const firebaseConfig = {
+    apiKey: "",
+    authDomain: "",
+    projectId: "",
+    storageBucket: "",
+    messagingSenderId: "",
+    appId: ""
+  };
+
+  // počiatočné nastavenie firebase (init)
+  firebase.initializeApp(firebaseConfig)
+
+  // počiatočné nastavenie služieb (services)
+  const projectFirestore = firebase.firestore()
+
+  export { projectFirestore }
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,6 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+    margin: 0;
+    padding: 0;
+    background-color: #141414;
+    color: #e5e5e5;
+}
diff --git a/src/index.js b/src/index.js
@@ -2,16 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/AllMovies.css b/src/pages/AllMovies.css
@@ -0,0 +1,30 @@
+.one-movie {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border: 2px solid #e50914;
+    justify-content: space-between;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 10px 10px;
+    width: 500px;
+    margin: 0 auto;
+}
+
+.one-movie p {
+    width: 200px;
+}
+
+.one-movie a {
+    text-decoration: none;
+    color: #b92930;
+}
+
+.one-movie button {
+    font-size: 14px;
+    background-color: #e50914;
+    border: none;
+    color: #e5e5e5;
+    padding: 5px 10px;
+    cursor: pointer;
+}
diff --git a/src/pages/AllMovies.js b/src/pages/AllMovies.js
@@ -0,0 +1,51 @@
+import "./AllMovies.css"
+import { projectFirestore } from "../firebase/config"
+import { useState, useEffect } from "react"
+import { Link } from "react-router-dom"
+
+const AllMovies = () => {
+  const [data, setData] = useState([])
+  const [error, setError] = useState("")
+
+  useEffect(()=>{
+    const unsubscribe = projectFirestore.collection("movies").onSnapshot(( snapshot )=>{
+
+      if (snapshot.empty){
+        setError("Žiadne filmy k vypísaniu")
+      }else{
+        let result = []
+        snapshot.docs.forEach((movie)=>{
+          result.push( {id: movie.id, ...movie.data()} )
+        })
+        setData(result)
+      }
+
+    }, (err)=>{setError(err.message)})
+
+    return () => unsubscribe()
+
+  },[])
+
+  const deleteMovie = (id) => {
+    projectFirestore.collection("movies").doc(id).delete()
+  }
+
+  return (
+    <section>
+      {error && <p>{error}</p>}
+      {data.map((movie)=>{
+        const {id, title} = movie
+
+        return (
+          <div key={id} className="one-movie">
+            <p>{title}</p>
+            <Link to={`/one-movie/${id}`}>Viac informácií</Link>
+            <button onClick={()=>deleteMovie(id)}>zmazať</button>
+          </div>
+        )
+      })}
+    </section>
+  )
+}
+
+export default AllMovies
diff --git a/src/pages/Form.css b/src/pages/Form.css
@@ -0,0 +1,31 @@
+.form-section {
+    text-align: center;
+}
+
+.form-section form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.input {
+    border: 2px solid #e50914;
+    background-color: #141414;
+    margin-bottom: 5px;
+    outline: none;
+    color: #e5e5e5;
+    font-size: 16px;
+}
+
+.input::placeholder {
+    color: #bbbbbb;
+}
+
+.form-section input[type="submit"] {
+    background-color: #e50914;
+    color: #e5e5e5;
+    padding: 5px 10px;
+    cursor: pointer;
+    border: none;
+    margin-top: 15px;
+}