The Nextjs App for the intersect
I'll quickly use a template to create the nextjs app with basic setup
with Typescript, Tailwind support because css is boring.
git clone https://github.com/100lvlmaster/nextjs-tailwind-typescript-starter.git
cd nextjs-tailwind-typescript-starter
yarn
This will give all the required tools already setup. So that we can get the app up and running in no time
- You can use your preferred method for making a Http GET request but I'm using axios in this one.
# lib/get_search.ts
import axios, { AxiosRequestConfig } from "axios";
export const getImages = async (searchString: string) => {
const config: AxiosRequestConfig = {
params: { q: searchString },
headers: { Authorization: process.env.NEXT_PUBLIC_API_KEY },
// Authorization header we set in the server
};
const data = await axios.get(
`${process.env.NEXT_PUBLIC_API_URL}/search`,
config
);
return data.data;
};
//
- We'll also create a flash-screen component
# /components/flash_screen.tsx
import { useEffect, useState } from "react";
const FlashScreen = (props) => {
const [currImage, setImage] = useState(0);
//
const toggleImages = async (index: number, pass: number) => {
if (index < props.images.length) {
setImage(index);
await new Promise((resolve) => setTimeout(resolve, 100));
return toggleImages(++index, pass);
}
if (props.images.length < 70 && pass < 2) {
return toggleImages(0, ++pass);
}
props.onEnd();
return;
};
//
useEffect(() => {
toggleImages(0, 1);
}, []);
return (
<div className="h-screen w-full flex-grow flex flex-col justify-items-center items-center bg-black">
{props.images.map((e: string, index: number) => (
<img
className={"w-full object-cover h-full".concat(
index == currImage ? " " : " hidden"
)}
key={index}
src={e}
></img>
))}
</div>
);
};
export default FlashScreen;
- And finally the
index.tsx
# pages/index.tsx
import { useState } from "react";
import { getImages } from "../lib/get_images";
import FlashScreen from "../components/flash_screen";
import NextHead from "next/head";
import { useRouter } from "next/router";
const Home = () => {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [images, setImages] = useState([]);
const [showImages, setShowImages] = useState(false);
let query: string = "";
//
const onSubmitButton = async () => {
setLoading(true);
const data = await getImages(query);
setImages(data.data);
setShowImages(true);
};
/// Call on mount
const handleChangeEvent = (e: any) => (query = e.target.value);
return (
<div className="bg-black text-white">
{showImages ? (
<FlashScreen
images={images}
onEnd={() => {
setShowImages(false);
setImages([]);
setLoading(false);
}}
></FlashScreen>
) : (
<div className="flex flex-col">
<div className="h-screen w-full flex flex-col justify-items-stretch ">
<Spacer />
{loading ? (
<div className="flex flex-col justify-items-center items-center space-y-10">
<h1 className="bg-red-600 rounded-lg text-3xl h-10 p-1 text-center">
downloading..
</h1>
</div>
) : (
<div className="flex flex-col justify-items-center items-center space-y-10">
<h1 className="bg-red-600 rounded-lg text-3xl h-10 p-1 text-center">
The Intersect
</h1>
<input
placeholder="search .."
className="text-black bg-gray-200 rounded-lg text-sm p-2"
onChange={(e) => handleChangeEvent(e)}
></input>
<button
className="bg-red-600 text-white p-3 rounded-lg hover:shadow-lg text-bold"
onClick={onSubmitButton}
>
Flash
</button>
</div>
)}
<Spacer />
</div>
<div className="p-10 text-center text-xs text-gray-400">
</div>
</div>
)}
</div>
);
};
export default Home;
const Spacer = () => <div className="flex-grow"></div>;
- Now we can just run our app using
yarn dev
Top comments (0)