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