Domitrius domitriusclark

Ecommerce Storefront Generation Recipe

Use as-is. Replace Inputs. Keep identifiers, paths, and events unchanged.

Inputs

Brand Name: "<YOUR BRAND NAME>"
Aesthetic Theme: "<YOUR AESTHETIC THEME>"
Reference Sites:

Resources

There are multiple videos in this playlist https://www.youtube.com/watch?v=esVwR4lGwQE

https://jestjs.io/docs/en/expect

https://github.com/kentcdodds/react-testing-library

When unit testing, remember to think about the Component and what it does. It helps sometimes to take each component and write down it's job. What it renders and how are important. Follow your application as a user would and test it to match those interactions.

State and Lifecycle w React

Fetching Data with Fetch API or Axios

	/* eslint-disable object-curly-spacing */
	import { Command, flags } from '@oclif/command'
	const { prompt } = require("enquirer")
	const copy = require("copy-template-dir")
	const path = require("path")
	const fs = require("fs")
	const util = require("util")


	class Mycli extends Command {

	import React from 'react';
	import { useDropzone } from 'react-dropzone';
	import { useUpload } from '../hooks/useCloudinary';

	import {
	Text,
	Button,
	Input,
	InputGroup,
	InputRightElement,

	import { useMutation } from 'react-query';
	import fetch from 'isomorphic-unfetch';

	export default function useSearch({ endpoint } = {}) {
	if (!endpoint) {
	throw new Error("Must provide an endpoint to search");
	}

	let expressionConfig = "";

	function Image({ publicId, transformations, width, height, alt }) {
	const { generateUrl, url, status, error } = useImage({ cloudName: 'testing-hooks-upload' });

	React.useEffect(() => {
	// Now instead of getImage, we call the `generateUrl` function, better describing the action we're taking internally and what to expect back
	generateUrl({
	publicId,
	transformations: {
	// by supplying height and width seperately from the transformations object,
	// we can use the height and width to dictate the size of the element AND the transformations

	it('updates data to an array on successful request', async () => {
	let server = new Server({
	routes() {
	this.post("/example-endpoint", () => ({
	resources: [
	{ id: 1, public_id: "image1" },
	{ id: 2, public_id: "image2" },
	{ id: 3, public_id: "image3" }
	]
	}));

	/** @jsx jsx */
	import { css, jsx } from '@emotion/core';
	import React from 'react';
	import { useMutation, gql } from '@apollo/client';
	import { useDropzone } from 'react-dropzone';

	const UPLOAD_IMAGE_TO_CLOUDINARY = gql`
	mutation UploadImageToCloudinary($file: String! $uploadOptions: UploadOptionsInput){
	uploadImage(file: $file uploadOptions: $uploadOptions) {
	public_id