OSD600 Final Project Blog 3
Tags: opensource
Published: 2021-12-08 01:33:58

## Introduction
🔥This is a mini-series including 3 blogs that shows the process how I work on my final project in my Open-Source Development class (OSD600) at Seneca College.

📝In the first blog, I introduced how I found an open-source repo to work for Final Project. In the second blog, I introduced my process of installation and setup the app. In this **last blog**, I will introduce my process to implement the feature and how the result looks like.

## Process
### First Impression
It was a wow when I first looked at the code of the repo. It contains so many folders and functionalities. Some folders had the views of the features and code of functionalities. Some folders contained classes and database connection.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/taha8i1vrdao6b7v9l4v.png)
I did not know where to start. So, I picked **Category** folder to read the code first because my feature implemented is about **Pin Category**.
 
### Difficulties
I decided to add an attribute to **Category** class named **pinned**. I planned to mark it as a boolean. I would set it to be true whenever user pins, and set it to be false for default value. And I would display all the pinned categories on top.
```
public struct AWSCategory: Model {
  public let id: String
  public var name: String
  public var imageName: String?
  public var tweets: List<AWSTweet>?
  public var pinned: Bool?
    
  public init(id: String = UUID().uuidString,
      name: String,
      imageName: String? = nil,
      tweets: List<AWSTweet>? = []
      pinned: Bool) {
      self.id = id
      self.name = name
      self.imageName = imageName
      self.tweets = tweets
      self.pinned = pinned
  }
}
```
That was be the best shortcut for me to implement pin feature. But it would change the structure of the whole database system. So I needed to figure out other way.
### Implementation
I created a button **Pin to top** whenever users press-hold on any category. 
```
Button {
     viewModel.pinCategory(category: category)
} label: {
     Text("Pin to top")
}
```
The button would show the text **Pin to top**. And when users hold-press it. It would call **pinCategory()** accepting parameter of current row **category** to do the functionality.

In **pinCategory()** function, firstly, I made a loop to found the index of the category in the array. 
```
func pinCategory(category: AWSCategory){
   var categoryIndex = -1;
   for (index, each) in categories.enumerated() {
        if(each.id == category.id){
           categoryIndex = index
        }
   }
   ...
}
```
If the index found is valid, I would remove the current category from the array, insert it to the front. So, when the page is reloaded, it would appear on the top of the list.
```
if(categoryIndex != -1){
    categories.remove(at: categoryIndex)
    categories.insert(category, at: 0)
    ...
}
```
**categories** is the array of the imported categories from the database. So, I needed to update the categories to the database when I had done my feature. I had a chance to understand how to implement AWI Amplify Datastore. I read the [articles] (https://docs.amplify.aws/start/q/integration/ios/) and followed the implementation in **/Managers/DataStoreManager.swift** to see how actually this database system works.
```
for category in categories {
   DataStoreManger.shared.deleteCategory(category: category)
}
for category in categories {
   DataStoreManger.shared.createCategory(category: category)
}
```
### Result
This is 3 folders that I created: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4udvyg1ncqwov7htlf7.png)
When I hold-press on **Folder 2**, it will show:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03c1nlzj7m3lg8ys9im2.png)
And here is the final result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtlmimfa3mi1yupcb2jf.png)
When I close the app and reopen it, the categories are saved as before. I ensured the persistence of database. **Folder 2** is still on top.
{% youtube Ayn3SM6haq8 %}
  
## Conclusion
💻This has been the first open-source project that I spent so much time in it. From the process to find interesting project to work on, to the installation process and finally implementation process.

💪I'm happy to see my overall process and I'm looking forward to push myself in the open-source world.

## Sources
📚Read my mini-series at:
* [OSD600 Final Project Blog 1](https://dev.to/kiennguyenchi/osd600-final-project-blog-1-lf7)
* [OSD600 Final Project Blog 2](https://dev.to/kiennguyenchi/osd600-final-project-blog-2-i62)

💻Take a look at my work:
* [Filing Issue] (https://github.com/mikaelacaron/brain-marks/issues/101)
* [Pull Request] (https://github.com/mikaelacaron/brain-marks/pull/102)
* [GitHub Repo](https://github.com/kiennguyenchi/brain-marks)