Nextjs Web app for the intersect

#nextjs #typescript #tailwindcss

The Nextjs App for the intersect

I'll quickly use a template to create the nextjs app with basic setup
withTypescript,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.tsimportaxios,{AxiosRequestConfig}from"axios";exportconstgetImages=async(searchString:string)=>{constconfig:AxiosRequestConfig={params:{q:searchString},headers:{Authorization:process.env.NEXT_PUBLIC_API_KEY},// Authorization header we set in the server};constdata=awaitaxios.get(`${process.env.NEXT_PUBLIC_API_URL}/search`,config);returndata.data;};//

We'll also create a flash-screen component

#/components/flash_screen.tsximport{useEffect,useState}from"react";constFlashScreen=(props)=>{const[currImage,setImage]=useState(0);//consttoggleImages=async(index:number,pass:number)=>{if(index<props.images.length){setImage(index);awaitnewPromise((resolve)=>setTimeout(resolve,100));returntoggleImages(++index,pass);}if(props.images.length<70&&pass<2){returntoggleImages(0,++pass);}props.onEnd();return;};//useEffect(()=>{toggleImages(0,1);},[]);return(<divclassName="h-screen w-full flex-grow flex flex-col justify-items-center items-center bg-black">{props.images.map((e:string,index:number)=>(<imgclassName={"w-full object-cover h-full".concat(index==currImage?"":" hidden")}key={index}src={e}></img>))}</div>);};exportdefaultFlashScreen;

And finally theindex.tsx

#pages/index.tsximport{useState}from"react";import{getImages}from"../lib/get_images";importFlashScreenfrom"../components/flash_screen";importNextHeadfrom"next/head";import{useRouter}from"next/router";constHome=()=>{constrouter=useRouter();const[loading,setLoading]=useState(false);const[images,setImages]=useState([]);const[showImages,setShowImages]=useState(false);letquery:string="";//constonSubmitButton=async()=>{setLoading(true);constdata=awaitgetImages(query);setImages(data.data);setShowImages(true);};/// Call on mountconsthandleChangeEvent=(e:any)=>(query=e.target.value);return(<divclassName="bg-black text-white">{showImages?(<FlashScreenimages={images}onEnd={()=>{setShowImages(false);setImages([]);setLoading(false);}}></FlashScreen>):(<divclassName="flex flex-col"><divclassName="h-screen w-full flex flex-col justify-items-stretch"><Spacer/>{loading?(<divclassName="flex flex-col justify-items-center items-center space-y-10"><h1className="bg-red-600 rounded-lg text-3xl  h-10 p-1 text-center">downloading..</h1></div>):(<divclassName="flex flex-col justify-items-center items-center space-y-10"><h1className="bg-red-600 rounded-lg text-3xl  h-10 p-1 text-center">TheIntersect</h1><inputplaceholder="search .."className="text-black bg-gray-200 rounded-lg text-sm p-2"onChange={(e)=>handleChangeEvent(e)}></input><buttonclassName="bg-red-600 text-white p-3 rounded-lg hover:shadow-lg text-bold"onClick={onSubmitButton}>Flash</button></div>)}<Spacer/></div><divclassName="p-10 text-center text-xs text-gray-400"></div></div>)}</div>);};exportdefaultHome;constSpacer=()=><divclassName="flex-grow"></div>;