parent
7f8e5dd903
commit
fdebcbea74
@ -0,0 +1,7 @@
|
||||
/*
|
||||
* Replace this with your own classes
|
||||
*
|
||||
* e.g.
|
||||
* .container {
|
||||
* }
|
||||
*/
|
||||
@ -0,0 +1,69 @@
|
||||
import axios from "axios";
|
||||
import delve from 'dlv';
|
||||
|
||||
import {environment} from "../../environments/environment";
|
||||
import SeoConfig from "../../components/seo-config/seo-config";
|
||||
import Layout from "../../components/layout/layout";
|
||||
import CardBlog from "../../components/card-blog/card-blog";
|
||||
import BlogSearch from "../../components/blog-search/blog-search";
|
||||
import Categories from "../../components/categories/categories";
|
||||
import styles from './index.module.scss';
|
||||
import {useSelector} from "react-redux";
|
||||
import {selectSearchState} from "../../store/searchSlice";
|
||||
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`)
|
||||
const posts = await axios.get(`${environment.strapiApiUrl}/articles?populate=deep&_sort=date:DESC`)
|
||||
return {
|
||||
props: {
|
||||
categories: delve(categories, 'data.data', []),
|
||||
lastPublished: delve(posts, 'data.data', []),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function Search({menuHeader, menuFooter, seo, categories, lastPublished}) {
|
||||
const {results} = useSelector(selectSearchState);
|
||||
return (
|
||||
<>
|
||||
<SeoConfig {...seo} />
|
||||
<Layout menuHeader={menuHeader}
|
||||
menuFooter={menuFooter}
|
||||
headerTransparent={true}>
|
||||
<main className={styles['blog-container'] + " w-full lg:my-10"}>
|
||||
<section className="container max-w-screen-xl mx-auto relative flex">
|
||||
<section className="grow lg:basis-4/6 mx-2 lg:mx-0 lg:pr-5">
|
||||
<h3 className="text-2xl font-bold mb-5">Résultats de la recherche</h3>
|
||||
{Array.isArray(results) && results.length === 0 && (<p>Il n'y a aucun résultat.</p>)}
|
||||
{Array.isArray(results) && results.length > 0 && results.map((post: any, index: number) => (
|
||||
<CardBlog key={'card-blog-' + post.id + index}
|
||||
item={{
|
||||
attributes: {
|
||||
...post,
|
||||
image: {
|
||||
data: {
|
||||
attributes: {...post.image}
|
||||
}
|
||||
},
|
||||
category: {
|
||||
data: {
|
||||
attributes: {...post.category}
|
||||
}
|
||||
}
|
||||
}
|
||||
}} />))
|
||||
}
|
||||
</section>
|
||||
<aside className="grow lg:basis-2/6">
|
||||
<BlogSearch />
|
||||
<Categories items={categories} />
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Search;
|
||||
@ -0,0 +1,47 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import {HYDRATE} from "next-redux-wrapper";
|
||||
|
||||
import {AppState} from "./store";
|
||||
|
||||
export interface SearchState {
|
||||
results: object[];
|
||||
}
|
||||
|
||||
// Initial state
|
||||
const initialState: SearchState = {
|
||||
results: [],
|
||||
};
|
||||
|
||||
// Actual Slice
|
||||
// @ts-ignore
|
||||
export const searchSlice = createSlice({
|
||||
name: "search",
|
||||
initialState,
|
||||
reducers: {
|
||||
|
||||
// Action to set the authentication status
|
||||
setSearchState(state, action) {
|
||||
// @ts-ignore
|
||||
state.results = action.payload;
|
||||
},
|
||||
|
||||
// Special reducer for hydrating the state. Special case for next-redux-wrapper
|
||||
extraReducers: {
|
||||
// @ts-ignore
|
||||
[HYDRATE]: (state, action) => {
|
||||
return {
|
||||
...state,
|
||||
// @ts-ignore
|
||||
...action.payload.search,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
export const {setSearchState} = searchSlice.actions;
|
||||
|
||||
export const selectSearchState = (state: AppState) => state.search;
|
||||
|
||||
export default searchSlice.reducer;
|
||||
@ -0,0 +1,22 @@
|
||||
import {Action, configureStore, ThunkAction} from "@reduxjs/toolkit";
|
||||
import {searchSlice} from "./searchSlice";
|
||||
import {createWrapper} from "next-redux-wrapper";
|
||||
|
||||
const makeStore = () =>
|
||||
configureStore({
|
||||
reducer: {
|
||||
[searchSlice.name]: searchSlice.reducer,
|
||||
},
|
||||
devTools: true,
|
||||
});
|
||||
|
||||
export type AppStore = ReturnType<typeof makeStore>;
|
||||
export type AppState = ReturnType<AppStore["getState"]>;
|
||||
export type AppThunk<ReturnType = void> = ThunkAction<
|
||||
ReturnType,
|
||||
AppState,
|
||||
unknown,
|
||||
Action
|
||||
>;
|
||||
|
||||
export const wrapper = createWrapper<AppStore>(makeStore);
|
||||
Loading…
Reference in new issue