Posts

React Hook with axios

import React,{ useEffect , useState } from 'react' ; import axios from "axios" ; import 'bootstrap/dist/css/bootstrap.min.css' ; import { Card, Row, Container, Col } from 'react-bootstrap' ; const Product = () => { const [ products , setProducts ] = useState ([]); const [ loading , setLoading ] = useState ( false ); useEffect (() => { setLoading ( true ); const fetchData = async () => { const result = await axios ( 'API_URL' , ); // console.log(result.data.data) setProducts ( result . data . data ); setLoading ( false ); }; fetchData (); }, []); return ( <> < Container > < Row > { loading && < div > Loading... </ div > } { products . map ((product,index) => < Col xs = { 1...
Post a Comment
Read more

React Context API (Hooks and Classes)

App.js import React from 'react' import HomePage from './HomePage' import { UserProvider } from './UserContext' function App() { const user = { name: 'Jibon Bikash Roy', email: 'Jibon Bikash Roy ', loggedIn: false } return ( < UserProvider value = { user } > < HomePage /> </ UserProvider > ) } export default App; UserContext.js import React from 'react' const UserContext = React.createContext({}) export const UserProvider = UserContext.Provider export const UserConsumer = UserContext.Consumer export default UserContext HomePage.js // import React, {Component} from 'react' // import { UserConsumer } from './UserContext' // class HomePage extends Component { // render() { // return ( // // <UserConsumer> // {props => { // return <div>{props.name}</div> // ...
Post a Comment
Read more

React Filter

componentDidMount() { axios.get(API_BASE_URL+'/search',{params:{ lan: this.state.lan }}).then(response => { // console.log(response.data.data); this.setState({products: response.data.data}); }) .catch(function (error) { console.log(error); }) } render() { let products= this.state.products.filter( (product) => { return product.name.toLowerCase().indexOf(this.state.searchstring) !== -1; } ); return ( { products . map (product => < div className ="col-12 col-md-3 col-sm-6 col-lg-2 col-xl-3" key = {product. id } > < Products name = {product. name } id = {product. id } image = {product. image [ 0 ].image_url} price = {product. price } actions = { this . handlertest } /> </ div > )} );
Post a Comment
Read more

Modal - React-Bootstrap

import React, {Component} from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; import axios from 'axios'; import { ClipLoader } from 'react-spinners'; import { Modal, Card,Button } from 'react-bootstrap'; import Image from 'react-image-resizer'; class Recomendet extends Component { constructor(props) { super(props); this.apiURL = 'http://xyz.info/projects/api/products/'; this.ProductDetailsURL = 'http://xyz.info/projects/api/product/'; this.state = { products:[], isOpen:false, singleproduct:[], imageurl:'', disabled: false, loading: false, showcontent: false } this.selectModal = this.selectModal.bind(this); this.handleClose = this.handleClose.bind(this); this.handleShow = this.handleShow.bind(this); } selectModal(event) { let produ...
Post a Comment
Read more

Express ejs with mongoose pagination

var express = require('express'); var Bodyperser = require('body-parser'); var mongoose = require('mongoose'); var path = require('path'); var ejs = require('ejs'); app.listen(3002, function () { console.log('Server started on port 3001') }) app.get('/users/:page', function(req, res, next) { var perPage = 1 var page = req.params.page || 1 User .find({}) .skip((perPage * page) - perPage) .limit(perPage) .exec(function(err, users) { User.count().exec(function(err, count) { if (err) return next(err) res.render('home/indexp', { users: users, current: page, pages: Math.ceil(count / perPage) }) }) }) }) home/indexp.ejs   < div class= "container" > < h2 > User List </ h2 > < table class= "tab...
Post a Comment
Read more

Node js ACL with mongoose

var express = require('express'); var Bodyperser = require('body-parser'); var mongoose = require('mongoose'); var path = require('path'); var acl = require('acl'); var session = require('express-session'); mongoose.connect('mongodb://127.0.0.1:27017/testdb', function (err) { if (err) throw err; console.log('Successfully connected'); }); mongoose.connection.on('connected', function() { acl = new acl(new acl.mongodbBackend(mongoose.connection.db)); }); var User = require('./model/user.model'); Add User role to Manager acl.addUserRoles(users._id.toString(), 'Manager'); Check user permission. Get user ID from session variable req.session.name acl.hasRole( req.session.name, 'Admin', function(err, hasRole) { if(err){ res.redirect('/login'); } if(hasRole==true){ User.findById(req.params.id, function (err, user...
Post a Comment
Read more

Node.js Form Validation in Express-Validator

Image
    Install npm install express body-parser ejs express-validator // index.js var express = require('express'); var Bodyperser = require('body-parser'); var ejs = require('ejs'); var path = require('path'); const { check, validationResult } = require('express-validator/check'); const { matchedData, sanitize } = require('express-validator/filter'); var app = express(); app.set('view engine','ejs'); app.set('views', path.join(__dirname,'views')); app.use(Bodyperser.json()); app.use(Bodyperser.urlencoded({extended:false})); app.use(express.static(path.join(__dirname,'public'))); app.listen(3001, function () { console.log('Server started on port 3001') }) app.get('/', function (req, res) { res.render('home/index'); }); app.get('/about', function (req, res) { res.render('home/about'); }); app.get('/registration', function (req, r...
Post a Comment
Read more