Example from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
A Pen by Sourabh Bagrecha on CodePen.
import { createContext, useState } from "react"; | |
import { App, Credentials } from "realm-web"; | |
import { APP_ID } from "../realm/constants"; | |
// Creating a Realm App Instance | |
const app = new App(APP_ID); | |
// Creating a user context to manage and access all the user related functions | |
// across different component and pages. | |
export const UserContext = createContext(); |
import { useContext } from "react"; | |
import { Navigate, Outlet, useLocation } from "react-router-dom"; | |
import { UserContext } from "../contexts/user.context"; | |
const PrivateRoute = (props) => { | |
// Fetching the user from the user context. | |
const { user } = useContext(UserContext); | |
const location = useLocation(); |
import { Button, TextField } from "@mui/material"; | |
import { useContext, useEffect, useState } from "react"; | |
import { Link, useLocation, useNavigate } from "react-router-dom"; | |
import { UserContext } from "../contexts/user.context"; | |
const Login = () => { | |
const navigate = useNavigate(); | |
const location = useLocation(); | |
// We are consuming our user-management context to |
import { Button, TextField } from "@mui/material"; | |
import { useContext, useState } from "react"; | |
import { Link, useLocation, useNavigate } from "react-router-dom"; | |
import { UserContext } from "../contexts/user.context"; | |
const Signup = () => { | |
const navigate = useNavigate(); | |
const location = useLocation(); | |
// As explained in the Login page. |
import { Button } from '@mui/material' | |
import { useContext } from 'react'; | |
import { UserContext } from '../contexts/user.context'; | |
export default function Home() { | |
const { logOutUser } = useContext(UserContext); | |
// This function is called when the user clicks the "Logout" button. | |
const logOut = async () => { | |
try { |
import { BrowserRouter, Route, Routes } from "react-router-dom"; | |
import { UserProvider } from "./contexts/user.context"; | |
import Home from "./pages/Home.page"; | |
import Login from "./pages/Login.page"; | |
import PrivateRoute from "./pages/PrivateRoute.page"; | |
import Signup from "./pages/Signup.page"; | |
function App() { | |
return ( | |
<BrowserRouter> |
import { Box, Paper, useTheme } from '@mui/material'; | |
import React from 'react' | |
const PageContainer = (props) => { | |
const theme = useTheme(); | |
return (<Box sx={{ backgroundColor: theme.palette.grey[200] }}> | |
<Paper sx={{ maxWidth: "50rem", marginX: "auto", minHeight: "90vh", paddingX: "20px", paddingY: "10px" }}> | |
{props.children} | |
</Paper> |
import { useContext, useEffect, useState } from 'react'; | |
import request, { gql } from 'graphql-request'; | |
import PageContainer from "../components/PageContainer.component"; | |
import { UserContext } from '../contexts/user.context'; | |
import { GRAPHQL_ENDPOINT } from '../realm/constants'; | |
import ExpenseCard from '../components/ExpenseCard.component'; | |
const Home = () => { | |
// Fetching user details from UserContext | |
const { user } = useContext(UserContext); |
import { Delete, Edit } from "@mui/icons-material"; | |
import { Card, CardContent, Grid, IconButton, Typography } from "@mui/material"; | |
import request, { gql } from "graphql-request"; | |
import { useContext } from "react"; | |
import { Link } from "react-router-dom"; | |
import { UserContext } from "../contexts/user.context"; | |
import { GRAPHQL_ENDPOINT } from "../realm/constants"; | |
const ExpenseCard = ({ _id, title, amount, category, mode, createdAt, afterDelete }) => { | |
const { user } = useContext(UserContext); |