Categories
Uncategorized

React/redux, Action, dispatch

import { ActionTypes } from "../constants/action-types";

export const setProducts = (products) => {
  const responser = await axios.get('/product')
  return {
    type: ActionTypes.SET_PRODUCTS,
    payload: response,
  };
};

export const selectedProduct = (product) => {
  return {
    type: ActionTypes.SELECTED_PRODUCT,
    payload: product,
  };
};
export const removeSelectedProduct = () => {
  return {
    type: ActionTypes.REMOVE_SELECTED_PRODUCT,
  };
};
export const ActionTypes = {
  SET_PRODUCTS: "SET_PRODUCTS",
  SELECTED_PRODUCT: "SELECTED_PRODUCT",
  REMOVE_SELECTED_PRODUCT: "REMOVE_SELECTED_PRODUCT",
};
import React, { useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
  selectedProduct,
  removeSelectedProduct,
} from "../redux/actions/productsActions";
const ProductDetails = () => {
  const { productId } = useParams();
  let product = useSelector((state) => state.product);
  const { image, title, price, category, description } = product;
  const dispatch = useDispatch();
  const fetchProductDetail = async (id) => {
    const response = await axios
      .get(`https://fakestoreapi.com/products/${id}`)
      .catch((err) => {
        console.log("Err: ", err);
      });
    dispatch(selectedProduct(response.data));
  };

  useEffect(() => {
    if (productId && productId !== "") fetchProductDetail(productId);
    return () => {
      dispatch(removeSelectedProduct());
    };
  }, [productId]);
  return (
     <div></div>
  )}
Categories
Uncategorized

JavaScript Scope Example

const x = {
 a: 1,
 b: function() {
   console.log(this);
 }
}
x.b() /// {a: 1, b: ƒ}
const z = x.b   // here this is window
z() // undefined
onst x = {
 a: 1,
 b: function() {
   console.log(this);
 }
}
x.b() /// {a: 1, b: ƒ}
const z = x.b   // here this is window
z() // undefined
Categories
Reactjs Uncategorized

Nested Routes: React Router

import react, { useState } from "react";
import { Switch, Route, Redirect} from "react-router-dom";
const App = ()=>{
      return (
           <Switch>
                  <Route path="/" exact component={Home} />
                    <Route path="/services" component={Service} /> 
          </Switch>
     )
}
export default App;
///////////////////////////////////////////////////////////////////
import {userouteWatch} from   from "react-router-dom"; 
const {path, url} =  userouteWatch ();
const Child= ()=>{
      return (
           <>
                 <Link to={`${url}/1234`} ></Link>
                  <Route path={`${path}/:id`} exact component={Home} />
                    <Route path="/services" component={Service} /> 
          </>
     )
}
export default  Child 
/////////////////////// Conditions ////
const Child= ()=>{
      return (
           <>    <Route path={path} >
                 <Link to={`${url}/1234`} ></Link>
                  </Route>
                  <Route path={`${path}/:id`} exact component={Home} />
                    <Route path="/services" component={Service} /> 
          </>
     )
}
export default  Child 





Categories
Angular Uncategorized

Angular ChangeDetectorRef

import { JsonPipe } from '@angular/common';
import { Component, VERSION, ViewChild, AfterViewInit , AfterViewChecked, AfterContentChecked, SimpleChanges ,OnChanges, ElementRef  } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { ChangeDetectorRef } from '@angular/core';
@Component({  
   selector: 'my-app',  templateUrl: './app.component.html',  
   styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, AfterViewChecked {  
constructor(private cdRef:ChangeDetectorRef) {}  
@ViewChild(ChildComponent) hello:ChildComponent;  
@ViewChild('title') title: ElementRef;  
aname = 'Ajay' 
 name = 'Angular ' + VERSION.major; 
 xx:any;  
ngAfterViewInit() {   
   this.aname = this.hello.name  
}  
ngAfterViewChecked(){    
   this.aname = this.hello.name   
   //console.log(this.title.nativeElement.innerText)    
   this.cdRef.detectChanges();  
} 
ngAfterContentInit(){    
   console.log("after content init");   
   // this.aname = this.hello && this.hello.name  
}  
ngOnChanges(changes: SimpleChanges) {    
   console.log(changes)       
   this.xx = changes 
 }
}
import { JsonPipe } from '@angular/common';
import { Component, VERSION, ViewChild, AfterViewInit , AfterViewChecked, AfterContentChecked, SimpleChanges ,OnChanges, ElementRef  } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { ChangeDetectorRef } from '@angular/core';
@Component({  
   selector: 'my-app',  templateUrl: './app.component.html',  
   styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit, AfterViewChecked {  
constructor(private cdRef:ChangeDetectorRef) {}  
@ViewChild(ChildComponent) hello:ChildComponent;  
@ViewChild('title') title: ElementRef;  
aname = 'Ajay' 
 name = 'Angular ' + VERSION.major; 
 xx:any;  
ngAfterViewInit() {   
   this.aname = this.hello.name  
}  
ngAfterViewChecked(){    
   this.aname = this.hello.name   
   //console.log(this.title.nativeElement.innerText)    
   this.cdRef.detectChanges();  
} 
ngAfterContentInit(){    
   console.log("after content init");   
   // this.aname = this.hello && this.hello.name  
}  
ngOnChanges(changes: SimpleChanges) {    
   console.log(changes)       
   this.xx = changes 
 }
}