Refactor: Extract Bio Generation Logic into Reusable Utilities

[sourcery-ai]

Description

The current implementation of the bio generation logic within the UserCard component is complex and could benefit from refactoring. To improve code organization, maintainability, and testability, it is suggested to extract the bio generation logic into reusable utilities.

Proposed Solution

1. Extract Bio Generation Logic:

   • Create a custom hook useBioGeneration to handle the bio generation logic. This hook should manage the loading state, last message state, and the bio generation function.
   • The hook should encapsulate the existing chat configuration and append logic.

   function useBioGeneration() {
     const [isLoading, setIsLoading] = useState(false);
     const [lastMessage, setLastMessage] = useState<string | null>(null);
     const { append } = useChat({...}); // Move existing chat config here
   
     const generateBio = async (type: string) => {
       try {
         setIsLoading(true);
         const promptContent = UserPersonalityPrompt(type, []);
         return append({...}); // Existing append logic
       } catch (error) {
         setIsLoading(false);
         toast.error('Failed to generate content');
       }
     };
   
     return { isLoading, lastMessage, generateBio };
   }

2. Create a Shared StatsDisplay Component:

   • Develop a StatsDisplay component to reduce code duplication and improve presentation logic.

   function StatsDisplay({ threads, followers, isMobile }: StatsDisplayProps) {
     return isMobile ? (
       <div className="flex items-center justify-center gap-6">
         <StatItem icon={Users} label="Followers" value={followers} />
         <StatItem icon={MessageSquare} label="Threads" value={threads} />
         <Button variant="outline" size="sm">Follow</Button>
       </div>
     ) : (
       <div className="flex items-center gap-6">
         <StatItem icon={MessageSquare} label="Threads" value={threads} />
         <StatItem icon={Users} label="Followers" value={followers} />
         <Button variant="outline" size="sm">Follow</Button>
       </div>
     );
   }

3. Extract Bio Section:

   • Implement a BioSection component to handle the bio display and generation button logic.

   function BioSection({ chatbot, onGenerate, isLoading }: BioSectionProps) {
     return (
       <div className="flex items-center mb-2">
         <Bot className="mr-2" />
         <span>bio:</span>
         <Button
           disabled={isLoading}
           variant="ghost"
           onClick={onGenerate}
           className="ml-2 text-sm"
         >
           {chatbot?.description ? 're-generate' : 'generate'}
           {isLoading ? <Loader className="w-4 h-4 ml-1" /> : <Wand2 className="w-4 h-4 ml-1" />}
         </Button>
       </div>
     );
   }

Benefits

• Separation of Concerns: Clearly separates state management, presentation, and API calls.
• Reduced Code Duplication: Minimizes repeated code, especially in stats display.
• Improved Maintainability: Easier to test and maintain due to modular design.
• Enhanced Readability: Simplifies the component structure, making it easier to understand.

Action Items

• Implement the useBioGeneration hook.
• Develop the StatsDisplay component.
• Create the BioSection component.
• Refactor the UserCard component to utilize these new utilities.

This refactor will ensure that the codebase remains clean, efficient, and easy to work with in the future. Please prioritize this task to enhance the overall quality of the project.

---

I created this issue for @Bran18 from #324 (comment).

Tips and commands

Interacting with Sourcery

• Generate a plan of action: Comment @sourcery-ai plan on this issue.
• Generate a pull request for this issue: Comment @sourcery-ai develop to
  generate a PR that addresses this issue.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.