# Reusable functions

**Express Summary:** Organize complex logic by creating reusable functions for cleaner code.

---

## Problem: Complex and repetitive logic

Just like visual elements with components, we need to organize algorithmic elements with **functions**. This makes logic cleaner and allows reusing certain functionalities like "get number of completed tasks".

## 1. Create a function script

### New script
1. Right-click � **New Script**
2. Name the script "fonction" or "functions"
3. **Important**: Change scope to **Frontend**

### The three available scopes
- **Frontend**: client-side user interface logic
- **Backend**: server-side logic
- **Shared**: functions usable everywhere (frontend + backend)

### Why not put everything in Shared?
- **Performance**: user only loads client, not server
- **Security**: certain logic (connection, etc.) shouldn't be exposed client-side
- **Architecture**: avoid circular dependencies

## 2. Create the getTotalTasks function

### Function configuration
1. Name the function **getTotalTasks**
2. Check **Export** to import it elsewhere
3. � **Attention**: only check Export if really necessary (avoid circular dependencies)

### Migrate logic
1. From Main page, copy all total task calculation logic:
    - get store � spread � get property (cards) � Map � Sum
2. Paste into getTotalTasks function
3. Connect **input** to beginning of chain (map)
4. Add an **output** named "totalTasks" of type **number**
5. Connect result (sum) to output

## 3. Create the getFinishTasks function

### Same principle
1. Create function **getFinishTasks**
2. Check **Export**
3. Migrate completed task calculation logic:
    - get store � spread � get property (cards) � Filter � hat[0] � get property (tasks) � get length

### Configure inputs/outputs
1. Connect **input** to filter
2. Add "finishTasks" **output** of type **number**
3. Connect result to output

## 4. Use functions in Main

### Clean old logic
1. Return to **Main** page
2. Delete all complex calculation blocks
3. Keep only division, multiplication, and rounding blocks

### Import and use new functions
1. Add **getTotalTasks** to logic
2. Add **getFinishTasks** to logic
3. Connect execution: computed � getTotalTasks � getFinishTasks
4. Connect results:
    - totalTasks � "total" input of division
    - finishTasks � "completed" input of division

## Advantages of this approach

### Cleaner code
- Main logic readable and concise
- Separation of responsibilities
- Explicit function names

### Reusability
- Functions available throughout application
- Avoids code duplication
- Centralized maintenance

### Performance
- Optimized loading by scope
- Avoids unnecessary dependencies

## Best practices

### When to use Export?
- Only if function will be reused elsewhere
- Avoid systematic export to not overload application

### Scope organization
- **Frontend**: interface calculations, formatting, client-side validations
- **Backend**: authentication, database, sensitive business logic
- **Shared**: common utilities, constants, helpers

### Function structure
1. **Input**: entry parameters
2. **Logic**: data processing
3. **Output**: typed and named result

## Final result

The percentage still works perfectly, but with much more organized and maintainable code. Functions can now be reused in other parts of the application.

## Tests and validation

1. **Test functions independently**: each function can be tested individually
2. **Verify reusability**: import functions in other components
3. **Performance**: loading optimized thanks to appropriate scopes

## Architecture summary

### Final project structure
- **Pages**: user interface and display logic
- **Components**: reusable elements with properties
- **Scripts/Functions**: business logic organized by scope
- **Types**: data structure definitions
- **Store**: global application state

---

*Congratulations! You now have a functional Trello application with clean and maintainable architecture.*