Giter Club home page Giter Club logo

austin's Introduction

Austin's React Website

View the live website here.

In an effort to learn React, TypeScript, and GitHub Actions, I decided to put together this website. Currently, this website serves as a portfolio, but as I have time and inspiration, I will be adding experiments and fun projects.

Development

Scripts

yarn verify

This is the primary script to be used in development. The verify script should be used before committing and pushing any code to remote! The verify script combines the following "legs" of project stability:

  • Static code analysis
  • Testing
  • Test code coverage

yarn sca

This is the static code analysis script. The sca script checks the following:

  • Formatting
  • TypeScript compilation
  • Linting
  • Dependency audits

yarn test

This script does what it says. Our test runner is jest. If changes are made that affect the final HTML, then the -u flag should be provided; the -u is the "update" flag which will update all of the snapshots. To read more about snapshots, visit this page.

yarn prettyCheck

Check the formatting. Will fail if formatting does not conform.

yarn pretty

Automatically fix all formatting so that it conforms to the configured style. After running pretty, the prettyCheck script should pass.

yarn lint

Running linting rules. These linting rules identify potential bugs and other bad code habits and "code smells".

Available Scripts from Create React App

In the project directory, you can run:

yarn siteStart

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn siteStartDev

Runs siteStart but disables eslint rules. This should make prototyping easier during development.

yarn siteBuild

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn siteEject

Note: this is a one-way operation. Once you siteEject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can siteEject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except siteEject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use siteEject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

GitHub Actions Automation

build.yml

The build action will run every time a commit is pushed to remote. This action will run static code analysis and the tests.

siteDeploy.yml

The siteDeploy action will run every time a commit lands on the main branch. This action will build the site and deploy it.

Acknowledgements

Create React App

This project was bootstrapped with Create React App.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

React GitHub Pages

This project is built/deployed as a GitHub page with the React GitHub Pages project.

Deploy React to GitHub Pages

This project automatically deploys via GitHub actions with the help of the Deploy React to GitHub Pages project.

austin's People

Contributors

atb-brown avatar avelynhc avatar

Watchers

avatar

austin's Issues

Create an eslint rule to ensure this is not called in deployed code. https://esl...

austin/src/hook/provide/ProviderRegistry.ts

Line 10 in deb2030

* TODO: Create an eslint rule to ensure this is not called in deployed code. https://eslint.org/docs/latest/extend/custom-rule-tutorial 

type Provider = () => unknown;

const registry: Map<ProviderKey, Provider> = new Map();

/**
 * Register a provider; this will override the real implementation of services that use this class the check for registered providers.
 *
 * This function should NOT be used/called in any deployed code; this should only be used for testing.
 *
 * TODO: Create an eslint rule to ensure this is not called in deployed code. https://eslint.org/docs/latest/extend/custom-rule-tutorial
 *
 * @param {ProviderKey} providerKey The unique key of the provider that is being registered/injected.
 * @param {Provider} providerImpl The actual implementation that is to be injected.
 */
export function register(
  providerKey: ProviderKey,
  providerImpl: Provider,
): void {
  registry.set(providerKey, providerImpl);
}

/**
 * Get the registered provider. If no provider has been registered, the real implementation will be used.
 *
 * @param {ProviderKey} providerKey The unique key of the provider that is being registered/injected.
 * @param {Provider} realProvider The real implementation that will be used if an alternative provider has not been registered.
 *
 * @return {Provider}
 */
export function get<Provider>(
  providerKey: ProviderKey,
  realProvider: Provider,
): Provider {
  return (
    registry.has(providerKey) ? registry.get(providerKey) : realProvider
  ) as Provider;
}
/**
 * All of the possible implementations that might need alternative provider implementations
 * for testing.

Prettier Rule for React Component Property Sorting

I would like a rule that will automatically sort all properties (and sub-properties) in my React component declarations.

For instance, this pattern

<MyComp beta="bar" alpha={{z="foo1", y="foo2"}} />

Will be fixed to conform to this pattern

<MyComp alpha={{y="foo2", z="foo1"}} beta="bar" />

Fix babel-preset-react-app Compilation Warning

Compilation error reads as follows:

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Create an eslint rule to ensure this is not called in deployed code. https://esl...

We want to use dependency injection so that we can write unit tests that do not

rely (depend) on implementations that make testing difficult or unreliable.

@param {ProviderKey} providerKey The unique key of the provider that is being registered/injected.

@param {Provider} providerImpl The actual implementation that is to be injected.

austin/src/hook/provide/ProviderRegistry.ts

Line 10 in deb2030

* TODO: Create an eslint rule to ensure this is not called in deployed code. https://eslint.org/docs/latest/extend/custom-rule-tutorial 

type Provider = () => unknown;

const registry: Map<ProviderKey, Provider> = new Map();

/**
 * Register a provider; this will override the real implementation of services that use this class the check for registered providers.
 *
 * This function should NOT be used/called in any deployed code; this should only be used for testing.
 *
 * TODO: Create an eslint rule to ensure this is not called in deployed code. https://eslint.org/docs/latest/extend/custom-rule-tutorial
 *
 * @param {ProviderKey} providerKey The unique key of the provider that is being registered/injected.
 * @param {Provider} providerImpl The actual implementation that is to be injected.
 */
export function register(
  providerKey: ProviderKey,
  providerImpl: Provider,
): void {
  registry.set(providerKey, providerImpl);
}

/**
 * Get the registered provider. If no provider has been registered, the real implementation will be used.
 *
 * @param {ProviderKey} providerKey The unique key of the provider that is being registered/injected.
 * @param {Provider} realProvider The real implementation that will be used if an alternative provider has not been registered.
 *
 * @return {Provider}
 */
export function get<Provider>(
  providerKey: ProviderKey,
  realProvider: Provider,
): Provider {
  return (
    registry.has(providerKey) ? registry.get(providerKey) : realProvider
  ) as Provider;
}
/**
 * All of the possible implementations that might need alternative provider implementations
 * for testing.

Rename `prettyFix` To Be `pretty`

Usually, I'm typing prettyFix in the console to automatically reformat my code. Since I use this package script pretty often, it is helpful for it to be as short as possible.

I can rename prettyFix to be pretty which is a lot quick to type not only because it is obviously shorter, but it doesn't require the shift key to capitalize any of the letters.

Create a "clickable" CSS class

austin/src/component/widget/cookie/RememberMe.tsx

Line 61 in 86ae35a

// TODO: Create a "clickable" CSS class 

import React, { useCallback, useEffect } from "react";
import { useCookies } from "react-cookie";

const clickMeToRemember = "Click me if you want me to remember you!";
const clickMeToForget = "Welcome back! Click me if you want me to forget.";
const clickOk = "; if you're okay with that, click OK.";
const confirmRememberTxt =
  "This will require me to save a cookie on your computer" + clickOk;
const confirmForgetTxt =
  "This will remove the cookie from your computer" + clickOk;

const cookieName = "remembered";
const title =
  "This component allows the site to remember a user. It's an exercise" +
  " in handling cookies and component state!";

/**
 * This button allows the user to be remembered.
 *
 * @return {JSX.Element}
 */
export default function RememberMe(): JSX.Element {
  const [cookies, setCookie, removeCookie] = useCookies([cookieName]);
  const [remember, setRemember] = React.useState(
    Object.hasOwn(cookies, cookieName),
  );
  const [buttonTxt, setButtonTxt] = React.useState(
    remember ? clickMeToRemember : clickMeToForget,
  );
  const [confirmTxt, setConfirmTxt] = React.useState(
    remember ? confirmForgetTxt : confirmRememberTxt,
  );

  const onClick: () => void = useCallback(() => {
    if (confirm(confirmTxt)) {
      if (!remember) {
        setCookie(cookieName, "true");
      } else {
        removeCookie(cookieName);
      }
    }
  }, [confirmTxt, removeCookie, remember, setCookie]);

  useEffect(() => {
    if (Object.hasOwn(cookies, cookieName)) {
      setRemember(true);
      setButtonTxt(clickMeToForget);
      setConfirmTxt(confirmForgetTxt);
    } else {
      setRemember(false);
      setButtonTxt(clickMeToRemember);
      setConfirmTxt(confirmRememberTxt);
    }
  }, [cookies]);
  return (
    <div
      data-testid="remember-me"
      onClick={onClick}
      style={{
        alignItems: "center",
        // TODO: Create a "clickable" CSS class
        backgroundColor: "rebeccapurple",
        borderRadius: 10,
        cursor: "pointer",
        display: "flex",
        fontSize: "50%",
        height: 60,
        justifyContent: "center",
        width: "25%",
      }}
      title={title}
    >
      {buttonTxt}
    </div>
  );
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.