Merge remote-tracking branch 'origin/300-sortable-searchable-schemes'

Author: Phu2

src/pages/index.js

@@ -11,6 +11,7 @@ import SEO from "../components/seo"
 const IndexPage = ({ location }) => {
   const [conceptSchemes, setConceptSchemes] = useState([])
   const [language, setLanguage] = useState("")
+  const [searchTerm, setSearchTerm] = useState("")
   const { data, updateState } = useSkoHubContext()
   const { config } = getConfigAndConceptSchemes()
   const customDomain = config.customDomain
@@ -75,27 +76,59 @@ const IndexPage = ({ location }) => {
   return (
     <Layout language={language}>
       <SEO title="Concept Schemes" keywords={["conceptSchemes"]} />
+
       <div className="centerPage block">
+        {conceptSchemes.length > 4 && (
+          <div style={{ marginBottom: "20px" }}>
+            <input
+              type="text"
+              placeholder="Search concept schemes..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              style={{
+                width: "100%",
+                padding: "10px",
+                fontSize: "16px",
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+              }}
+            />
+          </div>
+        )}
         <ul>
-          {conceptSchemes.map((conceptScheme) => (
-            <li key={conceptScheme.id}>
-              <Link
-                onClick={() =>
-                  updateState({
-                    ...data,
-                    conceptSchemeLanguages: [...conceptScheme.languages],
-                    currentScheme: conceptScheme,
-                    selectedLanguage: conceptScheme.languages.includes(language)
-                      ? language
-                      : conceptScheme.languages[0],
-                  })
-                }
-                to={getFilePath(conceptScheme.id, `html`, customDomain)}
-              >
-                {getTitle(conceptScheme)}
-              </Link>
-            </li>
-          ))}
+          {conceptSchemes
+            .filter((conceptScheme) => {
+              const title = getTitle(conceptScheme)
+              return title.toLowerCase().includes(searchTerm.toLowerCase())
+            })
+            .sort((a, b) => {
+              const titleA =
+                i18n(language)(a.prefLabel || a.title || a.dc_title) || a.id
+              const titleB =
+                i18n(language)(b.prefLabel || b.title || b.dc_title) || b.id
+              return titleA.localeCompare(titleB)
+            })
+            .map((conceptScheme) => (
+              <li key={conceptScheme.id}>
+                <Link
+                  onClick={() =>
+                    updateState({
+                      ...data,
+                      conceptSchemeLanguages: [...conceptScheme.languages],
+                      currentScheme: conceptScheme,
+                      selectedLanguage: conceptScheme.languages.includes(
+                        language
+                      )
+                        ? language
+                        : conceptScheme.languages[0],
+                    })
+                  }
+                  to={getFilePath(conceptScheme.id, `html`, customDomain)}
+                >
+                  {getTitle(conceptScheme)}
+                </Link>
+              </li>
+            ))}
         </ul>
       </div>
     </Layout>