Hackathon - Hack Together: Microsoft Graph and .NET 🦒 - Day 05

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, I found the demo website with all components: https://brave-cliff-0c0c93310.azurestaticapps.net/.

I found the data grid example here 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).

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:

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.

        <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.

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.

Stay tuned!

---

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: Learning GitHub.

---

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

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

Emanuele BartolesiFollow

🏆 Microsoft MVP & GitHub Star ⭐ | 🔓 Auth0 Ambassador & 📢 Codemotion Ambassador | 👨‍🎓 LinkedIn Technical Instructor