Pinter Computing

For security reasons we should always use parameterized queries to avoid SQL injections through parameters.

The usual format is

      const query = "INSERT INTO my_table (name, description) VALUES ($2, $3)";
      const parameters = ['not_used', 'my-name', 'my-description'];

When a PostgreSQL command runs and a parameter is not used, we get the error message

error: could not determine data type of parameter $1

Solution:

Remove the unused parameter from the “parameters” array, in this case the first one.

If your Next.js React TypeScript web application uses database calls to display data on the pages, and during build time the database is not available, we need to disable the static page generation, otherwise we get the following error:

info Generating static pages
…
TypeError: Failed to parse URL from …
…
code: ‘ERR_INVALID_URL’

To disable the static page generation during build, Add the getInitialProps function to the App object in the pages/_app.tsx file.

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {

  return <Component {...pageProps} />
}

App.getInitialProps = async ({}) => {
  return {  }
}

 

If your application is in the proof of concept phase, it works and you just want to build it, you can disable the linting process to have a successful build regardless of linting errors.

• To disable TSLint for one line only, add the // @ts-ignore before the line.
• To disable TSLint on the entire file add // @ts-nocheck as the first line of the file.
• To disable ESLint during build add the DISABLE_ESLINT_PLUGIN=true environment variable to the .env file in your project root directory
• To disable ESLint during Docker image build add the ARG DISABLE_ESLINT_PLUGIN=true to the Dockerfile

The ESLint static code analysis tool flags code where we operate on objects which can be undefined.

Object is possibly ‘undefined’

The end of the red line shows the extent of the object which can be undefined, as the “children” element is defined as optional in the type definition:

To satisfy the linter, we need to add another question mark after “children” to guard against undefined values.

hashTable[parent]?.children?.push(hashTable[element.id]);

When you create an array in TypeScript the type of the first element defines the type of all elements of the array.

When we reuse an array with new data, the array type has already been defined, so when we assign new values to the same array we get the error message:

Type error: Type ‘string’ is not assignable to type ‘number’

If the array only contained one type of data during definition, all elements will be defined as that data type.

let myArray = [1, 2, 3, 4, 5];
// error: Type 'string' is not assignable to type 'number' 
myArray = ['1', '2', '3', '4', '5']; 

If the array definition contained mixed data type, the elements will be defined as “objects”.

let myArray = [1, 'a', 3, 4, 5];
// No error 
myArray = ['b', 6, 'd', 7, 'f']; 

In a TypeScript application ESLint flags code when we try to assign “null” value to string type variables and attributes. This can be necessary when we want to set the value of a database column to “null”.

To make a string type attribute nullable, add ” | null ” to the type definition:

export type Incident = {
  id: number;
  name: string;
  start_date_utc: string | null;
  end_date_utc: string | null;
  description: string;
}

If you use the VirtualTable in a React TypeScript web application ESLint will throw an error when it checks the VirtuosoTableComponents.

Error: Component definition is missing display name react/display-name

The Virtuoso component uses arrow functions to declare the Scroller and TableBody. Arrow functions do not provide the displayName property used by developer tools. We can modify the component to use function definition, which automatically provides the displayName property.

The original example

const VirtuosoTableComponents: TableComponents<Data> = {
  Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead,
  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
  TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
};

We need to add function definitions and return statements to replace the arrow functions with function definitions.

Replace

(props, ref) =>

with

function myFunctionName (props, ref) {
    return
    ...
}

The corrected code

const VirtuosoTableComponents: TableComponents<Data> = {
  Scroller: React.forwardRef<HTMLDivElement>( function myScroller (props, ref) {
    return (
    <TableContainer component={Paper} {...props} ref={ref} />
  )}),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead,
  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
  TableBody: React.forwardRef<HTMLTableSectionElement>( function myTableBody (props, ref) {
    return (
    <TableBody {...props} ref={ref} />
  )}),
};

We can use simple CSS settings to scroll cards horizontally in a container.

Apply these settings to the container <div>:

.horizontal-scrolling-container {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

• Enable the horizontal scroll bar,
• Hide the vertical scroll bar,
• Disable wrapping to force every card in one line.container
• Enable the bouncing stop at the last card on iOS.

Configure the card <div>s with this:

  .card {
    display: inline-block;
  }

• Force every card into one horizontal line.

Identity columns

There are three auto incremented identity columns types in PostgreSQL

Name	Storage	Range
SMALLSERIAL	2 bytes	1 to 32,767
SERIAL	4 bytes	1 to 2,147,483,647
BIGSERIAL	8 bytes	1 to 9,223,372,036,854,775,807

To create a new identity column use the following syntax

CREATE TABLE vehicle(
   id SERIAL PRIMARY KEY,
   name VARCHAR NOT NULL
);

In a Next.js React web application we can export functionality two ways:

• As a function definition
  export function InsertDataTest(props) {
...
}
• As an arrow function
  const SelectDataTest = () => {
...
};
export default SelectDataTest;

The two definitions have to be imported with two different syntaxes

• Use the named import for function definitions
  import { InsertDataTest } from './_insertDataTest';
• Use the default import for arrow functions
  import SelectDataTest from './_selectDataTest';

If we try to use the wrong import statement, we get the following error message: 

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Index`.

Make sure your import statement matches the definition format.