node.js - 使用 Reactjs 和 nodejs 从列表中添加和删除用户

Question

嗨，我有一个聊天应用程序，使用Nodejsand创建ReactJs。目前我正在JSON files使用storage. 在这个应用程序中，我有两个tabs,chat tab和users tab. chat tab包含所有chated users or recent chated用户并且包含users tab所有registered users. 当user在users tab并且如果他clicks在任何地方user，我将把toggling tab用户chat tab添加到文件的顶部，chatedusers.json如果user不存在并且如果用户存在那么我不添加。现在我想如果 theuser sends或messageanyuser receives然后message添加用户，chat tab否则不要添加到chat tab.

//users.json

[
  {
    "id": "100",
    "name": "user1"
  },
  {
    "id": "200",
    "name": "user2"
  },
  {
    "id": "300",
    "name": "user3"
  },
  {
    "id": "400",
    "name": "user4"
  },
  {
    "id": "500",
    "name": "user5"
  },
  {
    "id": "600",
    "name": "user6"
  },
  {
    "id": "700",
    "name": "user7"
  }
]

//chatedusers.json

 [
      {
        "id": "100",
        "name": "user1"
      },
      {
        "id": "200",
        "name": "user2"
      },
          ]

//messages.json

[
  {
    "sender": 100,
    "receiver": 200,
    "message": "lets do something"
  },
  {
    "sender": 100,
    "receiver": 200,
    "message": "second message"
  }
  ,{
    "sender": 200,
    "receiver": 100,
    "message": "ok"
  }
]

//Users.js

import React, { useEffect, useState } from "react";
import "./All.css";
import ShowSingle from "./ShowSingle";
import axios from "axios";
import { useDispatch } from "react-redux";
import { setTabPane } from "./actions";
function Users() {
  const dispatch = useDispatch();

  const [users, setUsers] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    axios
      .get("http://localhost:3005/all")
      .then(function (response) {
        setUsers(response.data);
        console.log("users" + JSON.stringify(response.data));
        setLoading(false);
      })
      .catch(function (error) {
        console.log(error);
        setLoading(false);
      });
  }, []);
  const clickHandler = () => {
    dispatch(setTabPane("chat"));
  };
  const addToRecents = (user) => {
    console.log("users", user);
    axios
      .post("http://localhost:3005/add", user)
      .then((response) => console.log("added to chat"))
      .catch((error) => {
        console.error("There was an error!", error);
      });
  };
  return (
    <div>
      {!loading &&
        users.map((user, id) => (
          <ShowSingle
            key={id}
            user={user}
            click={clickHandler}
            addToRecents={addToRecents}
          />
        ))}
    </div>
  );
}

export default Users;

//chated.js //这包含聊天的用户

import React, { useEffect, useState } from "react";
import axios from "axios";
import ShowSingle from "./ShowSingle";
import ShowRecentSingle from "./ShowRecentSingle";

function ChatedList() {
  const [users, setUsers] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    axios
      .get("http://localhost:3005/")
      .then(function (response) {
        setUsers(response.data);
        console.log("users" + JSON.stringify(response.data));
        setLoading(false);
      })
      .catch(function (error) {
        console.log(error);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      {!loading &&
        users.map((user, id) => <ShowRecentSingle key={id} user={user} />)}
      <input
        type="text"
        name="message"
        id=""
        className="message-input"
        placeholder="type new message....."
      />
    </div>
  );
}

export default ChatedList;

//server.js //这包含所有的api路由

var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var cors = require("cors");
var usrs = require("./chatedlist.json");
var all = require("./alluser.json");
var messages = require("./messages.json");
app.use(express.json());
app.use(
  cors({
    origin: "http://127.0.0.1:3000",
  })
);
app.get("/", function (req, res) {
  res.json(usrs);
});
app.get("/all", function (req, res) {
  res.json(all);
});
app.get("/allmessages", function (req, res) {
  res.json(messages);
});
app.post("/add", function (req, res) {
  var user = req.body;
  var hasMatch = false;
  for (var index = 0; index < usrs.length; ++index) {
    var check = usrs[index];

    if (check.id == user.id) {
      hasMatch = true;
      break;
    }
  }

  if (!hasMatch) {
    usrs.unshift(user);
    res.send("User has been added successfully");
  } else {
    res.send("User exists already");
  }
});

app.listen(3005, () => console.log("server listening on 3005"));

标签： node.jsreactjsexpress