Gear 5

.replit

@@ -0,0 +1,80 @@
+
+hidden = [".config", "package-lock.json"]
+run = "npm run start"
+
+[[hints]]
+regex = "Error \\[ERR_REQUIRE_ESM\\]"
+message = "We see that you are using require(...) inside your code. We currently do not support this syntax. Please use 'import' instead when using external modules. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)"
+
+[nix]
+channel = "stable-22_11"
+
+[env]
+XDG_CONFIG_HOME = "$REPL_HOME/.config"
+PATH = "$REPL_HOME/.config/npm/node_global/bin:$REPL_HOME/node_modules/.bin"
+npm_config_prefix = "$REPL_HOME/.config/npm/node_global"
+
+[gitHubImport]
+requiredFiles = [".replit", "replit.nix", ".config", "package.json", "package-lock.json"]
+
+[packager]
+language = "nodejs"
+
+  [packager.features]
+  packageSearch = true
+  guessImports = true
+  enabledForHosting = false
+
+[unitTest]
+language = "nodejs"
+
+[debugger]
+support = true
+
+  [debugger.interactive]
+  transport = "localhost:0"
+  startCommand = [ "dap-node" ]
+
+    [debugger.interactive.initializeMessage]
+    command = "initialize"
+    type = "request"
+
+      [debugger.interactive.initializeMessage.arguments]
+      clientID = "replit"
+      clientName = "replit.com"
+      columnsStartAt1 = true
+      linesStartAt1 = true
+      locale = "en-us"
+      pathFormat = "path"
+      supportsInvalidatedEvent = true
+      supportsProgressReporting = true
+      supportsRunInTerminalRequest = true
+      supportsVariablePaging = true
+      supportsVariableType = true
+
+    [debugger.interactive.launchMessage]
+    command = "launch"
+    type = "request"
+
+      [debugger.interactive.launchMessage.arguments]  
+      args = []
+      console = "externalTerminal"
+      cwd = "."
+      environment = []
+      pauseForSourceMap = false
+      program = "./index.js"
+      request = "launch"
+      sourceMaps = true
+      stopOnEntry = false
+      type = "pwa-node"
+
+[languages]
+
+[languages.javascript]
+pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.json}"
+
+[languages.javascript.languageServer]
+start = "typescript-language-server --stdio"
+
+[deployment]
+run = ["sh", "-c", "npm run start"]

client/package.json

@@ -13,10 +13,11 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-router": "^6.14.0",
     "react-router-dom": "^6.14.2",
     "react-script": "^2.0.5",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "socket.io-client": "^4.7.1",
     "theme-ui": "^0.16.0",
     "web-vitals": "^2.1.4"

client/src/components/Navbar.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import "../styles/navbar.css";
-import { Navbar as BsNavbar, Nav, Form, Button } from "react-bootstrap";
+import { Navbar as BsNavbar, Nav, Form, Button, Image } from "react-bootstrap";
 import { NavLink, useNavigate } from "react-router-dom";
 
 function Navbar({ handleShow }) {
@@ -23,6 +23,11 @@ function Navbar({ handleShow }) {
       sticky="top"
       expand="lg">
       <BsNavbar.Brand as={NavLink} to="/" className="m-2 text-light">
+        <Image className="m-2 text-light"
+          src="https://play-lh.googleusercontent.com/ctZv22_YORB0adQB_V4eOo4pgm4Js744yB4wOPhTVbPSOm_Lg0opMsIjC9xTc2EdwQ=w240-h480"
+          alt="Navbar Image"
+          style={{ maxWidth: '50px', maxHeight: '50px' }}
+        />
         Menfess
       </BsNavbar.Brand>
       <BsNavbar.Toggle

client/src/components/modals/Post.js

@@ -33,12 +33,12 @@ function Post({ show, handleClose }) {
 
   return (
     <Modal show={show} onHide={handleClose}>
-      <Modal.Header closeButton>
+      <Modal.Header closeButton className="bg-secondary">
         <Modal.Title>New Post</Modal.Title>
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body className="bg-secondary" >
         <Form>
-          <Form.Group controlId="name">
+          <Form.Group controlId="name" className="m-1">
             <Form.Label>Name</Form.Label>
             <Form.Control
               required
@@ -49,7 +49,7 @@ function Post({ show, handleClose }) {
               placeholder="Masukkan nama"
             />
           </Form.Group>
-          <Form.Group controlId="content">
+          <Form.Group controlId="content" className="m-1">
             <Form.Label>Content</Form.Label>
             <Form.Control
               required
@@ -61,7 +61,7 @@ function Post({ show, handleClose }) {
               placeholder="Ketik aja"
             />
           </Form.Group>
-          <Form.Group controlId="image">
+          <Form.Group controlId="image" className="m-1">
             <Form.Control
               required
               name="image"
@@ -72,10 +72,14 @@ function Post({ show, handleClose }) {
         </Form>
         <div>
           <h3>Preview Gambar</h3>
-          <img src={previewUrl} alt="Preview" />
+          <img src={previewUrl} alt="Preview" style={{
+            maxHeight: "500px",
+            maxWidth: "500px",
+            objectFit: "contain",
+          }}/>
         </div>
       </Modal.Body>
-      <Modal.Footer>
+      <Modal.Footer className="bg-secondary">
         <Button variant="primary" onClick={handleSubmit}>
           Send
         </Button>

client/src/pages/Post.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { Button, Form } from "react-bootstrap";
 import { Card, Col, Row } from "react-bootstrap";
 import { useLoaderData } from "react-router";
+import { Helmet } from "react-helmet";
 import PostCard from "../components/Post.js";
 import { socket } from "../socket";
 
@@ -24,11 +25,6 @@ function Post({ type }) {
   const [commentFormData, setCommentFormData] = useState(initValue);
   const { name, content } = commentFormData;
 
-  document.title = `Menfess | ${[
-    type.split("")[0].toUpperCase(),
-    ...type.split("").splice(1),
-  ].join("")} | Post ${post.noteId}`;
-
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setCommentFormData({ ...commentFormData, [name]: value });
@@ -64,6 +60,9 @@ function Post({ type }) {
 
   return (
     <>
+      <Helmet>
+        <title>{`Menfess | ${[type.split("")[0].toUpperCase(), ...type.split("").splice(1)].join("")} | Post ${post.noteId}`}</title>
+      </Helmet>
       <PostCard post={post} type={type} />
       <div className="d-flex justify-content-center align-items-center">
         <Card

client/src/pages/Posts.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import { useLoaderData, useParams, Link } from "react-router-dom";
+import { Helmet } from "react-helmet";
 import Post from "../components/Post.js";
 import { socket } from "../socket.js";
 
@@ -79,6 +80,9 @@ function Posts({ type }) {
 
   return (
     <>
+      <Helmet>
+        <title>{`Menfess | ${[type.split("")[0].toUpperCase(), ...type.split("").splice(1)].join("")} | ${data.postTotal ? `Page ${id}` : "Search"}`}</title>
+      </Helmet>
       <div id="posts">
         {posts.map((post) => (
           <Post post={post} type={type} key={post.noteId} />

index.js

@@ -30,7 +30,6 @@ const io = new Server(server, {
 app.use(cookieParser());
 app.use(cors());
 app.use(express.json());
-app.use(express.static("./client/build"))
 app.use(express.urlencoded({ extended: true }));
 app.use(express.static(path.resolve(__dirname, "client/build")))
 
@@ -50,7 +49,7 @@ app.get('*', (req, res) => {
 const port = 5000;
 
 // Jalanin Backend nya. Frontend di folder terpisah
-server.listen(port, async () => 
+server.listen(port, async () => {
   console.log("App running on port", port);
   // Connect MongoDB
   mongoose.connect(process.env.MONGODBURI, {