DEV Community: Andy Allison

Making react vite and storybook play nice

Andy Allison — Tue, 17 Jan 2023 10:38:13 +0000

Another one of those reminder posts. I wanted to add storybook to a react app that I had created with vite. I was getting the following error

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/bart/src/enra_v3/frontend/.storybook/main.js from /home/bart/src/enra_v3/frontend/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/bart/src/enra_v3/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
ERR!

There is a whole thread of different ways of fixing this but this is the one that helped me most Issues Link

Basically Add a package.json file to the .storybook folder

{
  "type": "commonjs"
}

Boooom!!!!

Killing Processes on Ports With Windows

Andy Allison — Wed, 07 Dec 2022 13:07:38 +0000

NestJs Port Issues

I've had some major issues with the ports when using NestJs. It keeps locking it's self out of the port it's using. This article will show you how to kill them with out needing to reset the machine.

Using a windows PowerShell terminal with elevated privilages. "7000" can be replaced with the port you need.

netstat -aon | findStr "7000"

taskKill /PID 10436 /F

Be careful. This is as much a reminder for me as it is instructions for you. Disclaimer... I hold no responsibility for the stuff you kill with this article

REACT - Function component is not a function declaration

Andy Allison — Fri, 25 Mar 2022 09:49:34 +0000

Ok so this one got me scratching my head for a while. After a recent update on some packages I started geting the following error

ESLint: Function component is not a function declaration (react/function-component-definition)

On just about all of my components. My Components mostly look like the below code and the following example shows how it was fixed.

TLDR version

// Turn this 
const ActionButton: React.FC<ActionButtonProps> = (props) => { }

// into 
function ActionButton(props: ActionButtonProps) {}

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}) => {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;

After reading lots of different articles and trying a few things this has now become.

import { Box, Button, CircularProgress } from '@mui/material';
import React, { MouseEventHandler, ReactChild, ReactChildren } from 'react';
import { useAppSelector } from '../../../store/hooks';

export interface ActionButtonProps {
  /**
   * Checks if the button should be disabled
   */
  isDisabled: boolean;
  /**
   * Determines if the component is submitting. Results in disabled and spinner
   */
  isSubmitting: boolean;
  /**
   * Children to be displayed in the button
   */
  children: string | ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
  /**
   * Function for clicking
   */
  onClick?: MouseEventHandler<any> | undefined;
  /**
   * The Type of button it is Reset, Button, Submit
   */
  type?: 'button' | 'submit' | 'reset' | undefined;
  /**
   * The type of button to be used
   * one of 'outlined' | 'text' | 'contained'
   */
  variant?: 'outlined' | 'text' | 'contained';
  /**
   * Determines if the spinner is to be shown or not.
   * @type {boolean}
   */
  showSpinner?: boolean;
  /**
   * Determines if the button is full width or not.
   * @type {boolean}
   */
  fullWidth?: boolean;
}

function ActionButton({
  isDisabled = false,
  children,
  onClick = undefined,
  variant = 'contained',
  showSpinner = false,
  isSubmitting = false,
  type = 'submit',
  fullWidth = false,
}: ActionButtonProps) {
  const darkMode = useAppSelector((state) => state.darkMode);
  return (
    <Button
      disabled={isDisabled || isSubmitting}
      onClick={onClick}
      variant={variant}
      type={type}
      fullWidth={fullWidth}
    >
      {(showSpinner || isSubmitting)
      && (
        <Box sx={{ mr: 2 }}>
          <CircularProgress
            aria-describedby="submit-button"
            size={12}
            sx={{ color: darkMode ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.3)' }}
          />
        </Box>

      )}
      {children}
    </Button>
  );
}

export default ActionButton;

references

https://eslint.org/docs/rules/func-names
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

Postgres variables & clean up

Andy Allison — Tue, 15 Mar 2022 16:41:05 +0000

Overview

We needed a little script that would clean up data for a user based on their id.

do
$$
    declare
        userId varchar(255) := '98584bc7-f06b-45cf-bfc3-d5224cf7b743';
    begin
        delete from "LoginAttempt" where "userId" = userId;
        delete from "LoginSuccess" where "userId" = userId;
        delete from "LoginFailed" where "userId" = userId;
        delete from "Provider" where "userId" = userId;
        delete from "User" where id = userId;
    end
$$

NodeJs Console Progress Bar

Andy Allison — Mon, 14 Feb 2022 20:44:00 +0000

Overview

I'm not the greatest at writing these things as in-depth tutorials so this is pretty much a very simple example of how I've been using the progress bar in node to trach and illustrate progress when I've been processing large amounts of data and files.

The idea behind this is to show a script which will set a progress bar. It will then incrementally progress the bar (see what I did there ;) ) as the work is done on the elements.

The library used is https://www.npmjs.com/package/progress

// npm 
$ npm install progress
// Yarn
$ yarn add progress

The good stuff

import ProgressBar from 'progress';

// Simple method that pretends it's doing some work
const doSomeStuff = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Waiting');
      resolve('done');
    }, 1000);
  })
}

// main method that is doing the orchestration of all the other work
const doMeSomeImports = async () => {
  const itemsToProcess = [{id:1},{id:2},{id:3},{id:4},{id:5}];
  const bar = new ProgressBar('-> Processing [:bar] :percent :etas', {
    total: itemsToProcess.length * 2,
    width: 30,
  });
  for (const item of itemsToProcess) {
    bar.tick(1);
    await doSomeStuff();
    bar.tick(1);
  }
}

doMeSomeImports()
  .catch((e) => console.error(e))
  .then(() => console.log('Complete!'))

SQL Duplicates

Andy Allison — Mon, 07 Feb 2022 09:13:58 +0000

Disclaimer

This is a purely self serving article. I've had to do this a number of times and end up having to re-learn it all every time I've done it. SOOOOO this time I will drop some basics here as a reference for my failing memory but if it helps anybody else even better. It's not indented to be instructional or in anyway best practice so if you have issues or know of more appropriate ways please feel fee to drop things in the comments etc.

The Problem

The key problem being addressed is a number of duplicate records that have found their way into our datasets. These duplicates are matched on the master record id and the description used in the child example

id	parentId	description
1	P1	this is ok
2	P1	I'm here twice
3	P1	I'm here twice

Breaking it down

So the first thing I did was a query that will actualy help me find the rows I was looking for and the proof there are actual duplicates.

select "parentId",
       id,
       description,
       row_number()
       over (partition by "parentId", description order by "parentId", overview) as RN
from "Detail"

This produces results like these

id	parentId	description	RN
1	P1	this is ok	1
2	P1	I'm here twice	1
3	P1	I'm here twice	2

So we now have a row id/number based on the parentId and the description matching.

We then use this in the delete query to kill al the row numbers over 1

delete
from "Detail"
where id in (
    select id
    from (
             select "parentId",
                    id,
                    description,
                    row_number()
                    over (partition by "parentId", description order by "parentId", overview) as RN
             from "Detail"
         ) as F
    where RN > 1
);

This is probably a convoluted way to achieve this and I'm sure there will be more efficient way but it has worked for me in this occasion so I hope it helps others.

Running the previous query then results in

id	parentId	description	RN
1	P1	this is ok	1
2	P1	I'm here twice	1

A nice NestJs GraphQL init module

Andy Allison — Fri, 21 May 2021 07:04:40 +0000

This is as much of a placeholder for myself as anything but this snippet gives you a nice graphql module for nestjs that has authentication provided via the context. It also handles error formatting and hides all the excess data if the platform is production

 GraphQLModule.forRoot({
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      sortSchema: true,
      installSubscriptionHandlers: true,
      debug: false,
      context: ({ req }) => {
        return {
          request: req,
        };
      },
      formatError: (error) => {
        if (error.extensions.exception.status === 404)
          throw new NotFoundException();
        if (process.env.NODE_ENV === 'production')
          return { message: error.message };
        return error;
      },
    }),

Banish those unwanted repo files

Andy Allison — Tue, 12 Nov 2019 08:56:29 +0000

I was recently tasked with moving some of our legacy svn repos over to git (I'll do another post on that once we have it completed). This is just a nice snippet that I found useful when cleaning them up a bit.

We added the .gitignore file for visual studio and then ran this little gem to clean down a few things.

git rm -r --cached .
git add .
git commit -m ".gitignore is now working"

Happy cleaning

Making the debuggers work

Andy Allison — Fri, 25 Oct 2019 14:51:42 +0000

Ok so as a member of a team that use both Vscode and Webstorm and someone who likes to jump between them himself I really wanted a nice easy way to spin up a simple Javascript project that would let me use all the nice new features from ES6 (particularly the imports / modules and other syntactic sugar).

The best way to do this is weith Babel

Initialise npm and a package.json. Using -y will skip all the questions and adding details manually you can go back and modify later.

$ npm init -y

Install the dependencies needed.

$ npm i dotenv @babel/cli @babel/core @babel/node @babel/preset-env nodemon

Create a folder called /src with another folder called /modules in it. In the /src folder create a new file called index.js. Then in the modules folder create another file called maths.js. The final structure should look like something below.

// /src/index.js
import 'dotenv/config';

import { sumAll } from './modules/maths';

const result = sumAll(1, 1);

console.log(result);

// /src/modules/maths.js
let sumAll = (a, b) => { return a + b; }
let subtractAll = (a, b) => { return a - b; }
let divideAll = (a, b) => { return a / b; }
let multiplyAll = (a, b) => { return a * b; }
let findModulus = (a, b) => { return a % b; }

export { sumAll, subtractAll, divideAll, multiplyAll, findModulus };

The tricky part is this bit. If you try to run this project with out babel you will end up with the following error.

c:\dev\Learning\nodejs\babel-es6-debugging\src\index.js:1
import 'dotenv/config';
       ^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

SOOOOOOO.. To get this rocking we do this bit o magic. Stick a file called .babelrc in the root folder of the project. Use the following snippet to kick up the presets and make it produce sourMaps

// .babelrc
{
    "presets": [
        "@babel/preset-env"
    ],
    "sourceMaps": true
}

Then in the package.json file add the following to the "scripts" section.

"scripts": {
  "start": "nodemon --exec babel-node src/index.js"
},

Running

$ npm run start

Should produce this. Showing that we have managed to transpile and run the script

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node src/index.js`
2
[nodemon] clean exit - waiting for changes before restart

BUT WHAT ABOUT DEBUGGING

Yes, don't worry I hadn't forgot, this was the bit that actually caused me some realy head scratching. I could add lots of links to the numerous StackOverflows, blogs, videos and issues I've plodded through in order to get this working but I think I'll just give you the solutions as once it works it works.

Start by adding @babel/register this is a little touch of hot sauce that means you can run the babel files in memory rather than having to do the whole. Build into dist folder thang.

$ npm i --save-dev @babel/register

Then create a babel.config.js file in the root of the project. The file contents needs to look like.

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                // sourceMaps: true,
                targets: {
                    node: 'current',
                },
            },
        ],
    ],
};

VSCode

SO next in vscode go to the configuration / debug section and make the launch.json file look like.

The most interesting parts are the args for the working folder. This needs to pint at the correct file for the debugging. IN this case and index.js. Then the runTimeArgs are needed to transpile the babely babel stuff in-memory rather than with a dist folder.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "args": [
                "${workspaceRoot}/src/index.js"
            ],
            "restart": true,
            "protocol": "inspector",
            "stopOnEntry": false,
            "runtimeArgs": [
                "--nolazy",
                "--require",
                "@babel/register"
            ],
            "sourceMaps": true
        }
    ]
}

From here you should be able to hit F5 with a breakpoint in place and have it hit that.

Webstorm

In webstorm the easiest way to do this is to open the index.js and use a right click Debug File. This will give you a configuration in the config manager.

In there it will end up looking like

In the Node parameters field add

--nolazy --require @babel/register

Make sure the configuration is saved, close the dialog and hit the little red debug button with a breakpoint added.

Bonus

next few tips are just to finish the boiler plate off

I personally like using commitizen to make sure there is a structure to my commits this allows a number of other things to be done at a later stage. Start by adding the dependencies.

$ npm i --save-dev commitizen cz-conventional-changelog

Next add the following section to the bottom of the package.json

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

Then add the following to the "script"section of the package.json file:

    "cm": "git add -A && git cz",

Next to stop us committing a load of rubbish that we don't need create a file in the root directory called .gitignore add the following into it.

node_modules/
.idea/
.vscode/
dist/

.env

This will stop the directories being added to source control as we don't want them up there.

Finally you can run

$ npm run cm

This will add all the files to git staging and trigger the commitizen template and ask you a number of questions about the commit.

? Select the type of change that you're committing: (Use arrow keys)
> feat:        A new feature
  fix:         A bug fix
  improvement: An improvement to a current feature
  docs:        Documentation only changes
  style:       Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor:    A code change that neither fixes a bug nor adds a feature
  perf:        A code change that improves performance

This will allow you to enter details about the commit and push if you need to.

Round up

Ok so after alllllllll this you should be able to debug ES6 javascript in Vscode and Webstorm. If thrown together a repo on github with all the files in.
https://github.com/AndrewAllison/babel-es6-debugging andy feedback is much appreciated.

Postgres, Docker and Windows

Andy Allison — Thu, 17 Oct 2019 17:09:53 +0000

This has had me tearing my hair out for a fair old chunk of time.

The main issue was I wanted to spin up a simple container with postgres in it for a little dev project I'm playing with. Historically I've used Heroku but I wanted to be a good modern dev and slam some containers about the boat.

The initial article I found had a few decent bits in it but I did run into issues straight away.

The first one was that I needed to sort the Docker for windows sharing out.

Docker Settings (TaskBar Tray) > Resources > File Sharing > C:
This then requested my admin user and password to allow permissions.

Next I set up the docker-compose.yml file. This in itself caused a number of permissions problems.

version: "3"
services:
#  Create a service named db.
  db:
#   Use the Docker Image postgres. This will pull the newest release.
    image: "postgres"
#   Give the container the name my_postgres. You can changes to something else.
    container_name: "localpg"
#   Setup the username, password, and database name. You can changes these values.
    environment:
      - POSTGRES_USER=john
      - POSTGRES_PASSWORD=pwd0123456789
      - POSTGRES_DB=mydb
#   Maps port 54320 (localhost) to port 5432 on the container. You can change the ports to fix your needs.
    ports:
      - "54320:5432"
#   Set a volume some that database is not lost after shutting down the container.
#   I used the name postgres-data but you can changed it to something else.
    volumes:
      - postgresql-volume:/var/lib/postgresql/data
volumes: 
  postgresql-volume:
    external: true

The main errors being

Data page checksums are disabled.

fixing permissions on existing directory /var/lib/postgresql/data ... ok
creating subdirectories ... ok
selecting dynamic shared memory implementation ... posix
selecting default max_connections ... 20
selecting default shared_buffers ... 400kB
selecting default time zone ... Etc/UTC
creating configuration files ... ok
2019-10-17 16:09:15.251 UTC [77] FATAL:  data directory "/var/lib/postgresql/data" has wrong ownership
2019-10-17 16:09:15.251 UTC [77] HINT:  The server must be started by the user that owns the data directory.
child process exited with exit code 1
initdb: removing contents of data directory "/var/lib/postgresql/data"

What I found with this was you needed to create a volume for docker as it just doesn't seem to play nice with the windows file system at its rawest.

This involved running this command.

$ docker volume create --name=postgresql-volume

And making sure this was in my compose file

volumes: 
  postgresql-volume:
    external: true