- [Context Code](#context-code)
- [Usage](#usage)

----

## Context Code
The context is used to store the previous path. This is done by watching the routing path (`router.asPath` for NextJS) and updating the context state when it changes. It is initialized to `undefined` and the current path is stored in a mutable ref so that it can be stored when the path changes.

> File: `src/contexts/RoutingContext.tsx`
```tsx
import { useRouter } from 'next/router';
import React, { ReactNode, useEffect, useRef, useState } from 'react';

export type RoutingContextState = {
  previousPath?: string;
};

export const DEFAULT_ROUTING_CONTEXT_VALUE: RoutingContextState = {
  previousPath: undefined,
};

export const RoutingContext = React.createContext(
  DEFAULT_ROUTING_CONTEXT_VALUE,
);

export type RoutingContextWrapperProps = {
  children: ReactNode;
};

export const RoutingContextWrapper = ({
  children,
}: RoutingContextWrapperProps) => {
  const router = useRouter();

  const [previousPath, setPreviousPath] = useState<string>();
  const currentPath = useRef<string>();

  useEffect(() => {
    setPreviousPath(currentPath.current);
    currentPath.current = router.asPath;
  }, [router.asPath]);

  return (
    <RoutingContext.Provider
      value={{
        previousPath,
      }}
    >
      {children}
    </RoutingContext.Provider>
  );
};

export default RoutingContext;
```

## Usage

First wrap your app/page with the context. In NextJS this is done in `pages/_app.tsx`:
```tsx
...

function AppName<P>({ Component, pageProps }: AppNameProps<P>) {
  return (
    <RoutingContextWrapper>
      <Head>
        <title>{APP_NAME}</title>
      </Head>
      <Component {...pageProps} />
    </RoutingContextWrapper>
  );
}

...
```

Then, where ever the previous path is needed, it can be retreived from the context:

```typescript
const { previousPath } = useContext(RoutingContext);
```




Tracking the Previous Page using React Context


- [Quick Notes](#quick-notes)
- [Examples](#examples)
  - [Set the initial Mode](#set-the-initial-mode)
  - [Toggling the Mode](#toggling-the-mode)
  - [Hook Tracking the Mode in state using a `MutationObserver`](#hook-tracking-the-mode-in-state-using-a-mutationobserver)
  - [Applying Styles Using CSS Variables](#applying-styles-using-css-variables)
  - [Applying Styles Directly in CSS/SCSS Modules](#applying-styles-directly-in-cssscss-modules)
- [References](#references)

----

## Quick Notes
- Use global class to indicate when dark mode is enabled
- For SPAs, the global class can be applied at the root component level
- For NextJS, set the global class on the body in the `_document.tsx`
- When using [styled components](https://styled-components.com/), leverage the `ThemeProvider`
- Set the default dark/light mode based on the `prefers-color-scheme` media query to honor user's preference
  - See related: [Using Users' Preferences for Dark Mode](/posts/detecting-dark-mode)
- When the mode is changed, store the user's selection in [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)


## Examples
### Set the initial Mode
```typescript
// Constants for the dark mode CSS class and local storage key
export const DARK_MODE_CLASS = 'dark_mode';
export const DARK_MODE_STORAGE_KEY = 'dark_mode';
```

```typescript
if (
  localStorage?.getItem(DARK_MODE_STORAGE_KEY}) ??
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  document.body.classList.add(DARK_MODE_CLASS);
}
```

To ensure this happens as early as possible in NextJS:
> File: `_document.tsx`
```tsx
class CustomDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
          <Script id="dark_mode_init" strategy="afterInteractive">
            {`
            if (
              localStorage?.getItem('${DARK_MODE_STORAGE_KEY}') ??
              window.matchMedia('(prefers-color-scheme: dark)').matches
            ) {
              document.body.classList.add('${DARK_MODE_CLASS}');
            }
            `}
          </Script>
        </body>
      </Html>
    );
  }
}
```

### Toggling the Mode
```typescript
// Constants for the dark mode CSS class and local storage key
export const DARK_MODE_CLASS = 'dark_mode';
export const DARK_MODE_STORAGE_KEY = 'dark_mode';
```

```typescript
export function toggleDarkMode() {
  if (document.body.classList.contains(DARK_MODE_CLASS)) {
    document.body.classList.remove(DARK_MODE_CLASS);
    localStorage?.setItem(DARK_MODE_STORAGE_KEY, '');
  } else {
    document.body.classList.add(DARK_MODE_CLASS);
    localStorage?.setItem(DARK_MODE_STORAGE_KEY, 'true');
  }
}
```

### Hook Tracking the Mode in state using a `MutationObserver`
```typescript
export default function useIsDarkMode() {
  const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

  useEffect(() => {
    const observer = new MutationObserver(() => {
      setIsDarkMode(document.body.classList.contains(DARK_MODE_CLASS));
    });
    observer.observe(document.body, {
      attributes: true,
      attributeFilter: ['class'],
      characterData: false,
      childList: false,
      subtree: false,
    });

    // Set the initial value
    // For NextJS this has to be done within the effect since
    // it must be run client side - for SSR projects it can be done
    // in the state initialization
    setIsDarkMode(document.body.classList.contains(DARK_MODE_CLASS));

    return () => {
      observer.disconnect();
    };
  }, []);

  return isDarkMode;
}
```

### Applying Styles Using CSS Variables
```css
body {
  --background-color: #ffffff;
  --text-color: #000000;

  /**
   * The variables can be used anywhere below body
   * (even in components using css modules)
   */
  color: var(--text-color);
  background-color: var(--background-color);
}

body.dark_mode {
  --background-color: #000000;
  --text-color: #ffffff;
}
```

### Applying Styles Directly in CSS/SCSS Modules
```css
.my_component {
  // Light mode styles
  background-color: #ffffff;
  color: #000000;
}

:global(body.dark_mode) {
  .my_component {
    /** Dark mode styles */
    background-color: #ffffff;
    color: #000000;
  }
}
```

## References
-  [MDN Docs - Using CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-  [NextJS Docs - Scripts: `afterInteractive`](https://nextjs.org/docs/basic-features/script#afterinteractive)
-  [styled components Docs - Theming](https://styled-components.com/docs/advanced)

Dark Mode Toggle in React

- [Summary of the Approach](#summary-of-the-approach)
- [An example using Prisma](#an-example-using-prisma)
- [Other Ideas and Considerations](#other-ideas-and-considerations)
  - [Using a Base Table](#using-a-base-table)
  - [Using an ORM](#using-an-orm)
  - [Indexed Search](#indexed-search)
- [References](#references)

----

One of the projects I am currently working on uses [Prisma](https://www.prisma.io/) as an ORM. The project requires a search feature as well as a feature where there is a feed of changed items. As Prisma doesn't have a built in concept for handling these types of scenarios, I've investigated options to come up with an approach that best works for the project.

The main approach discussed here avoids using the ORM itself and is the one that I went forward with but the later section [Using an ORM](#using-an-orm) covers some ideas for tackling it within an ORM itself.

## Summary of the Approach
- Create a type for the result/feed items (e.g. `SearchResult` / `ActivityItem`)
- Use raw SQL with `UNION` to query tables for common/like fields in the same operation (table sub queries need matching # columns for `UNION` to work)
- Include a field in each table sub query to indicate the type
- Load results as the created type(s)

**Pros**
- Single DB operation
- Paging / ordering is done across tables/models

**Cons**
- It can be awkward to include data specific to individual tables/models as unapplicable rows will require an empty field in their place
- If an ORM is being used, it may not be supported or require extra effort and code that is inconsistent with the code base

## An example using Prisma
This example should work for any case that an ORM isn't used or when the ORM allows for raw queries. Prisma allows for raw SQL queries to be performed using the `prisma.$queryRaw()` function - this can be subtitled with any raw query options.

For this example, I'll use an application that has companies, users, and notes (for companies) that are searchable.

```
+--------------------------+
|          Company         |
+--------------------------+
| - id          (string)   |
| - name        (string)   |
| - createdAt   (datetime) |
| - updatedAt   (datetime) |
+--------------------------+

+--------------------------+
|           User           |
+--------------------------+
| - id          (string)   |
| - firstName   (string)   |
| - lastName    (string)   |
| - createdAt   (datetime) |
| - updatedAt   (datetime) |
+--------------------------+

+--------------------------+
|           Note           |
+--------------------------+
| - id          (string)   |
| - title       (string)   |
| - companyId   (string)   |
| - createdAt   (datetime) |
| - updatedAt   (datetime) |
+--------------------------+
```

1. Create a type for the results
    ```typescript
    type SearchResult = {
      entityType: EntityType;
      entityId: string;
      title: string;
      createdAt: Date;
      updatedAt: string;
    };
    ```

2. Create a search function
    ```typescript
    /**
     * Search for companies, users, and notes based on their name/title
    * @param {string} search The search query to match
    * @param {number} pageNumber The page to return
    * @param {number} pageSize The number of results to include per-page
    * @returns {Promise<SearchResult[]>} A promise for the array of search results
    */
    export default function search(
      searchQuery: string,
      pageNumber: number = 0,
      pageSize: number= 10,
    ) {
      return prisma.$queryRaw<SearchResult[]>(Prisma.sql`
        SELECT
            'COMPANY' as entityType,
            id as entityId,
            name as title,
            createdAt,
            updatedAt
          FROM Company
          WHERE name LIKE '%${searchQuery}%'
        UNION
        SELECT
            'USER' as entityType,
            id as entityId,
            CONCAT(firstName, ' ', lastName) as title,
            createdAt,
            updatedAt
          FROM User
          WHERE
            firstName LIKE '%${searchQuery}%'
            OR
            lastName LIKE '%${searchQuery}%'
        UNION
        SELECT
            'NOTE' as entityType,
            id as entityId,
            title,
            createdAt,
            updatedAt
          FROM Note
          WHERE title LIKE '%${searchQuery}%'
        ORDER BY updatedAt DESC
        LIMIT ${pageSize}
        OFFSET ${pageSize * pageNumber}
      `);
    }
    ```
    *(Note: This example is using `LIKE` with wild cards, for better search results consider using full-text search - see [Prisma Docs](https://www.prisma.io/docs/concepts/components/prisma-client/full-text-search), [MySQL Docs](https://dev.mysql.com/doc/refman/8.0/en/fulltext-natural-language.html), [PostgreSQL Docs](https://www.postgresql.org/docs/current/textsearch.html))*
3. Use the search as needed
    ```typescript
    // Get the search query and page number from the request
    const searchResults = await search(searchQuery, pageNumber);
    // Serialize / return the results to the frontend for display
    ```
When displaying the data, the `entityType` property can be used to indicate the type of result and link to it accordingly.

For paging, you'll likely need the total results in order to determine the number of pages. This can be done with a query such as the following:

```typescript
prisma.$queryRaw<number>(Prisma.sql`
  SELECT (
    SELECT COUNT(*)
    FROM Company
    WHERE name LIKE '%${searchQuery}%'
  ) + (
    SELECT  COUNT(*)
    FROM User
    WHERE
      firstName LIKE '%${searchQuery}%'
      OR
      lastName LIKE '%${searchQuery}%'
  ) + (
    SELECT COUNT(*)
    FROM Note
    WHERE title LIKE '%${searchQuery}%'
  ) AS totalResults
`);
```

Both the total and the results can be retrieved in a single transaction if required, for Prisma this is done by using `prisma.$transaction()`:
```typescript
const [totalResults, searchResults] = await prisma.$transaction([
  prisma.$queryRaw<number>(Prisma.sql`/** The count query */`),
  prisma.$queryRaw<SearchResult[]>(Prisma.sql`/** The search query  */`),
]);

```

## Other Ideas and Considerations

### Using a Base Table
If all items being searched have a common base (e.g. Movies, Shows, Songs could be considered "Media"), they can be consolidated in a single table that has the common fields (title, release date, length, etc.) along with a `type` field. This would allow for searching the single table, though other considerations would need to be made, depending on the application:
- How to handle item specific fields
  - JSON field?
  - Separate linked tables?
- What if a item with fewer common fields needs to be added in the future such as a Book?

### Using an ORM
When first considering approaches using Prisma, one of the original ideas I had was to search each model using the ORM and paginate that, for example:

```typescript
async function searchVideos(search: string, page: number, pageSize: number) {
  // Query Movies
  const [totalMovies, movies] = await prisma.$transaction([
    prisma.movie.count({
      where: {
        name: {
          contains: search,
        },
      },
    }),
    prisma.movie.findMany({
      where: {
        name: {
          contains: search,
        },
      },
      skip: page * pageSize,
      take: pageSize,
    }),
  ]);

  // Query Shows
  const [totalShows, shows] = await prisma.$transaction([
    prisma.shows.count({
      where: {
        name: {
          contains: search,
        },
      },
    }),
    prisma.shows.findMany({
      where: {
        name: {
          contains: search,
        },
      },
      skip: page * pageSize,
      take: pageSize,
    }),
  ]);

  return {
    movies,
    shows,
    totalMovies,
    totalShows
  }
}
```
*(Note: This specific example using `Movies` and `Shows`, is a good candidate to use a more generic `Video` or `Media` type/table as described in the above [Using a Base Table](#using-a-base-table))*

This works ok if results are being shown in separate groups where paging is being done per-type, e.g. a quick search grouped by type such as:
```
Search Results:
  Movies:
    - Movie Match 1
    - Movie Match 2
    - Movie Match 3
  TV Shows:
    - TV Show Match 1
```

If results are shown in one list and you'd like to have a consistent total page size you will need to handle manipulating the page size - dividing the page size by the number of types of items and querying more from other types when reaching the end of results for any of the types.

Another issue comes with sorting as taking equal chunks from each table does not guarantee ordering across models. For example, if you take the first 5 Movies and first 5 Shows ordered ascending by date, it is possible that the 6th movie has an earlier date than one of the Shows but is excluded since sorting is done per model.

I did end up using this approach for a quick search feature since results are being grouped by type (i.e. show the latest 5 of each type that match) but chose to go with raw queries for the full search and activity feed.


### Indexed Search
Rather than querying the tables directly, the items in them could be indexed externally for searching. This could be a separate table that is populated as data changes or using a provider such as [algolia](https://www.algolia.com/). This will help with performance with the tradeoff of maintaining the index.


## References
- [MySQL Docs - UNION Clause](https://dev.mysql.com/doc/refman/8.0/en/union.html)
- [PostgreSQL Docs - Combining Queries (UNION, INTERSECT, EXCEPT)](https://www.postgresql.org/docs/current/queries-union.html)
- [MSSQL Docs - Set Operators - UNION (Transact-SQL)](https://docs.microsoft.com/en-us/sql/t-sql/language-elements/set-operators-union-transact-sql)
- [Prisma Docs - Raw database access](https://www.prisma.io/docs/concepts/components/prisma-client/raw-database-access)

Global Search - Querying Multiple Tables for Search or Activity


When working with CSS modules, there are times global classes need to be styled. The `:global` operator does just that.

To target a single class, it can be passed as an argument to the operator:
```scss
:global(.class_name) {
  // CSS Rules for ".class_name"
}
```

This can be nested in a module class to only apply it to elements with the global class within the module e.g.:
> File: `MyComponent.module.scss`
```scss
.my_component {
  // Module rules

  :global(.class_name) {
    // These rules will be under:
    // ".MyComponent_my_component__##### .class_name"
  }
}
```

Further to this, module classes can also be nested within the global class:
> File: `MyComponent.module.scss`
```scss
.my_component {
  // Module rules

  :global(.class_name) {
    // These rules will be under:
    // ".MyComponent_my_component__##### .class_name"

    .my_component_element {
      // These rules will be under:
      // ".MyComponent_my_component__##### .class_name .MyComponent_my_component_element__#####"
    }
  }
}
```


## Multiple Classes
If there are multiple classes that need to be tarted, a `:global` block can be used:
```scss
:global {
  .this_class_is_global {
    // Some rules for ".this_class_is_global"
  }

  .this_class_is_also_global {
    // Some rules for ".this_class_is_also_global"
  }
}
```

When using `sass`, this also can be used to import another file, for example to qualify a libraries classes under a module
> File: `MyComponent.module.scss`
```scss
@use "sass:meta";

.my_component {
  :global {
    // This will qualify all imported styles as:
    // ".MyComponent_my_component_##### {library classes / selectors}"
    @include meta.load-css("library/styles/file");
  }
}
````


Global Styles in CSS Modules


- [CSS Media Query](#css-media-query)
- [JavaScript - One time check](#javascript---one-time-check)
- [JavaScript / TypeScript - Watch for color scheme preference change](#javascript--typescript---watch-for-color-scheme-preference-change)
- [React Hook](#react-hook)
- [References](#references)

----


Dark mode is available and used pretty much everywhere now. Most operating systems allow users to set their preference between light and dark mode and this can be detected in the browser.

The following are notes on how to detect users' preferences in CSS and JavaScript / TypeScript.

## CSS Media Query

For CSS, all that is required is to write your styles by default in light mode and then wrap your dark mode changes in the `@media (prefers-color-scheme: dark)` media query (Note: you can also write your styles for dark mode by default and change the query to match `light` instead to do the inverse).
```css
/** Default for light mode */
body {
  background-color: #1f1f1f;
  color: #efefef;
}

@media (prefers-color-scheme: dark) {
  /** Make background dark and text light in dark mode */
  body {
    background-color: #1f1f1f;
    color: #efefef;
  }
}
```

## JavaScript - One time check
```js
if (
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  // Dark mode
} else {
  // Light mode
}
```

## JavaScript / TypeScript - Watch for color scheme preference change
```typescript
window.matchMedia &&
window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (evt: MediaQueryListEvent) => {
    // This event fires whenever the client changes their preferred color scheme
    if (evt.matches) {
      // Dark Mode
    } else {
      // Light mode
    }
  });
```

## React Hook
**[Example on CodeSandbox](https://codesandbox.io/s/dark-mode-react-hook-3nijjf)**
>File: `usePrefersDarkMode.ts`
```typescript
import { useEffect, useState } from "react";

export default function usePrefersDarkMode() {
  const [prefersDarkMode, setPrefersDarkMode] = useState<boolean>(
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );

  useEffect(() => {
    const onPreferenceChange = (evt: MediaQueryListEvent) => {
      setPrefersDarkMode(evt.matches);
    };
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", onPreferenceChange);

    return () => {
      // Remove listener on unmount
      mediaQuery.removeEventListener("change", onPreferenceChange);
    };
  }, []);

  return prefersDarkMode;
}
```


## References

- [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)

Using Users' Preferences for Dark Mode



- [How To](#how-to)
- [References](#references)

----

We run an internal GitLab server for our projects - this is mainly to keep our cloud CI/CD costs down but it also has the added benefit of providing an easy integration with our internal k8s deployments.

Sometimes it can also be beneficial to have some repositories mirrored to GitHub (e.g. for offsite backups, cloud integrated deploys without internal access, etc.). GitLab makes this fairly easy, as it can be setup to mirror changes on each push.

## How To

1. In GitLab, Go to `Settings > Repository`
1. Expand the `Mirroring repositories` section
1. Enter `ssh://` followed by the GitHub repository SSH URL
1. Replace the `:` with `/` after `git@github.com` in the SSH URL
1. Either get the host keys and enter them manually by selecting `Input host keys manually` or click the `Detect host keys` button
1. Switch the Auth to `SSH public key`
1. Click `Mirror repository`
1. Copy the SSH public key by clicking the Clipboard icon on the added mirrored repositories row
1. Open the repository to mirror to on GitHub
1. Go to `Settings > Deploy keys`
1. Click `Add deploy key`
1. Give it a title such as `GitLab` and paste the copied key from GitLab into the `Key` field
1. Check the `Allow write access` checkbox (required for GitLab to be able to push changes to GitHub)
1. Click `Add key`

Mirroring should now be running. All changes will be pushed to GitHub when the next commit is pushed to GitLab or when the refresh button is clicked on the Mirrored repositories row in GitLab.


## References
- [GitLab Docs: Repository mirroring](https://docs.gitlab.com/ee/user/project/repository/mirror/)
- [GitHub Docs: Managing deploy keys](https://docs.github.com/en/developers/overview/managing-deploy-keys)

Mirroring a GitLab Repository to GitHub


When starting a new project there are times I'd like to overwrite the first commit (for example, removing the commit made by a bootstrap script such as `create-react-app`).

This can be achieved by running:

```bash
git rebase -i --root
```

During the interactive rebase, I usually mark all commits other than the first one as `fixup` commits and set the first one to `reword` so that I can put a message that covers all of the changes being squashed.

## References:
- [stackoverflow.com: Change first commit of project with Git? \[duplicate\]](https://stackoverflow.com/questions/2246208/change-first-commit-of-project-with-git)
- [stackoverflow.com: Squash the first two commits in Git? \[duplicate\]](https://stackoverflow.com/questions/598672/squash-the-first-two-commits-in-git)


Tracking the Previous Page using React Context

Dark Mode Toggle in React

Global Search - Querying Multiple Tables for Search or Activity

Global Styles in CSS Modules

Using Users' Preferences for Dark Mode

Mirroring a GitLab Repository to GitHub

Rebase over First Commit / Rewrite First Commit