inside the intersect

Nextjs Web app for the intersect

This is continuation of the intersect project from

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.gitcd nextjs-tailwind-typescript-starteryarn

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

--

--

--

onw to 10x developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

HOF and HOC (in React)

JavaScript Hacks to Instantly Make Your Code Bug-Free

How to apply CSS class in Javascript?

JavaScript ES6:Destructuring for Beginners

JavaScript Destructuring Assignment Visual Understanding

Check out this Bulma CSS tutorial before you build your company website

How to Upgrade from React Native 0.57 to 0.59 | Part 1: Upgrading to 0.58

JS, SPA, OO, and This

Basic Javascript Interaction

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Navin Kodag

Navin Kodag

onw to 10x developer

More from Medium

Dark Mode&Light Mode: Next.js with next-themes and Sass

Prismic.io with Next.js and GraphQL. Dynamic routes

Experience with Tailwind CSS!

Build Auth App using AWS Cognito with NuxtJS and TypeScript