Change database data through onclick button - javascript

I am unsure of how to change/update the data in my database through react.
My database:
const Package = new mongoose.Schema({
packageID = {type: String},
packageStatus = {type: String, enum: [packed, delivered, received], default: 'packed' },
})
how do I refer to packageStatus and their enum values in react/class component? How should I call them?
The default value is 'packed', I want to change it to 'delivered' when a button is clicked (no text fields involved).
class PackageStatus extends React.Component {
constructor(){
super()
this.state = {
packageStatus: 'packed'
}
this.updateStatus = this.updateStatus.bind(this);
}
updateStatus(){
this.setState =({
packageStatus: 'delivered'
}
)
render(){
return (
<div?
<button onClick={()=> packageStatus(this)}>Update Status</button>
</div>
)
}
}
export default PackageStatus
The code above changes the text displayed but not the status in the database, so how do I change the data in the database?
Next, I would want to display text depending on what the status in the database is. I'm not sure how to link isDelivered to the condition of the database.
For example
class Status extends Component {
constructor(props) {
super(props);
this.state = {
isDelivered: true
};
}
render() {
let { isDelivered } = this.state;
let status;
if (isDelivered) {
status = <h1>Delivered<h1>
} else {
status = <h1>Packing in progress<h1>
}
return (
<div>
{status}
</div>
);
}
}
export default Status;
Any help will be greatly appreciated! Thank you for your time

Well interfacing, a frontend framework like REACT with a database, an easier approach would be create apiEndpoints of which you would use make fetch or axios to make httpRequests which communicates to these endpoints, in turn communicate with the database to give you your desired response. A solution approach to your problem is as follows:
Create the schema using mongoose in node
const mongoose = require('mongoose')
const { Schema } = mongoose
const PackageSchema = new Schema({
packageID: {
type: String,
},
packageStatus: {
type: String,
enum: ["packed", "delivered", "received"],
default: 'packed'
}
})
module.exports = mongoose.model('package',PackageSchema)
Create the apiEndpoints or routes to interface this schema with FrontEnd(React) and Backend(eg; mongodb)
const express = require('express');
const router = express.Router();
require('dotenv').config()
const package = require('../model/packageModel');
router.get('/allpackages', async(req, res) => {
try{
const getAllPackages = await package.find();
res.json(getAllPackages);
}catch(err){
res.json({
message: err
})
}
})
router.post('/addPackage',async(req, res) => {
const pack = new package({
packageID: req.body.packageID,
packageStatus: req.body.packageStatus
})
try{
const savedPost = await pack.save();
res.json(savedPost);
}catch(err){
res.json({
message: err
})
}
})
router.patch('/updatePackageStatus', async (req, res) => {
try {
const updatePackageStatus = await package.updateOne(
{ _id: req.body.packageID },
{
$set: {
packageStatus: req.body.packageStatus
}
}
)
res.json(updatePackageStatus)
}catch (err) {
res.json({
message: err
})
}
})
module.exports = router;
Use POSTMAN or any other of choice to test endpoints with schema, and database, to see if you get the desired results. After testing out the above, with POSTMAN, all desired operations work as expected, and you should have no problem, interfacing it with any Frontend Framework(Angular, React, Vue) now.
GET http://localhost:3000/package/allpackages
POST http://localhost:3000/package/addPackage
PATCH http://localhost:3000/package/updatePackageStatus
sample screenshot shown below
fetch api Endpoints via postman

Related

Proxyquire not calling inner functions (npm modules) and does not work with classes properly

Where am i going wrong here?
Using mocha, chai, sinon and proxyquire for an express server and sequelize ORM linked with a postgres database
I am trying to test a login controller route from my express server
Before I show the file which I want to run my test on here is what "../services/authService.js" file looks like
../services/authService
const UserService = require("./userService");
module.exports = class AuthService extends UserService {
};
// so UserService will have the method findByEmail
// UserService class looks like this and it is coming from another file require("./userService.js) as stated above
/*
class UserService {
async findByEmail(email) {
try {
const user = await User.findOne({ where: { email: email }});
if (user) {
return user;
}
throw new Error("User not found");
} catch (err) {
err.code = 404;
throw err
}
}
}
*/
And here is the auth-controller.js file which I want to run the test on
auth-controller.js
const bcrypt = require('bcryptjs');
const AuthService = require("../services/authService"); // is a class which extends from another calls see the code above
const authService = new AuthService();
const jwtGenerator = require('../utils/jwtGenerator');
const createError = require("http-errors");
exports.loginRoute = async (req, res, next) => {
try {
req.body.password = String(req.body.password);
// db query trying to force a sinon.stub to resolve a fake value. But code wont pass here hence 500 error
const userQuery = await authService.findByEmail(req.body.email);
const compare = await bcrypt.compare(req.body.password, userQuery.password);
if (!compare) throw createError(401, 'Incorrect password.');
const user = {
id: userQuery.id, role: userQuery.is_admin ? "Administrator" : "User", email: userQuery.email, Authorized: true
}
const token = jwtGenerator(user);
return res
.cookie("access_token", token, {
httpOnly: true,
secure: process.env.NODE_ENV === "production",
}).status(200).json({ message: "Logged in successfully 😊 👌", user, token });
} catch (error) {
next(error);
}
}
This code works in production but I cannot seem to test it. I used proxyquire to require the modules that the function uses. I have a big problem in making proxyquire work when it comes to my class AuthService here is my test file. As proxyquire is not working with classes some how. proxyquire is not using make AuthServiceMock at all cant figure out why.
First of these are my helper variables which I will use in the test file
../test-utils/user-helper
const createAccessToken = (payload) => jwt.sign(payload, TOKEN, {expiresIn: "1h"});
let loginDetail = {
email: "admin#test.com",
password: "123456"
};
let loginAdminUser = {
id: 1,
email: "admin#test.com",
password: "123456",
is_admin: true
}
const loginUser = {
id: 1,
email: "admin#test.com",
password: "123456",
is_admin: true
}
const adminUser = {
id: 1,
email: 'admin#test.com',
password: '123456',
is_admin: true,
first_name: 'john',
last_name: 'doe',
created_at: "2020-06-26T09:31:36.630Z",
updated_at: "2020-06-26T09:31:49.627Z"
}
module.exports = {
createAccessToken,
loginDetail,
loginAdminUser,
loginUser,
adminUser
}
And here is the test file I placed comments espcially around proxyquire when I am trying to use it as this is giving me some issues when it comes to using it with classes. And as well it is not calling mocked/stubbed npm modules for some reason
auth-controller.spec.js
"use strict";
const _ = require("lodash");
const path = require("path");
const proxyquire = require("proxyquire").noCallThru().noPreserveCache();
const chai = require("chai");
const { expect } = chai;
const sinon = require("sinon");
const sinonChai = require("sinon-chai");
chai.use(sinonChai);
// const AuthServiceOriginalClass = require("../../services/authService"); If i use this directly in proxyquire it calls the original class
const { createAccessToken, loginDetail, loginAdminUser, loginUser, adminUser } = require("../test-utils/user-helper");
const controllerPath = path.resolve('./controllers/authController.js');
describe("login route", () => {
let proxy, authService, bcryptStub, fakeCallback, fakeReq, fakeRes, fakeNext, resolveFn, token;
let result, bcryptStubbing, response;
class UserServiceMock {
async findByEmail(email) {
try {
if (email) {
return loginAdminUser;
}
} catch (error) {
throw error;
}
}
}
class AuthServiceMock extends UserServiceMock {};
bcryptStub = {
compare: function() { return true }
};
let tokeen = (kk) => {
return createAccessToken(kk);
}
// token = sinon.mock(createAccessToken(loginAdminUser)); // ?? which 1 to use?
token = sinon.spy(createAccessToken); // ?? which 1 to use?
// token = sinon.stub(createAccessToken) ?? which 1 to use?
proxy = proxyquire(controllerPath, {
"../services/authService.js": AuthServiceMock, // seems like this is not called at all
// "../services/authService.js": AuthServiceOriginalClass, // commented out if use this instead it calls the original class instant
"bcryptjs": bcryptStub,
"../utils/jwtGenerator": token,
// "#noCallThru": true // keep on or off?
});
before("Stub my methods", () => {
authService = new AuthServiceMock();
// If I call the entire loginRoute I want this stub authTry to be called inside of it and resolve that object value
authTry = sinon.stub(authService, "findByEmail").withArgs(loginDetail.email).resolves(loginAdminUser);
sinon.stub(bcryptStub, "compare").resolves(true); // force it to return true as that seems to be like the code of authController.js
// sinon.stub(token, "createAccessToken")
});
before("call the function loginRoute", async () => {
// fakeCallback = new Promise((res, rej) => {
// resolveFn = res
// });
fakeReq = {
body: {
email: loginDetail.email,
password: loginDetail.password
}
};
fakeRes = {
cookie: sinon.spy(),
status: sinon.spy(),
json: sinon.spy()
}
fakeNext = sinon.stub();
await proxy.loginRoute(fakeReq, fakeReq, fakeNext).then((_result) => {
result = _result;
});
console.log("result")
console.log(result) // undefined
console.log("result")
});
it("login route test if the stubs are called", async () => {
expect(authService.findByEmail).to.have.been.called // never called
// expect(bcryptStubbing).to.have.been.called // never called
// expect(response.status).to.deep.equal(200); // doesn't work
}).timeout(10000);
after(() => {
sinon.reset()
});
});
Where am i going wrong here in the test?

Insert data from javascript file into mongodb using graphql

I am new to using Graphql and MongoDB. I am trying to insert data from an existing javascript file where the data has been defined. I was trying to use a mutation in order to achieve this but I have no clue what I'm really doing. Any help would be nice.
const dotenv = require('dotenv');
dotenv.config();
const { ApolloServer, gql } = require('apollo-server');
const { MongoClient } = require('mongodb');
const items = require('./itemsListData');
const typeDefs = gql`
type Query {
items:[Item!]!
}
type Item{
id:ID!,
name:String!,
aisle:String!,
bay:String!,
price:Float!,
xVal:Int!,
yVal:Int!
}
type Mutation {
createItem(name: String!, aisle: String!): Item!
}
`;
console.log(items)
const resolvers = {
Query: {
items:() => items,
},
Item:{
id: ( { _id, id }) => _id || id,
},
Mutation: {
createItem: async(_, { name }, { db }) => {
// name:String!, bays:[Bay!]!, xStartVal:Int!, xEndVal:Int!, yStartVal:Int!, yEndVal:Int!
const newItem = {
items
}
// insert Item object into database
const result = await db.collection('Items').insert(newItem);
console.log("This is the result " + result);
return result.ops[0]; // first item in array is the item we just added
}
}
};
const start = async () => {
const client = new MongoClient("mongodb+srv://admin:admin#quickkartcluster.o0bsfej.mongodb.net/test", { useNewUrlParser: true, useUnifiedTopology: true });
await client.connect();
const db = client.db("QuickKart");
const context = {
db,
}
const server = new ApolloServer({
typeDefs,
resolvers,
context,
introspection: true
});
// The `listen` method launches a web server.
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
}
start();
here is my javascript data file
https://pastebin.com/wvGANBgR

Couldn't connect to mongodb database to make graphql queries

My graphql queries work with the local DB file but while trying to connect to MongoDB it doesn't work as expected.
mongo.js
require("dotenv").config();
const mongoose = require("mongoose");
const MONGODB_URI = process.env.MONGODB_URI;
if (!MONGODB_URI) {
throw new Error(
"Please define the MONGODB_URI environment variable inside .env.local"
);
}
/**
* Global is used here to maintain a cached connection across hot reloads
* in development. This prevents connections from growing exponentially
* during API Route usage.
*/
let cached = global.mongoose;
if (!cached) {
cached = global.mongoose = { conn: null, promise: null };
}
async function dbConnect() {
if (cached.conn) {
return cached.conn;
}
if (!cached.promise) {
const opts = {
bufferCommands: false,
};
cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
return mongoose;
});
}
cached.conn = await cached.promise;
return cached.conn;
}
module.exports = dbConnect;
MONGODB_URI=mongodb+srv://xxxx:xxxx#cluster0.yxbw7.mongodb.net/?retryWrites=true&w=majority
graphql query to get all the products:
exports.typeDefs = gql`
type Query {
products: [Product!]!
}
type Product {
id: ID!
name: String!
description: String!
price: Float!
image: String!
}
`;
Resolvers:
const { Product } = require("../models/Product");
exports.Query = {
products: async (parent, args, context) => {
let products = await Product.find({}).exec();
return products;
},
};
The DB has data in it but still making the query,
query{
products {
description
id
name
price
image
}
}
It returns an empty product array,
{
"data": {
"products": []
}
}
Something seems wrong with MongoDB to connect with graphql, the queries work with the local DB file which has a dummy object product data.

how get datas from Hasura hook "useQuery"

I'm a beginner in web development, so I'm trying to do a simple 'GET' with the hook "useQuery" of Hasura, and I can't access to my data. However, my query has been tested on the Hasura console, and it works. I have several array with some datas on the json side.
So I don't understand why when I'm trying to get data in my React project, it doesn't works and datas are set on "undefined".
Here is my code :
const GET_DATA_FOR_ACHIEVEMENTS = gql`
query getDataForAchievments{
UserAchievements {
additionalInfo
created_at
label
points
step
userEmail
}
}`;
type AchievementsResult = {
created_at: string;
points: number;
label: string;
userEmail: string;
step: string;
additionalInfo: string;
};
export const Statistics = () => {
const { user, isLoading } = useAuth0();
const {data, error, loading} = useQuery(GET_DATA_FOR_ACHIEVEMENTS);
let filteredDatas = data.UserAchievements;
console.log(filteredDatas[0].step);
console.log("*************")
Someone know why ?
Thanks for you future helps
Initially data will be undefined. do this way.
export const Statistics = () => {
const { user, isLoading } = useAuth0();
const {data, error, loading} = useQuery(GET_DATA_FOR_ACHIEVEMENTS);
if(loading){
return 'Loading...';
}
if(error){
return 'error :(';
}
let filteredDatas = data.UserAchievements;
console.log(filteredDatas[0].step);
console.log("*************")

How can I loop through this array inside this instance of my mongoose model?

const postSchema = new mongoose.Schema({
post:[
{postId: String},
{commentComponent: [
{comment: [String]},
]}
]
})
const Posts = mongoose.model('Posts', postSchema)
This is the definition of the schema for modeling the mongodb
const postLinks = await getPostLinks();
const posts = new Posts({
for (let i = 0; i < postLinks.length; i++) {
const comment = await getComment(postLinks[i]) // here it takes postLinks as a paramaeter to get an array of comment
post: [
{postId: postLinks[i]},
{commentComponent: [
{comment: comment}
]}
]
}
})
const result = await posts.save()
is there a way of iterating inside this instance because the for loop here is not working
You need to pass an object to the Posts constructor with a property called post (which probably should be called posts, but will keep the original name below), and for this property, you need to specify an array.
This array can be built by using Array.prototype.map and Promise.all:
const post = await Promise.all(
postLinks.map(async (postLink) => {
const comment = await getComment(postLink);
return {
postId: postLink,
commentComponent: [{ comment }],
};
})
);
const posts = new Posts({ post });
const result = await posts.save();
But if you prefer, you can use the traditional for-loop (more similar to what you were trying to do) as well:
const post = [];
for (let i = 0; i < postLinks.length; i++) {
const comment = await getComment(postLinks[i]);
post.push({
postId: postLinks[i]},
commentComponent: [{ comment }]
});
}
const posts = new Posts({ post });
const result = await posts.save();
Based on your code example I am not certain what you are attempting to do. When using a Model and trying to create you can think of as a new singular record. If you are trying to insert many links into a single record I would suggest comma separating them then inserting that into your MongoDB.
But you cannot iterate inside your Posts class like that.
If I were you I would set up my file something like this:
file: models/Post.js:
const mongoose = require('mongoose');
const PostSchema = new mongoose.Schema({
text: {
type: String,
trim: true,
required: [true, 'Please add some text']
},
link: {
type: String,
required: [true, 'Please add link']
},
createdAt: {
type: Date,
default: Date.now
}
});
module.exports = mongoose.model('Post', PostSchema);
Then create a controller js file
file: controllers/posts.js:
const Post = require('../models/Post');
// #desc Add Post
// #route POST /api/v1/posts
// #access Public
exports.addPost = async (req, res, next) => {
try {
// get post data from the request
// mongo returns a promise so await on it
const post = await Post.create(req.body);
return res.status(201).json({
success: true,
data: post
});
} catch (err) {
if(err.name === 'ValidationError') {
const messages = Object.values(err.errors).map(val => val.message);
return res.status(400).json({
success: false,
error: messages
});
} else {
return res.status(500).json({
success: false,
error: 'Server Error'
});
}
}
}
then in your router file, you can use your controller:
routes/post.js
const express = require('express');
const router = express.Router();
const { addPost } = require('../controllers/posts');
router
.route('/')
.post(addPost);
module.exports = router;

Categories

Resources