Skip to content

Instantly share code, notes, and snippets.

Jack Hsu jaysoo

Block or report user

Report or block jaysoo

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View createAsyncThunk.example.js
const fetchUsers = createAsyncThunk(
"users/fetch",
(function () {
// use `p` to ensure promises are returned in order.
let p = Promise.resolve();
return () => {
// Wait for previous promise to resolve first to guarantee ordering.
return p.then(() => {
// Change binding to new API call.
p = usersAPI.fetchAll();
View app.tsx
import React from 'react';
import { useViewportSize } from '@use-viewport-size/use-viewport-size';
import './app.css';
export const App = () => {
const size = useViewportSize();
return (
<div className="app">
{size.width}px / {size.height}px
</div>
View app.spec.ts
describe('demo', () => {
beforeEach(() => {
cy.viewport(1024, 768);
cy.visit('/');
});
it('should display viewport dimensions', () => {
cy.get('.app').contains('1024px / 768px');
});
});
View app.css
body {
margin: 0;
}
.app {
font-family: sans-serif;
font-size: 10vh;
height: 100vh;
display: flex;
align-items: center;
View use-viewport-size.spec.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { act } from '@testing-library/react';
import { useViewportSize } from './use-viewport-size';
describe(' UseViewportSize', () => {
it('should render successfully', () => {
// Setup
let container = document.createElement('div');
document.body.appendChild(container);
View use-viewport-size.tsx
import { useState, useEffect } from 'react';
export function useViewportSize() {
const getSize = () => {
return { width: window.innerWidth, height: window.innerHeight };
};
const [size, setSize] = useState(getSize);
useEffect(() => {
View workspace.json
{
// ...
"build": {
"builder": "@nrwl/web:build",
"options": {
"differentialLoading": false,
"outputPath": "dist/apps/demo",
"index": "apps/demo/src/index.html",
"main": "apps/demo/src/main.tsx",
"polyfills": "apps/demo/src/polyfills.ts",
View webpack.config.js
const getConfig = require('@nrwl/react/plugins/babel');
const cssModuleRegex = /\.module\.css$/;
module.exports = (config) => {
config = getConfig(config);
config.module.rules.forEach((rule, idx) => {
// Find rule tests for CSS.
// Then make sure it excludes .module.css files.
if (rule.test.test('foo.css')) {
View gifs.fixed.tsx
// libs/gifs/src/lib/gifs.tsx
export const Gifs = (props: GifsProps) => {
// ...
const getFetchUrl = useCallback(
() =>
// Return `null` if query is empty
query
? `https://api.giphy.com/v1/gifs/search?api_key=${
props.apiKey
}&q=${query}`
View nx.json.md
{
  // ...
  "projects": {
    "my-app": {
      "implicitDependencies": ["api"],
      "tags": []
    },
    // ...
  }
You can’t perform that action at this time.