init

.github/workflows/release.yml

@@ -0,0 +1,39 @@
+name: Release
+
+on:
+    push:
+        tags:
+            - '*'
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v3
+
+            - name: Setup node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version-file: '.nvmrc'
+                  cache: npm
+
+            - name: Install Dependencies
+              run: yarn
+
+            - name: Build Package
+              run: yarn build
+
+            - name: Tar files
+              run: tar -czf local-addon-search-project_${{ github.ref_name}}.tar.gz *
+
+            - name: Cleanning.
+              run: yarn clean
+
+            - name: Release
+              uses: softprops/action-gh-release@v1
+              if: startsWith(github.ref, 'refs/tags/')
+              with:
+                  generate_release_notes: true
+                  files: |
+                    local-addon-search-project_${{ github.ref_name}}.tar.gz

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+/lib/
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+16

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WPEngine, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+	preset: 'ts-jest',
+	setupFilesAfterEnv: ['jest-extended'],
+	moduleNameMapper: {
+		'^@getflywheel/local/main': '<rootDir>/src/test/mockLocalMain.ts',
+	},
+};

package.json

@@ -0,0 +1,113 @@
+{
+  "name": "dekode-local-addon",
+  "productName": "LocalWP Search project",
+  "version": "1.0.0",
+  "author": "Jørgen Stenshaugen && Lukasz Biedroń",
+  "keywords": [
+    "local-addon",
+    "loocalwp",
+    "search",
+    "flywheel"
+  ],
+  "bgColor": "#51bb7b",
+  "icon": "icon.svg",
+  "slug": "local-addon-search-project",
+  "description": "Add possibility to search for a project",
+  "renderer": "lib/renderer.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/getflywheel/local-addon-boilerplate"
+  },
+  "bugs": {
+    "url": "https://github.com/getflywheel/local-addon-boilerplate/issues"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "yarn build-main && yarn build-renderer",
+    "build-main": "tsc",
+    "watch-main": "tsc --watch",
+    "build-renderer": "yarn webpack --config webpack.config.js",
+    "watch-renderer": "yarn build-renderer --watch",
+    "clean": "rm -rf lib node_modules",
+    "prepare": "yarn run build",
+    "lint": "eslint .",
+    "test": "yarn jest src/**/*.test.ts",
+    "test:watch": "yarn test --watch"
+  },
+  "devDependencies": {
+    "@getflywheel/eslint-config-local": "1.0.4",
+    "@getflywheel/local": "^6.2.0",
+    "@electron/remote":"^2.0.8",
+    "@types/classnames": "^2.2.9",
+    "@types/dateformat": "^3.0.1",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.14.35",
+    "@types/react": "^16.9.41",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.9",
+    "@typescript-eslint/eslint-plugin": "^4.7.0",
+    "@typescript-eslint/parser": "^4.7.0",
+    "babel-loader": "^8.1.0",
+    "eslint": "^7.13.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-react": "^7.11.1",
+    "jest": "^26.4.2",
+    "jest-extended": "^0.11.5",
+    "mock-fs": "^4.13.0",
+    "react-svg-loader": "^3.0.3",
+    "ts-jest": "^26.3.0",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.5",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12"
+  },
+  "resolutions": {
+    "@types/react": "^16.9.41"
+  },
+  "peerDependencies": {
+    "react": ">= 16.4.0",
+    "react-dom": ">= 16.4.0",
+    "react-router-dom": "^4.3.1"
+  },
+  "dependencies": {
+    "@getflywheel/local-components": "^17.2.1",
+    "@reduxjs/toolkit": "^1.4.0",
+    "classnames": "^2.2.6",
+    "dateformat": "^3.0.3",
+    "fs-extra": "^9.0.1",
+    "glob-escape": "^0.0.2",
+    "lodash": "^4.17.20",
+    "md5": "^2.3.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.1.2",
+    "recursive-readdir": "^2.2.2"
+  },
+  "bundledDependencies": [
+    "@getflywheel/local-components",
+    "classnames",
+    "dateformat",
+    "fs-extra",
+    "glob",
+    "glob-escape",
+    "lodash",
+    "md5",
+    "prop-types",
+    "react-redux",
+    "react-router-navigation-prompt",
+    "recursive-readdir",
+    "redux"
+  ],
+  "files": [
+	"lib/**/*",
+	"vendor/**/*",
+	"icon.svg",
+	"style.css"
+  ],
+  "engines": {
+    "local-by-flywheel": "^6.4.3"
+  }
+}

src/SitesSidebarSearch.jsx

@@ -0,0 +1,88 @@
+import {
+	BasicInput,
+	Close
+} from '@getflywheel/local-components';
+
+import React, { Component } from 'react';
+import { ipcRenderer } from 'electron';
+
+export default class SitesSidebarSearch extends Component {
+	constructor (props) {
+		super(props);
+
+		this.state = {
+			search: '',
+			sites: null,
+			siteFound: '',
+		};
+	}
+
+	componentDidUpdate (previousProps, prevState) {
+		ipcRenderer.once('render-search', (event, value) => {
+			this.setState({ search: value });
+		});
+
+		if (this.state.search && this.state.sites && prevState.search !== this.state.search) {
+			if (this.state.search?.length < 2) {
+				return;
+			}
+
+			const currentSites = this.state.sites;
+			const sitesArray = Object.values(currentSites);
+
+			let siteSearch = '';
+			sitesArray.forEach((site) => {
+				if (site?.name?.toLowerCase().includes(this.state?.search?.toLowerCase())) {
+					if (prevState.siteFound !== site.name) {
+						siteSearch = site.name;
+						return;
+					}
+				}
+			});
+
+			if (siteSearch) {
+				this.setState({
+					siteFound: siteSearch,
+				});
+			}
+		}
+	}
+
+	componentDidMount() {
+		ipcRenderer.send('fetch-sites');
+
+		ipcRenderer.once('get-sites', (event, value) => {
+			this.setState({ sites: value });
+		});
+	}
+
+	handleSearch( value ) {
+		this.setState({ search: value });
+	}
+
+	// Add search functionality to the sidebar
+	render () {
+		return (
+			<div className="site-search">
+				<BasicInput
+					minlength={2}
+					placeholder="Search for a site..."
+					value={this.state.search}
+					onChange={ (e) => this.setState({ search: e.target.value }) }
+				/>
+				{ this.state.search?.length > 2 && (
+					<>
+						<style>
+							{ `
+								nav a:not([data-site-name="${this.state.siteFound}"]) {
+									display: none;
+								}
+							` }
+						</style>
+						<Close onClick={() => this.setState({ search: '' })} />
+					</>
+				) }
+			</div>
+		);
+	}
+}

src/renderer.tsx

@@ -0,0 +1,14 @@
+import path from 'path';
+import SitesSidebarSearch from './SitesSidebarSearch';
+
+export default async function (context) {
+	const { React, hooks } = context;
+
+	const stylesheetPath = path.resolve(__dirname, '../style.css');
+	hooks.addContent('stylesheets', () => <link rel="stylesheet" key="dekode-styleesheet" href={stylesheetPath} />);
+	/**
+	 * Add search to sidebar.
+	 */
+	hooks.addContent('SitesSidebar_SiteList:Before', () => <SitesSidebarSearch key="siteinfo" />);
+
+}

style.css

@@ -0,0 +1,24 @@
+.site-search {
+	position: relative;
+	margin-top: 15px;
+	border-bottom: 2px solid #434344;
+}
+
+
+.site-search [class^="ButtonBase_"] {
+	position: absolute;
+	top: 14px;
+	right: 17px;
+}
+
+.site-search [class^="ButtonBase_"] svg {
+	width: 12px;
+	height: 12px;
+}
+
+
+.site-search .BasicInput input {
+	padding: 12px 8px;
+	border-radius: 2px;
+	pointer-events: all;
+}

tsconfig.json

@@ -0,0 +1,31 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": false,
+		"declaration": false,
+		"esModuleInterop": true,
+		"experimentalDecorators": true,
+		"jsx": "react",
+		"lib": ["es2017", "esnext.asynciterable", "dom"],
+		"module": "commonjs",
+		"noImplicitReturns": true,
+		"noImplicitAny": false,
+		"outDir": "./lib",
+		"resolveJsonModule": true,
+		"rootDir": "./src",
+		"typeRoots": ["./types", "./node_modules/@types"],
+		"sourceMap": true,
+		"strict": false,
+		"target": "es2015"
+	},
+	"exclude": [
+		"node_modules",
+		"src/**/*.test.ts",
+		"src/test",
+		"src/renderer",
+		"src/renderer.tsx"
+	],
+	"include": [
+		"src"
+	]
+}

types/global-fetch/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Apollo / TypeScript 3.6 hack
+ *
+ * @see https://github.com/apollographql/apollo-link/issues/1131
+ */
+ declare type GlobalFetch = WindowOrWorkerGlobalScope;
+
+