Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 tasks
kevinlu1248 opened this issue Aug 21, 2023 · 1 comment
Open
5 tasks
Labels

Comments

@kevinlu1248
Copy link
Member

kevinlu1248 commented Aug 21, 2023

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


Checklist:

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.
@sweep-nightly sweep-nightly bot added the sweep label Aug 21, 2023
@sweep-nightly
Copy link
Contributor

sweep-nightly bot commented Aug 21, 2023

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.

{
"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"
]
}

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>

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}
/>
)

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>

</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:


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

@kevinlu1248 kevinlu1248 changed the title Sweep: refactor all functional components to class components Sweep: refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep: refactor all functional components to class components. Sweep: refactor all functional components to class components Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep: refactor all functional components to class components Sweep: refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep: refactor all functional components to class components. Sweep (migrate): refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components. Sweep (migrate): refactor all functional components to class components Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components Sweep (migrate): refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components. Sweep (migrate): refactor all functional components to class component Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class component Sweep (migrate): refactor all functional components to class components Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components Sweep (migrate): refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components. Sweep (migrate): refactor all functional components to class components Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components Sweep (migrate): refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (migrate): refactor all functional components to class components. Sweep (map): refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (map): refactor all functional components to class components. Sweep (map): refactor all functional components to class components Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (map): refactor all functional components to class components Sweep (map): refactor all functional components to class components. Aug 21, 2023
@kevinlu1248 kevinlu1248 changed the title Sweep (map): refactor all functional components to class components. Sweep (map): refactor all functional components to class components Aug 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment