Hackathon - Hack Together: Microsoft Graph and .NET 🦒 - Day 05
Tags: webassembly, csharp, azure, dotnet
Published: 2023-03-08 19:40:14

Today I did other small steps to achieve my goal to release the project by the end of the next week.
I know it will not be a final product, but just an MVP.
By the way I would like to do the best as I can.

First of all, I implemented a minimal UI based on Blazor Fluent UI.
I use two components at the moment: Data grid and Card.
Starting from the official [GitHub repository](https://github.com/microsoft/fast-blazor), I found the demo website with all components: [https://brave-cliff-0c0c93310.azurestaticapps.net/](https://brave-cliff-0c0c93310.azurestaticapps.net/).

I found the data grid example [here](https://brave-cliff-0c0c93310.azurestaticapps.net/DataGrid) and I use the first easy example to implement my grid for Todo (the easiest list I have in the project).

I use the following code to retrieve the Todo items and as you can see first of all I have to retrieve the Lists and then I have to iterate trough the items and load the items in the list.
At the end I convert the List<> to an AsQueryable object because the data grid component need this kind of object.
I did the same for the mail items and calendar items (as you can see in my repository).

```csharp
var lists = await graphClient.Me.Todo.Lists.Request().GetAsync();
        var listTodo = new List<TodoTask>();

        foreach (var list in lists.CurrentPage)
        {
            var tasks = await graphClient.Me.Todo.Lists[list.Id].Tasks.Request().GetAsync();

            foreach (var task in tasks.Where(c => c.Status == Microsoft.Graph.TaskStatus.NotStarted))
            {
                listTodo.Add(task);
            }
        }

        todos = listTodo.AsQueryable();
```

I am not a C# super guru and I will investigate for a better way to convert a list to an IQueryable object.
For the moment I use the following code:

```csharp
messages = listMessages.CurrentPage.ToList().AsQueryable();
```

After the data grid implementation, I started by surrounding the data grids with a Card. Another awesome object from Fluent UI.
Now I have three different components in a folder and in the main page I have the reference to the components.
In this way I can load the data separately for each component and the application seems more reliable.

```html
        <Layout>
            <Header Height="200">
            </Header>

            <Stack Orientation="Orientation.Horizontal" Width="50%" HorizontalGap="0">
                <BodyContent>
                    <M365.Today.Components.CalendarCard />
                    <Spacer />
                    <M365.Today.Components.MailCard />
                    <Spacer />
                    <M365.Today.Components.ToDoCard />
                </BodyContent>
            </Stack>
        </Layout>
```

The code above is a portion of the code I have in the main page.
I use other components like Layout, Header and Stack to arrange the UI.
I will work on the layout tomorrow.

This is the result of today.
I am quite happy because starting from now I can only be focused on the UI part.

![Quick Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6c0yuhqfmy5mxi27a5c8.gif)

### Next Steps?
In the next days I will ad a banner (as you can see in the code above) with the Bing image of the day and I will arrange the cards with the data grid inside.
Other ideas came to my mind today (adding new information in the page) but I don't know if I have time to implement all of them.

You can find the repo [here](https://github.com/kasuken/M365-Today/tree/dev).

Stay tuned!

---

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: [Learning GitHub](https://bit.ly/learninggithub).

![LinkedIn Learning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdc2bpiftpadibi4h51c.gif)

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}