Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Aditya Agarwal itaditya

🎯
Focusing
View GitHub Profile
@itaditya
itaditya / youtube-120x-volume.js
Created May 24, 2021
Increase volume above 100% on youtube and other sites.
View youtube-120x-volume.js
var videoElem = document.querySelector('video');
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(videoElem);
var gainNode = audioCtx.createGain();
gainNode.gain.value = 20;
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
@itaditya
itaditya / react-challenge.jsx
Created Feb 3, 2021
sayHello is a function defined in Actor function component. Can you make App component call the sayHello function?
View react-challenge.jsx
function Actor({ name }) {
function sayHello() {
console.log('hello', name);
}
return (
<button onClick={sayHello}>
Say Hello
</button>
);
@itaditya
itaditya / redact.css
Created Feb 2, 2021
Use this class to add black-out text.
View redact.css
.redact {
background-color: #000 !important;
border-radius: 6px !important;
color: transparent !important;
filter: brightness(0) !important;
}
@itaditya
itaditya / toast.jsx
Last active Jan 17, 2021
Scalable Props API structure
View toast.jsx
const toastProps = {
purpose: 'alert',
variant: 'success',
isClosable: false,
onClose: handleClose,
root: {
'data-testId': 'root-wrapper',
},
content: {
id: 'main-toast',
@itaditya
itaditya / compound-comp-tab.jsx
Created Oct 10, 2020
Implementation of Tab component in compound component pattern.
View compound-comp-tab.jsx
const Tab = ({ id, children }) => (
<Consumer>
{({ changeTab }) => <div onClick={() => changeTab(id)}>{children}</div>}
</Consumer>
);
@itaditya
itaditya / App.test.jsx
Last active Oct 5, 2020
(Blog) Testing a Redux hooked app
View App.test.jsx
import { render, fireEvent, screen, waitForElementToBeRemoved } from '@testing-library/react';
import * as utils from './utils';
jest.mock('./utils');
const foodData = [
{
id: 'SM',
label: 'Sausage McMuffin',
@itaditya
itaditya / App--Comp.jsx
Last active Oct 5, 2020
(Blog) Testing a Redux hooked app
View App--Comp.jsx
// App.js
function App() {
const stateAPIStatus = useLoadFoodData();
return (
<div className="food-app">
<header>
<h1>Ordux</h1>
</header>
<Message status={stateAPIStatus} />
@itaditya
itaditya / test-loading.js
Last active Oct 5, 2020
(Blog) Testing a Redux hooked app
View test-loading.js
import React from 'react';
import { Provider } from 'react-redux';
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import App from './App';
import { createReduxStore } from './redux';
describe('Test App', () => {
function renderApp(store = createReduxStore(), props = {}) {
@itaditya
itaditya / example-test.js
Last active Oct 3, 2020
(Blog) Testing a Redux hooked app
View example-test.js
test('only show veg food when veg filter is applied', () => {
// arrange
render(<App {...props} />);
// act
fireEvent.click(screen.getByRole('checkbox', { name: /Veg Only/i }));
// assert
expect(screen.queryByText(/Sausage McMuffin/i)).toBe(null);
expect(screen.getByText(/Mushroom Pizza/i)).toBeInTheDocument();
@itaditya
itaditya / selectorMenu-App.js
Created Sep 28, 2020
(Blog) Build a Redux hooked app
View selectorMenu-App.js
function selectorMenu(state) {
const { diet, menuIdList, menuById } = state;
const menuId = menuIdList[diet];
const menuList = [];
menuId.forEach((id) => {
menuList.push(menuById[id]);
});
return menuList;