Skip to content

Commit 02594e2

Browse files
Eric-Zhang-DeveloperEric-Zhang-Developer
committed
refactor: to create HeroSection conditional component
1 parent 25102d7 commit 02594e2

File tree

3 files changed

+85
-46
lines changed

3 files changed

+85
-46
lines changed

‎src/app/page.tsx‎

Lines changed: 3 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

33
import { useEffect, useState } from "react";
44
import { FollowerListSchema, FollowingListSchema } from "@/lib/types";
5-
import { Github, RotateCw, Upload } from "lucide-react";
6-
import Link from "next/link";
7-
import Dropzone from "react-dropzone";
5+
import { Github, RotateCw} from "lucide-react";
86
import ExtractNamesFromJson from "@/lib/extractNamesFromJson";
97
import Compare from "@/lib/comparison";
8+
import HeroSection from "@/components/HeroSection";
109
export default function Home() {
1110
const [followers, setFollowers] = useState<string[]>([]);
1211
const [following, setFollowing] = useState<string[]>([]);
@@ -74,48 +73,7 @@ export default function Home() {
7473

7574
{/* TODO: Refactor this conditional rendering into separate components to improve readability. For now, leaving it in-line to focus on styling and theming. */}
7675
{!hasProcessedDifference ? (
77-
<section className="flex flex-col container items-center gap-4">
78-
<h2 className="text-lg md:text-xl text-center">
79-
Safely see your non-followers using your official Instagram data. Your files are
80-
processed right here in your browser and are never uploaded anywhere.
81-
</h2>
82-
<Dropzone onDrop={onDrop} accept={{ "application/json": [".json"] }}>
83-
{({ getRootProps, getInputProps }) => (
84-
<div
85-
{...getRootProps()}
86-
className="border-2 px-2 md:px-10 py-10 md:py-30 flex flex-col gap-4 md:gap-8 items-center justify-center w-full md:w-3/5 border-dashed rounded-3xl mt-6 md:mt-12 text-lg hover:cursor-pointer"
87-
>
88-
<input {...getInputProps()} data-testid="file-input"></input>
89-
90-
{/* Conditional rendering to show if a user has uploaded single files*/}
91-
{hasProcessedFollowers && <div className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl" aria-label="Followers List Uploaded!">Followers List Uploaded!</div>}
92-
93-
{hasProcessedFollowing && <div className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl">Following List Uploaded!</div>}
94-
95-
<Upload size={50}></Upload>
96-
<p className="text-center whitespace-normal break-words">
97-
Drag&nbsp;&amp;&nbsp;drop&nbsp;your<br />
98-
<span className="bg-slate-100 text-sm font-mono mx-1 px-2 py-1 rounded break-all">
99-
followers.json
100-
</span>
101-
&amp;
102-
<span className="bg-slate-100 text-sm font-mono mx-1 px-2 py-1 rounded break-all">
103-
following.json
104-
</span><br />
105-
files&nbsp;here
106-
</p>
107-
<span>or</span>
108-
<button className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105">
109-
Select Files
110-
</button>
111-
</div>
112-
)}
113-
</Dropzone>
114-
<Link href="/tutorial" className="underline">
115-
{" "}
116-
Don&apos;t have your files? Here&apos;s how to get them.
117-
</Link>
118-
</section>
76+
<HeroSection onDrop={onDrop} hasProcessedFollowers={hasProcessedFollowers} hasProcessedFollowing={hasProcessedFollowing}></HeroSection>
11977
) : (
12078
<section className="flex flex-col items-center">
12179
<button

‎src/components/HeroSection.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// components/FileUploadZone.tsx
2+
import React from 'react';
3+
import { Upload } from "lucide-react";
4+
import Link from "next/link";
5+
import Dropzone from "react-dropzone";
6+
import {HeroSectionProps} from "../lib/types"
7+
8+
export default function HeroSection({hasProcessedFollowers, hasProcessedFollowing, onDrop} : HeroSectionProps) {
9+
return (
10+
<section className="flex flex-col container items-center gap-4">
11+
<h2 className="text-lg md:text-xl text-center">
12+
Safely see your non-followers using your official Instagram data. Your files are processed
13+
right here in your browser and are never uploaded anywhere.
14+
</h2>
15+
<Dropzone onDrop={onDrop} accept={{ "application/json": [".json"] }}>
16+
{({ getRootProps, getInputProps }) => (
17+
<div
18+
{...getRootProps()}
19+
className="border-2 px-2 md:px-10 py-10 md:py-30 flex flex-col gap-4 md:gap-8 items-center justify-center w-full md:w-3/5 border-dashed rounded-3xl mt-6 md:mt-12 text-lg hover:cursor-pointer"
20+
>
21+
<input {...getInputProps()} data-testid="file-input"></input>
22+
23+
{/* Conditional rendering to show if a user has uploaded single files*/}
24+
{hasProcessedFollowers && (
25+
<div
26+
className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl"
27+
aria-label="Followers List Uploaded!"
28+
>
29+
Followers List Uploaded!
30+
</div>
31+
)}
32+
33+
{hasProcessedFollowing && (
34+
<div className="bg-slate-200 px-5 md:px-20 py-2 border-2 rounded-2xl">
35+
Following List Uploaded!
36+
</div>
37+
)}
38+
39+
<Upload size={50}></Upload>
40+
<p className="text-center whitespace-normal break-words">
41+
Drag&nbsp;&amp;&nbsp;drop&nbsp;your
42+
<br />
43+
<span className="bg-slate-100 text-sm font-mono mx-1 px-2 py-1 rounded break-all">
44+
followers.json
45+
</span>
46+
&amp;
47+
<span className="bg-slate-100 text-sm font-mono mx-1 px-2 py-1 rounded break-all">
48+
following.json
49+
</span>
50+
<br />
51+
files&nbsp;here
52+
</p>
53+
<span>or</span>
54+
<button className="border-1 px-4 py-2 text-lg rounded-xl hover:cursor-pointer transition hover:scale-105">
55+
Select Files
56+
</button>
57+
</div>
58+
)}
59+
</Dropzone>
60+
<Link href="/tutorial" className="underline">
61+
{" "}
62+
Don&apos;t have your files? Here&apos;s how to get them.
63+
</Link>
64+
</section>
65+
);
66+
}

‎src/lib/types.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { z } from "zod";
22

3+
// =========== //
4+
// Backend interfaces and schemas
5+
// =========== //
6+
37
// Using Zod
48
// The reason for these interfaces is so that typescript neatly throws an error when a user
59
// adds a json that is not a followers.json or following.json format
@@ -27,4 +31,15 @@ export const FollowerListSchema = z.array(ExpectedJSONSchema);
2731

2832
// Types for extractNamesFromJson
2933
export type FollowingList = z.infer<typeof FollowingListSchema>['relationships_following'];
30-
export type FollowerList = z.infer<typeof FollowerListSchema>;
34+
export type FollowerList = z.infer<typeof FollowerListSchema>;
35+
36+
37+
// =========== //
38+
// Interface for Hero Section
39+
// =========== //
40+
41+
export interface HeroSectionProps{
42+
hasProcessedFollowers : boolean;
43+
hasProcessedFollowing : boolean;
44+
onDrop: (acceptedFiles: File[]) => void;
45+
}

0 commit comments

Comments
 (0)