cuapi/ui/scheduling/src/main.tsx at ce499335e8e9bbdb0da8322580f6371d4fd67429 · ngc/cuapi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App.tsx";
import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider, useStyletron } from "baseui";
import { Instance, onSnapshot } from "mobx-state-tree";
import { AppManager } from "./api/AppManager.ts";
import { observer } from "mobx-react-lite";
import { ToasterContainer } from "baseui/toast/toaster";

const engine = new Styletron();
console.log(
    `


             jjjj                   lllllll   iiii                                         333333333333333
            j::::j                  l:::::l  i::::i                                <<<<<<<3:::::::::::::::33
             jjjj                   l:::::l   iiii                                <:::::< 3::::::33333::::::3
                                    l:::::l                                      <:::::<  3333333     3:::::3
           jjjjjjjuuuuuu    uuuuuu   l::::l iiiiiii     eeeeeeeeeeee            <:::::<               3:::::3
           j:::::ju::::u    u::::u   l::::l i:::::i   ee::::::::::::ee         <:::::<                3:::::3
            j::::ju::::u    u::::u   l::::l  i::::i  e::::::eeeee:::::ee      <:::::<         33333333:::::3
            j::::ju::::u    u::::u   l::::l  i::::i e::::::e     e:::::e     <:::::<          3:::::::::::3
            j::::ju::::u    u::::u   l::::l  i::::i e:::::::eeeee::::::e      <:::::<         33333333:::::3
            j::::ju::::u    u::::u   l::::l  i::::i e:::::::::::::::::e        <:::::<                3:::::3
            j::::ju::::u    u::::u   l::::l  i::::i e::::::eeeeeeeeeee          <:::::<               3:::::3
            j::::ju:::::uuuu:::::u   l::::l  i::::i e:::::::e                    <:::::<              3:::::3
            j::::ju:::::::::::::::uul::::::li::::::ie::::::::e                    <:::::< 3333333     3:::::3
            j::::j u:::::::::::::::ul::::::li::::::i e::::::::eeeeeeee             <<<<<<<3::::::33333::::::3
            j::::j  uu::::::::uu:::ul::::::li::::::i  ee:::::::::::::e                    3:::::::::::::::33
            j::::j    uuuuuuuu  uuuulllllllliiiiiiii    eeeeeeeeeeeeee                     333333333333333
            j::::j
  jjjj      j::::j
 j::::jj   j:::::j
 j::::::jjj::::::j
  jj::::::::::::j
    jjj::::::jjj
       jjjjjj

    `
);
interface AppManagerProviderContext {
    appManager: Instance<typeof AppManager>;
}

const AppManagerContext = React.createContext<AppManagerProviderContext>({
    appManager: AppManager.create(),
});

export const AppManagerProvider = observer(
    (props: {
        children: React.ReactNode;
        appManager: Instance<typeof AppManager>;
    }) => {
        // observable effect on appmanager to dump snapshot to localstorage
        useEffect(() => {
            const disposer = onSnapshot(props.appManager, (snapshot) => {
                localStorage.setItem("appManager", JSON.stringify(snapshot));
            });
            return () => disposer();
        }, [props.appManager]);

        return (
            <AppManagerContext.Provider
                value={{ appManager: props.appManager }}
            >
                {props.children}
            </AppManagerContext.Provider>
        );
    }
);

export const IS_MOBILE = window.innerWidth < 768;

export const useAppManager = () => {
    if (React.useContext(AppManagerContext) === undefined) {
        throw new Error(
            "useAppManager must be used within an AppManagerProvider"
        );
    }

    return React.useContext(AppManagerContext).appManager;
};

const loadOrCreateAppManager = () => {
    const snapshot = localStorage.getItem("appManager");

    if (snapshot) {
        const parsedSnapshot = JSON.parse(snapshot!);
        parsedSnapshot.currentScheduleIndex = 0;
        parsedSnapshot.selectedCourses = [];
        parsedSnapshot.toEvents = [];

        return AppManager.create(parsedSnapshot);
    }
    return AppManager.create();
};

export const Background = () => {
    const [css, _$theme] = useStyletron();

    return (
        <div
            className={css({
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                zIndex: -1,
                backgroundColor: "#D5E3FF",
                filter: "blur(10px)",
                transform: "scale(1.1)",
            })}
        >
            <img
                className={css({
                    // place in the top right upside down and mirrored
                    position: "absolute",

                    left: "-20%",
                    // flip the image
                    transform: "scale(2)",
                    zIndex: 1,

                    mixBlendMode: "color-burn",
                })}
                // src={pinkGradient}
                alt="background"
            />
        </div>
    );
};

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <StyletronProvider value={engine}>
            <BaseProvider theme={LightTheme}>
                <AppManagerProvider appManager={loadOrCreateAppManager()}>
                    <ToasterContainer
                        placement="bottomRight"
                        autoHideDuration={3000}
                    >
                        <div
                            style={{
                                display: "flex",
                                flexDirection: "column",
                                position: "relative",
                                userSelect: "none",
                                overflowX: "hidden",
                            }}
                        >
                            <App />
                            <Background />
                        </div>
                    </ToasterContainer>
                </AppManagerProvider>
            </BaseProvider>
        </StyletronProvider>
    </React.StrictMode>
);