<commit_before>import React, { useState, useEffect } from "react";
import getConfig from "next/config";

import withErrors from "../components/hoc/with-errors";

import { getAllAPIs } from "../utils/api";

import Page from "../layouts/page";

import ApiCard from "../components/api-card";
import APISearchBar from "../components/api-search-bar";

import colors from "../styles/colors";

import { normaliseStr } from "../utils/normalize";

const { publicRuntimeConfig } = getConfig();
const SITE_DESCRIPTION =
  publicRuntimeConfig.SITE_DESCRIPTION || "Le site qui simplifie le partage et la circulation des données administratives";

function Home({ q, filter, apiList }) {
  const [filteredList, setFilteredList] = useState(apiList);

  useEffect(() => {
    if (filter) {
      const filteredList = apiList.filter(api => {
        const normalizeKeywords = api.keywords.map(k => normaliseStr(k));
        return normalizeKeywords.includes(normaliseStr(filter));
      });

      setFilteredList(filteredList);
    }
  }, [filter]);

  return (
    <Page>
      <section id="mission-statement">
        <div className="header-with-image">
          <img
            className="nav__logo"
            src="/images/api.gouv.fr.svg"
            alt="Logo de api.gouv.fr"
          />
          <div className='baseline'>
            <h2 className="ui header">{SITE_DESCRIPTION}</h2>
            <APISearchBar q={q} list={apiList} />
          </div>
        </div>
      </section>

      <section id="apis">
        <div className="ui container">
          <div className="ui three stackable cards">
            {filteredList.length > 0 ? (
              filteredList.map(api => <ApiCard key={api.title} {...api} />)
            ) : (
              <div className="ui big warning message">
                <div className="header">Aucune API n’a pu être trouvée</div>
                Aucun résultat avec le filter: <b>{filter}</b>
              </div>
            )}
          </div>
        </div>
      </section>

      <style jsx>{`
        #mission-statement {
          padding-top: 4em;
          padding-bottom: 4em;
        }

        .header-with-image {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }

        .header-with-image img {
          margin-bottom: 1em;
          width: 350px;
        }

        .baseline {
          max-width: 450px;
          text-align: center;
        }

        .baseline h2 {
          margin-bottom: 1.5em;
        }

        section {
          padding: 4em 0;
        }

        section#apis {
          background: ${colors.backgroundBlue};
        }

        @media (max-width: 768px) {
          #mission-statement {
            padding: 4em 2em;
          }

          .header-with-image img {
            width: 250px;
          }
        }
      `}</style>
    </Page>
  );
}

Home.getInitialProps = async req => {
  const { q, filter } = req.query;
  const apiList = await getAllAPIs();

  return {
    q,
    filter,<commit_msg>Add externals links to home bottom<commit_after>import React, { useState, useEffect } from "react";
import getConfig from "next/config";

import withErrors from "../components/hoc/with-errors";

import { getAllAPIs } from "../utils/api";

import Page from "../layouts/page";

import ApiCard from "../components/api-card";
import APISearchBar from "../components/api-search-bar";
import ButtonLink from "../components/ui/button-link";

import colors from "../styles/colors";

import { normaliseStr } from "../utils/normalize";

const { publicRuntimeConfig } = getConfig();
const SITE_DESCRIPTION =
  publicRuntimeConfig.SITE_DESCRIPTION ||
  "Le site qui simplifie le partage et la circulation des données administratives";

function Home({ q, filter, apiList }) {
  const [filteredList, setFilteredList] = useState(apiList);

  useEffect(() => {
    if (filter) {
      const filteredList = apiList.filter(api => {
        const normalizeKeywords = api.keywords.map(k => normaliseStr(k));
        return normalizeKeywords.includes(normaliseStr(filter));
      });

      setFilteredList(filteredList);
    }
  }, [filter]);

  return (
    <Page>
      <section id="mission-statement">
        <div className="header-with-image">
          <img
            className="nav__logo"
            src="/images/api.gouv.fr.svg"
            alt="Logo de api.gouv.fr"
          />
          <div className="baseline">
            <h2 className="ui header">{SITE_DESCRIPTION}</h2>
            <APISearchBar q={q} list={apiList} />
          </div>
        </div>
      </section>

      <section id="apis">
        <div className="ui container">
          <div className="ui three stackable cards">
            {filteredList.length > 0 ? (
              filteredList.map(api => <ApiCard key={api.title} {...api} />)
            ) : (
              <div className="ui big warning message">
                <div className="header">Aucune API n’a pu être trouvée</div>
                Aucun résultat avec le filter: <b>{filter}</b>
              </div>
            )}
          </div>
        </div>
      </section>

      <section>
        <div className="ui container links">
          <div>
            <h3>Vous ne trouvez pas l’API dont vous avez besoin ?</h3>
            <ButtonLink href="mailto:<EMAIL>?subject=Demande%20d%27une%20nouvelle%20API">
              Demander une API
            </ButtonLink>
          </div>
          <div>
            <h3>Vous voulez partager une API ?</h3>
            <ButtonLink
              href="https://github.com/betagouv/api.gouv.fr/blob/master/CONTRIBUTING.md#ajouter-une-api"
              alt
            >
              Partager votre API
            </ButtonLink>
          </div>
        </div>
      </section>

      <style jsx>{`
        #mission-statement {
          padding-top: 4em;
          padding-bottom: 4em;
        }

        .header-with-image {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }

        .header-with-image img {
          margin-bottom: 1em;
          width: 350px;
        }

        .baseline {
          max-width: 450px;
          text-align: center;
        }

        .baseline h2 {
          margin-bottom: 1.5em;
        }

        section {
          padding: 4em 0;
        }

        section#apis {
          background: ${colors.backgroundBlue};
        }

        .links {
          display: flex;
          justify-content: space-between;
          flex-flow: wrap;
        }

        @media (max-width: 768px) {
          #mission-statement {
            padding: 4em 2em;
          }

          .header-with-image img {
            width: 250px;
          }

          .links > div:first-child {
            margin-bottom: 2em;
          }
        }
      `}</style>
    </Page>
  );
}

Home.getInitialProps = async req => {
  const { q, filter } = req.query;
  const apiList = await getAllAPIs();

  return {
    q,
    filter,
{'fraction_non_alphanumeric': 0.12945166760881854, 'fraction_numerical': 0.008903335217637084, 'mean_word_length': 1.7579890880748246, 'pattern_counts': {'":': 0, '<': 74, '<?xml version=': 0, '>': 87, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2523841', 'n_tokens_mistral': 2149, 'n_tokens_neox': 2053, 'n_words': 469}