remove proptypes, fixes #888

package.json

@@ -59,7 +59,6 @@
         "pdfkit": "^0.12.1",
         "preact": "^10.5.5",
         "preact-i18n": "^2.3.0-preactx",
-        "prop-types": "^15.7.2",
         "qrcode": "^1.4.4",
         "react-instantsearch-dom": "^6.26.0",
         "react-scrollspy": "^3.4.0",
@@ -85,6 +84,7 @@
         "@types/preact-i18n": "^2.3.0-preactx",
         "@types/qrcode": "^1.4.2",
         "@types/react-instantsearch-dom": "^6.12.3",
+        "@types/react-scrollspy": "^3.3.9",
         "@typescript-eslint/eslint-plugin": "^5.15.0",
         "@typescript-eslint/parser": "^5.15.0",
         "babel-loader": "^8.0.6",

src/Components/DeprecatedModal.js

@@ -1,7 +1,6 @@
 import { render, Component } from 'preact';
 import { createPortal } from 'preact/compat';
 import t from '../Utility/i18n';
-import PropTypes from 'prop-types';
 
 // TODO: Get rid of this once we've moved everything to the new modal hook.
 export default class DeprecatedModal extends Component {
@@ -63,22 +62,6 @@ export default class DeprecatedModal extends Component {
         );
         /* eslint-enable */
     }
-
-    static propTypes = {
-        positiveButton: PropTypes.element,
-        positiveText: PropTypes.string,
-        positiveDefault: PropTypes.bool,
-        onPositiveFeedback: PropTypes.func,
-
-        negativeButton: PropTypes.element,
-        negativeText: PropTypes.string,
-        onNegativeFeedback: PropTypes.func,
-
-        onDismiss: PropTypes.func,
-        innerStyle: PropTypes.string,
-
-        children: PropTypes.node.isRequired,
-    };
 }
 
 export function showModal(modal) {

src/company-list.tsx

@@ -0,0 +1,109 @@
+import { render } from 'preact';
+import { SearchBar } from './Components/SearchBar';
+import { IntlProvider, Text } from 'preact-i18n';
+import t from './Utility/i18n';
+import { Privacy, PRIVACY_ACTIONS } from './Utility/Privacy';
+import Scrollspy from 'react-scrollspy';
+import { useEffect } from 'preact/hooks';
+
+if (!Privacy.isAllowed(PRIVACY_ACTIONS.SEARCH) && document.getElementById('aa-search-input')) {
+    const searchInput = document.getElementById('aa-search-input');
+    if (searchInput) searchInput.style.display = 'none';
+}
+
+const CompanyList = () => {
+    useEffect(() => {
+        const handleScroll = () => {
+            const controls = document.getElementById('company-list-controls');
+            if (controls) {
+                if (window.scrollY > controls.offsetTop) {
+                    controls.classList.add('sticky');
+                    document.body.classList.add('sticky-offset');
+                }
+                if (window.scrollY < controls.offsetTop + 200) {
+                    controls.classList.remove('sticky');
+                    document.body.classList.remove('sticky-offset');
+                }
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    const alphabet = '#ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+    const anchorIds = alphabet.map((x) => (x === '#' ? 'numbers' : x) + '-container');
+    const anchorLinks = alphabet.map((x) => (
+        <li>
+            <a href={'#' + (x === '#' ? 'numbers' : x)} className="no-link-decoration">
+                {x}
+            </a>
+        </li>
+    ));
+
+    return (
+        <IntlProvider scope="cdb" definition={window.I18N_DEFINITION}>
+            <div id="company-list-controls">
+                <div className="container">
+                    <div className="narrow-page">
+                        <div id="suggest-company-btn">
+                            <a
+                                className="button button-primary icon icon-letter"
+                                href={window.BASE_URL + 'suggest/#!type=new&for=cdb'}>
+                                <Text id="suggest-new" />
+                            </a>
+                        </div>
+                        <p>
+                            <Text id="explanation" />
+                        </p>
+                        <SearchBar
+                            id="aa-search-input"
+                            index="companies"
+                            anchorize={true}
+                            placeholder={t('select-company', 'cdb')}
+                            debug={true}
+                            style="margin-top: 15px;"
+                        />
+                        <Scrollspy items={anchorIds} currentClassName="active" className="textscroll" offset={-280}>
+                            {anchorLinks}
+                        </Scrollspy>
+                    </div>
+                </div>
+            </div>
+        </IntlProvider>
+    );
+};
+
+type CompanySearchProps = { filters: string[] | undefined };
+
+const CompanySearch = (props: CompanySearchProps) => (
+    <IntlProvider scope="cdb" definition={window.I18N_DEFINITION}>
+        {/* TODO: I am not sure if I realized that before but all instances of this `CompanySearch` are actually filtering by the user's country currently. I am not sure whether we want that. If we decide to keep it, we should also filter the Hugo-generated list pages. */}
+        <SearchBar
+            id="aa-search-input"
+            index="companies"
+            placeholder={t('select-company', 'cdb')}
+            debug={true}
+            style="margin-top: 15px;"
+            filters={props.filters}
+            anchorize={true}
+        />
+    </IntlProvider>
+);
+
+const companyListDiv = document.getElementById('company-list');
+if (companyListDiv) {
+    render(<CompanyList />, companyListDiv.parentElement!, companyListDiv);
+}
+const searchDiv = document.getElementById('company-search');
+if (searchDiv) {
+    const searchFilters = searchDiv.dataset.filterCategory;
+    render(
+        <CompanySearch filters={searchFilters ? ['categories:' + searchFilters] : undefined} />,
+        searchDiv.parentElement!,
+        searchDiv
+    );
+}

webpack.common.js

@@ -8,7 +8,7 @@ module.exports = {
         home: './src/home.tsx',
         generator: './src/generator.tsx',
         app: './src/app.tsx',
-        'company-list': './src/company-list.js',
+        'company-list': './src/company-list.tsx',
         'my-requests': './src/my-requests.tsx',
         'privacy-controls': './src/privacy-controls.tsx',
         'suggest-edit': './src/suggest-edit.js',

yarn.lock

@@ -1832,6 +1832,13 @@
     "@types/react" "*"
     "@types/react-instantsearch-core" "*"
 
+"@types/react-scrollspy@^3.3.9":
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/@types/react-scrollspy/-/react-scrollspy-3.3.9.tgz#d075867cb76527bfc3429bf0f343fb4bc533d9c7"
+  integrity sha512-rOi649b3M5j/AHU1vEGsXbA3LgkeiOnhrOJnPrBOjdR82d9Dao+iI0LWqqR9xjiPtFMnWWjog+w2yjuAtTvFdw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.0.9"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"