Skip to content

Instantly share code, notes, and snippets.

View muhammadawaisshaikh's full-sized avatar
💻
#codedWorld #dev

Muhammad Awais muhammadawaisshaikh

💻
#codedWorld #dev
View GitHub Profile
@muhammadawaisshaikh
muhammadawaisshaikh / sample.component.html
Created May 9, 2020 09:26
Creating a Dark & Light Toggle Mode on your Angular App
<div class="text-right">
<div class="custom-control custom-switch">
<mat-checkbox type="checkbox"
class="custom-control-input"
id="darkMode"
[checked]="isThemeDark | async"
(change)="toggleDarkTheme($event)">
<label class="custom-control-label" for="darkMode"></label>
<a class="text-capitalize">Dark Mode</a>
</mat-checkbox>
@muhammadawaisshaikh
muhammadawaisshaikh / getLocation.js
Created May 7, 2020 07:52
get current location Lat, Lng using javascript
getLocation() {
let locate = '';
if (navigator.geolocation) {
// console.log(navigator.geolocation.getCurrentPosition(this.showPosition));
locate = navigator.geolocation.getCurrentPosition(this.showPosition);
} else {
locate = 'No Location';
console.log(locate);
@muhammadawaisshaikh
muhammadawaisshaikh / App.js
Created April 16, 2020 19:21
toggle environment for http call in class component using React Native
export default class App extends Component {
state = {
endpoint: 'http://test.sample.com'
}
envUsage = (environment) => {
if (environment == 'testing') {
this.setState({ endpoint: 'http://test.sample.com' })
}
@muhammadawaisshaikh
muhammadawaisshaikh / FormComponent.js
Created April 15, 2020 17:34
change button color conditionally if state is valid
getAnswer(event) {
if (event.target.name == 'q1') {
this.setState({ q1: event.target.value });
}
else if (event.target.name == 'q2') {
this.setState({ q2: event.target.value });
}
else if (event.target.name == 'q3') {
this.setState({ q3: event.target.value });
}
@muhammadawaisshaikh
muhammadawaisshaikh / App.js
Created March 24, 2020 15:05
Making API calls in React using Redux-Thunk
import React from 'react';
import { connect } from "react-redux";
import {
GetUsers
} from "./app/redux/actions/taskAction";
class App extends React.Component {
constructor(props) {
@muhammadawaisshaikh
muhammadawaisshaikh / Form.js
Created March 10, 2020 10:42
How to share and change state between components using props
// Child
import React, { useState, Component } from 'react';
import Input from '../../shared/input-box/InputBox'
const Form = function (props) {
const {toggle, toggler} = props;
const [value, setValue] = useState('');
@muhammadawaisshaikh
muhammadawaisshaikh / matchSameArrayOfObject.js
Created February 27, 2020 14:23
check if any object is same in two array of abjects
// check if any object is same in two array of abjects
const matchedRoles = [];
allRoles.forEach(role => {
const matchRoles = userRoles.map(userRole => {
if (role.id === userRole.id) {
// console.log(userRole.id);
matchedRoles.push(userRole.id);
// console.log(matchedRoles.indexOf(userRole.id))
}
@muhammadawaisshaikh
muhammadawaisshaikh / RoleDetailsDialog.js
Created February 24, 2020 11:31
detecting change of inputs from child layers reactJS
import React, { useState } from 'react';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import DialogContent from '@material-ui/core/DialogContent';
const RoleDetailsDialog = function (props) {
const handleChange = e => {
// console.log("dialog input values >", {
@muhammadawaisshaikh
muhammadawaisshaikh / parent.js
Created February 18, 2020 10:57
search from a list passed as props, and getting data from child to parent using callback | ReactJS
// filtered data list from searchbox component - callback
callbackFunction = (filteredData) => {
this.setState({numbers: filteredData});
console.log(filteredData);
}
class Conversations extends Component {
state = {
@muhammadawaisshaikh
muhammadawaisshaikh / filterArrayOfObjects.js
Created February 6, 2020 09:03
filter unique items from array of objects
filterUniqueItems(arr) {
let mymap = new Map();
let uniqueItems = arr.filter(el => {
const val = mymap.get(el.text);
if(val) {
if(el.type < val) {
mymap.delete(el.text);
mymap.set(el.text, el.type);
return true;