Sweep (map): refactor all functional components to class components

[kevinlu1248]

There should be like 15 files in total. Break them into 5 subissues.

---

Checklist:

• Sweep: Refactor App, ColorModeSwitcher, and AboutUs to class components #432

Refactor App, ColorModeSwitcher, and AboutUs to class components

• In src/App.tsx, refactor the App function into a class component.
• In src/ColorModeSwitcher.tsx, refactor the ColorModeSwitcher function into a class component.
• In src/components/AboutUs.tsx, refactor the AboutUs function into a class component.

• Sweep: Refactor Banner, CallToAction, and Conclusion to class components. #433

Refactor Banner, CallToAction, and Conclusion to class components

• In src/components/Banner.tsx, refactor the Banner function into a class component.
• In src/components/CallToAction.tsx, refactor the CallToAction function into a class component.
• In src/components/Conclusion.tsx, refactor the Conclusion function into a class component.

• Sweep: Refactor Examples, ExternalLinkWithText, and Features to class components #434

Refactor Examples, ExternalLinkWithText, and Features to class components

• In src/components/Examples.tsx, refactor the Examples function into a class component.
• In src/components/ExternalLinkWithText.tsx, refactor the ExternalLinkWithText function into a class component.
• In src/components/Features.tsx, refactor the Features function into a class component.

• Sweep: Refactor Footer, Navbar, and PricingModal to class components #435

Refactor Footer, Navbar, and PricingModal to class components

• In src/components/Footer.tsx, refactor the Footer function into a class component.
• In src/components/Navbar.tsx, refactor the Navbar function into a class component.
• In src/components/PricingModal.tsx, refactor the PricingModal function into a class component.

• Sweep: Refactor Testimonials, User, and Users to class components #436

Refactor Testimonials, User, and Users to class components

• In src/components/Testimonials.tsx, refactor the Testimonials function into a class component.
• In src/components/User.tsx, refactor the User function into a class component.
• In src/components/Users.tsx, refactor the Users function into a class component.

[sweep-nightly]

To retrigger Sweep, edit the issue.

---

Step 1: 🔍 Code Search

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I looked at (click to expand). If some file is missing from here, you can mention the path in the ticket description.

landing-page/package.json

Lines 1 to 62 in 836113d

	{
	"name": "sweep-landing-page",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
	"@chakra-ui/icons": "^2.0.18",
	"@chakra-ui/react": "^2.5.5",
	"@emotion/react": "^11.10.6",
	"@emotion/styled": "^11.10.6",
	"@splinetool/react-spline": "^2.2.6",
	"@splinetool/runtime": "^0.9.399",
	"@testing-library/jest-dom": "^5.16.5",
	"@testing-library/react": "^13.4.0",
	"@testing-library/user-event": "^14.4.3",
	"@types/jest": "^28.1.8",
	"@types/node": "^12.20.55",
	"@types/react": "^18.0.37",
	"@types/react-dom": "^18.0.11",
	"@types/react-helmet": "^6.1.6",
	"@types/react-syntax-highlighter": "^15.5.7",
	"avataaars": "^2.0.0",
	"framer-motion": "^6.5.1",
	"prettier": "^3.0.2",
	"react": "^18.2.0",
	"react-dom": "^18.2.0",
	"react-helmet": "^6.1.0",
	"react-icons": "^3.11.0",
	"react-router-dom": "^5.2.0",
	"react-scripts": "5.0.1",
	"react-snap": "^1.23.0",
	"react-syntax-highlighter": "^15.5.0",
	"react-window-ui": "^2.2.0",
	"tsparticles": "^1.37.3",
	"tsparticles-preset-confetti": "^1.0.0",
	"typescript": "^4.9.5",
	"web-vitals": "^2.1.4"
	},
	"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject",
	"lint": "eslint . --ext .ts,.tsx"
	},
	"devDependencies": {
	"@types/react-router-dom": "^5.1.7"
	},
	"eslintConfig": {
	"extends": "react-app"
	},
	"browserslist": {
	"production": [
	">0.2%",
	"not dead",
	"not op_mini all"
	],
	"development": [
	"last 1 chrome version",
	"last 1 firefox version",
	"last 1 safari version"
	]
	}

landing-page/src/components/Testimonials.tsx

Lines 1 to 66 in 836113d

	import { Box, Flex, Text } from "@chakra-ui/react";
	import ExternalLinkWithText from "./ExternalLinkWithText";
	import User from "./User";
	type TestimonialProps = {
	children: React.ReactNode,
	name: string,
	company: string,
	href: string
	}
	const Testimonial = ({ children, name, company, href }: TestimonialProps): JSX.Element => {
	return (
	<Box
	overflow="hidden"
	p={4}
	mb={16}
	width={{ base: "100%", md: "30%" }}
	backgroundColor="purple.900"
	borderRadius="10px"
	borderColor="purple.300"
	borderWidth={1}
	>
	<Flex width="100%" m={2} mb={4}>
	<User><Text color="white">{name.split(' ').map(n => n[0]).join('').toUpperCase()}</Text></User>
	<Box flexGrow={1} textAlign="left" ml={4}>
	<Text fontWeight="bold">{name}</Text>
	<ExternalLinkWithText href={href} color="#aaa">{company}</ExternalLinkWithText>
	</Box>
	</Flex>
	<Text fontSize="md" textAlign="left">
	{children}
	</Text>
	</Box>
	);
	}
	export default function Testimonials() {
	return (
	<Box display="flex" justifyContent="center" alignItems="center">
	<Box m={8} mt={32} width={{ base: "100%", md: "80%" }}>
	<Text fontSize="3xl" mb={12} textAlign="center">What our users are saying</Text>
	<Box display="flex" flexWrap="wrap" justifyContent="space-between">
	<Testimonial name="Cody Ebberson" company="Co-founder + CTO at Medplum" href="https://medplum.com">
	The true ingenuity lies in their many product intricacies ... from adhering to <b>coding standards</b> and integrating with <b>static analysis</b>, to <b>responsive feedback</b>. Their commitment to getting every detail right, paired with a swift incorporation of lessons into tangible enhancements, really sets Sweep AI apart.
	</Testimonial>
	<Testimonial name="Ashaya Sharma" company="Co-founder + CTO at Honeycomb.ai" href="https://honeycomb.ai">
	I was able to get it to make a PR which took <b>my junior developer 2 days</b> to do. Been great so far.
	</Testimonial>
	<Testimonial name="Eduardo Reis" company="AI @ Stanford AIMI" href="https://plugnplai.com">
	✨Wow! Just found sweep.dev from <ExternalLinkWithText href="https://twitter.com/wwzeng1">@wwzeng1</ExternalLinkWithText> <ExternalLinkWithText href="https://twitter.com/KevinLu45010771">@KevinLu45010771</ExternalLinkWithText>. It wrote these two PRs for <ExternalLinkWithText href="https://github.com/edreisMD/plugnplai/pull/91">edreisMD/plugnplai#91</ExternalLinkWithText> <ExternalLinkWithText href="https://github.com/edreisMD/plugnplai/pull/75">edreisMD/plugnplai#75</ExternalLinkWithText>
	&nbsp;<b>Total lifesaver</b> 🙌. Sweep just saved me <b>6 hours of work</b>.
	</Testimonial>
	<Testimonial name="Sagar Patil" company="Product Manager, SSL Zen" href="https://sslzen.com">
	Sweep helped me fix 2 issues in less than 10 mins. This would have took me at least 30-45 mins manually. I also have to say everything is very fast now. It's working great, just one message and it intelligently understands the problem and suggests a fix that just works! Kudos to you guys!
	</Testimonial>
	<Testimonial name="Kunal Gupta" company="CEO of Withfriends" href="https://withfriends.co">
	It’s a little bit like having a <b>junior intern</b>, which doesn’t sound like a lot at first, but you can run like <b>100 junior interns</b> at once and they can cover a lot of ground in parallel.
	</Testimonial>
	<Testimonial name="Jeremy Evans" company="Co-founder + CTO at savvy" href="https://trysavvy.com">
	Holy crap, I'm <b>seriously impressed</b> 🤯. Other than one issue it seems to be <b>word-perfect</b>. Exactly how I'd write it, and it understands all our <b>company-specific concepts</b>. Very impressive! 🙌
	</Testimonial>
	</Box>
	</Box>
	</Box>

landing-page/src/ColorModeSwitcher.tsx

Lines 1 to 29 in 836113d

	import * as React from "react"
	import {
	useColorMode,
	useColorModeValue,
	IconButton,
	IconButtonProps,
	} from "@chakra-ui/react"
	import { FaMoon, FaSun } from "react-icons/fa"
	type ColorModeSwitcherProps = Omit<IconButtonProps, "aria-label">
	export const ColorModeSwitcher: React.FC<ColorModeSwitcherProps> = (props) => {
	const { toggleColorMode } = useColorMode()
	const text = useColorModeValue("dark", "light")
	const SwitchIcon = useColorModeValue(FaMoon, FaSun)
	return (
	<IconButton
	size="md"
	fontSize="lg"
	variant="ghost"
	color="current"
	marginLeft="2"
	onClick={toggleColorMode}
	icon={<SwitchIcon />}
	aria-label={`Switch to ${text} mode`}
	{...props}
	/>
	)

landing-page/src/components/Features.tsx

Lines 1 to 137 in 836113d

	import { Box, Button, Code, Flex, HStack, Text, VStack } from "@chakra-ui/react";
	import { FaBook, FaGithub, FaSlack } from "react-icons/fa";
	import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; // @ts-ignore
	import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
	import GHAIcon from "../assets/gha.svg";
	import logo from "../assets/icon.png";
	import pills_examples from "../assets/pills_examples.svg";
	import User from "./User";
	const example_code = `import os
	import tempfile
	from git import Repo
	...
	try:
	repo_dir = os.path.join(tempfile.gettempdir(), repo_full_name)
	if os.path.exists(repo_dir):
	git_repo = Repo(repo_dir)
	git_repo.remotes.origin.pull()
	else:
	Repo.clone_from(repo_url, repo_dir)
	`;
	const example_diff_code_prefix = `def deactivate(self, plugin_name: str):
	"""
	Deactivates an activate plugin.
	"""
	if plugin_name not in self.active_plugins:
	del self.active_plugins[plugin_name]
	`;
	const example_gha_log = `Error: Module '"tsparticles"' has no exported member 'loadConfettiPreset'.
	Error: Property 'style' does not exist on type 'EventTarget'.`;
	const example_diff_code_gha = `import { Flex, Container, Heading, Stack, Text, Button } from "@chakra-ui/react";
	- import { loadConfettiPreset, tsParticles } from "tsparticles";
	+ import { tsParticles } from "tsparticles";
	import { FaDiscord, FaGithub } from "react-icons/fa";
	import Spline from '@splinetool/react-spline';
	...
	await tsParticles.load("tsparticles", {
	preset: "confetti",
	particles: {
	color: {
	value: ["#0000ff", "#00ff00"],
	},
	},
	});
	- target.style.transform = "rotate(360deg)";
	+ (target as HTMLElement).style.transform = "rotate(360deg)";
	}}
	...
	`;
	const example_diff_code_diff = `- self.prompt = self.fill_prompt(self.template)
	- self.tokens = count_tokens(self.prompt)
	+ self.tokens = count_tokens(self.get_prompt())
	`;
	const customStyle = {
	...oneDark,
	'code[class*="language-"]': {
	...oneDark['code[class*="language-"]'],
	background: 'transparent',
	},
	};
	const Dialog = ({ children, user, userProps, ...props }: any) => {
	return (
	<HStack alignItems="flex-start" spacing={6} maxW="100% !important">
	<User {...userProps}>{user}</User>
	<Box borderRadius="10px" display="flex" justifyContent="center" alignItems="center" color="purple.300" borderColor="purple.300" borderWidth="1px" p={4} {...props}>
	{children}
	</Box>
	</HStack>
	)
	}
	const GithubDialog = ({ children, user, userProps, ...props }: any) => {
	return (
	<HStack alignItems="flex-start" spacing={6} maxW="100% !important" w="100% !important">
	<User {...userProps}>{user}</User>
	<Box borderRadius="10px" display="flex" justifyContent="center" alignItems="center" color="white.900" borderColor="purple.300" borderWidth="1px" p={4} {...props}>
	{children}
	</Box>
	</HStack>
	)
	}
	export default function Features() {
	return (
	<>
	<Box display="flex" justifyContent="center" alignItems="center" mb={96}>
	<Box m={8} display="flex" flexWrap="wrap" justifyContent="space-between" w="80%" textAlign="left">
	<Flex width={{ base: "100%", md: "45%" }} textAlign="left" justifyContent="center" alignItems="center" mb={12}>
	<Box>
	<img src={logo} alt="Sweep logo" width={50} />
	<Text mt={4} fontSize="2xl" fontWeight="bold">Clean up your tech debt, automatically</Text>
	<Text mt={4} fontSize="md" color="lightgrey">Sweep generates repository-level code at your command. Cut down your dev time on mundane tasks, like tests, documentation, and refactoring.</Text>
	</Box>
	</Flex>
	<Box width={{ base: "100%", md: "45%" }} maxW="100%">
	<VStack alignItems="flex-start" spacing={6}>
	<Dialog
	user={<Text fontSize="md" color="white">KL</Text>}
	userProps={{ bgColor: "purple.900", p: 2, borderWidth: 2 }}
	bgColor="purple.900"
	borderWidth={2}
	>
	<Text fontSize="md" color="white">
	Sweep: Use OS Agnostic Temp Directory
	</Text>
	</Dialog>
	<Dialog user={<img src={logo} alt="Sweep logo" />}>
	<Text
	position="relative"
	fontSize="md"
	color="white"
	>
	<Box
	position="absolute"
	bottom={0}
	left={0}
	right={0}
	height="100%"
	background={`linear-gradient(to bottom, transparent, #0d0a1aaa)`}
	/>
	This PR addresses issue #367, which pointed out that the current implementation of the temporary directory in sweepai/app/ui.py is not compatible with Windows.
	<br />
	{/*<ul>*/}
	{/* <li style={{ marginLeft: 20 }}>*/}
	{/* Creates a test file tests/test_backend.py with test cases for normal usage and edge cases...*/}
	{/* </li>*/}
	{/*</ul>*/}
	</Text>
	</Dialog>

landing-page/src/components/Examples.tsx

Lines 150 to 229 in 836113d

	</Comment>
	<PullRequestLink href={pull_request_url} username="sweep-ai">
	{pull_request_title}
	</PullRequestLink>
	</Text>
	</Box>
	);
	}
	export default function Examples() {
	return (
	<>
	<Box display="flex" justifyContent="center" alignItems="center">
	<Box m={8} mt={32} width={{base: "100%", md: "80%"}}>
	<Text fontSize="5xl" fontWeight="bold" mb={12} textAlign="center">Example tickets handled by Sweep</Text>
	<Box display="flex" flexWrap="wrap" justifyContent="space-between">
	<Example
	repo_name="edreisMD/plugnplai"
	issue_title="make .prompt a method and add verbosity and colors"
	issue_number={140}
	avatar_href="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortWaved&accessoriesType=Blank&hairColor=BrownDark&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=Hoodie&clotheColor=Black&eyeType=Default&eyebrowType=UpDownNatural&mouthType=Smile&skinColor=Pale"
	username="edreisMD"
	issue_description="use typer to display colors and alter the prompt"
	pull_request_title="make .prompt a method and add verbosity and colors"
	>
	@edreisMD, I have started working on this PR. My plan is to:
	<br/>
	<ul style={{marginLeft: 20, marginTop: 10}}>
	<li>
	Make self.prompt a method called get_prompt() in plugins.py
	</li>
	<li>
	Add verbosity and color options using typer
	</li>
	</ul>
	</Example>
	<Example
	repo_name="edreisMD/plugnplai"
	issue_title="Only allow activating a maximum of 3 plugins"
	issue_number={65}
	avatar_href="https://avataaars.io/?avatarStyle=Circle&topType=WinterHat3&accessoriesType=Round&hatColor=Blue03&facialHairType=Blank&clotheType=GraphicShirt&clotheColor=Gray02&graphicType=Diamond&eyeType=Happy&eyebrowType=AngryNatural&mouthType=Smile&skinColor=Tanned"
	username="edreisMD"
	issue_description="The description prompt becames too big as you add too many plugins. A max of 3 seems to be a good limit, and its the same number as OpenAI allows on ChatGPT."
	pull_request_title="Only allow activating a maximum of 3 plugins"
	>
	@edreisMD, I have started working on this PR. My plan is to:
	<br/>
	<ul style={{marginLeft: 20, marginTop: 10}}>
	<li>
	Add a max_plugins attribute to the Plugins class and set it to 3
	</li>
	<li>
	Add logic to limit activating plugins to max_plugins
	</li>
	<li>
	Potentially refactor the activate() method to handle this logic
	</li>
	</ul>
	</Example>
	<Example
	repo_name="sweepai/minichain"
	issue_title="Sweep: write tests"
	issue_number={21}
	avatar_href="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortWaved&accessoriesType=Prescription02&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"
	username="kevinlu1248"
	issue_description="Just do the backend tests"
	pull_request_title="Add backend tests"
	>
	Hey @kevinlu1248,
	<br />
	I've started working on writing tests for the MiniChain library. The plan is to add test files for the core Backend, BasePrompt, and Gradio classes to cover normal usage and edge cases. I'll be using the pytest framework to write and run the tests.
	</Example>
	</Box>
	</Box>
	</Box>
	<Text mb={16}>
	For more examples, see <ExternalLinkWithText href="https://docs.sweep.dev/about/examples">Example Sweep tickets</ExternalLinkWithText>
	</Text>
	</>
	);

---

Step 2: 🧐 Snippet Analysis

Working on it...

---

Step 3: 📝 Planning

I'm creating the following subissues:

#Refactor App, ColorModeSwitcher, and AboutUs to class components:

• In src/App.tsx, refactor the App function into a class component.
• In src/ColorModeSwitcher.tsx, refactor the ColorModeSwitcher function into a class component.
• In src/components/AboutUs.tsx, refactor the AboutUs function into a class component.

#Refactor Banner, CallToAction, and Conclusion to class components:

• In src/components/Banner.tsx, refactor the Banner function into a class component.
• In src/components/CallToAction.tsx, refactor the CallToAction function into a class component.
• In src/components/Conclusion.tsx, refactor the Conclusion function into a class component.

#Refactor Examples, ExternalLinkWithText, and Features to class components:

• In src/components/Examples.tsx, refactor the Examples function into a class component.
• In src/components/ExternalLinkWithText.tsx, refactor the ExternalLinkWithText function into a class component.
• In src/components/Features.tsx, refactor the Features function into a class component.

#Refactor Footer, Navbar, and PricingModal to class components:

• In src/components/Footer.tsx, refactor the Footer function into a class component.
• In src/components/Navbar.tsx, refactor the Navbar function into a class component.
• In src/components/PricingModal.tsx, refactor the PricingModal function into a class component.

#Refactor Testimonials, User, and Users to class components:

• In src/components/Testimonials.tsx, refactor the Testimonials function into a class component.
• In src/components/User.tsx, refactor the User function into a class component.
• In src/components/Users.tsx, refactor the Users function into a class component.

---

Step 4: ⌨️ Coding

I finished creating the subissues! Track them at:

• Sweep: Refactor App, ColorModeSwitcher, and AboutUs to class components #432
• Sweep: Refactor Banner, CallToAction, and Conclusion to class components. #433
• Sweep: Refactor Examples, ExternalLinkWithText, and Features to class components #434
• Sweep: Refactor Footer, Navbar, and PricingModal to class components #435
• Sweep: Refactor Testimonials, User, and Users to class components #436

---

Step 5: 🔁 Code Review

N/A

---

🎉 Latest improvements to Sweep:

• Use Sweep Map to break large issues into smaller sub-issues, perfect for large tasks like "Sweep (map): migrate from React class components to function components"
• Getting Sweep to format before committing! Check out Sweep Sandbox Configs to set it up.
• We released a demo of our chunker, where you can find the corresponding blog and code.

---

💡 To recreate the pull request edit the issue title or description.
^{Join Our Discord}