-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
86 lines (79 loc) · 2.49 KB
/
app.js
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
import Config from "./config.js";
import Editor from "./components/Editor.js";
import RenameInput from "./components/Rename.js";
import FileViewer from "./components/FileViewer.js";
import NewDoc from "./components/NewDoc.js";
import SignInOut from "./components/SignInOut.js";
const App = () => {
const [currentRef, setCurrentRef] = useState("");
const [user, setUser] = useState(null);
const [firepad, setFirepad] = useState(null);
//helper function to retrieve ref
const getRef = (refName, make) => {
//get ref pointer from firebase
var ref = firebase.database().ref();
// check if function was called with a specific refName
if (typeof refName === "string" && refName.length > 0) {
refName = decodeURIComponent(refName);
ref = ref.child(refName);
} else {
// get the hash of the URL or create new ref
if (make) {
ref = ref.push(); //make new
} else {
var hash = window.location.hash.replace(/#/g, "");
hash = decodeURIComponent(hash);
hash = hash ? hash : "new_doc"; //either use hash or go to root
ref = ref.child(hash);
}
}
setCurrentRef(ref);
};
// Initialize Firebase before anything else
if (!firebase.apps.length) {
firebase.initializeApp(Config.firebase);
getRef();
}
useEffect(() => {
const hash = currentRef.key;
window.location = window.location.href.split("#")[0] + "#" + hash;
}, [currentRef]);
return html`
<div class="container">
<div class="columns">
<div class="column is-2">
<div class="block"></div>
<div class="block">
<p>Magical Notes App</p>
<${SignInOut} user=${user} setUser=${setUser} />
</div>
${user
? html`
<${RenameInput}
currentRef=${currentRef}
setCurrentRef=${setCurrentRef}
/>
<div class="buttons">
<${FileViewer} currentRef=${currentRef} getRef=${getRef} />
<${NewDoc} getRef=${getRef} />
</div>
`
: ""}
</div>
<div class="column">
<div class="">
<main>
<${Editor}
user=${user}
currentRef=${currentRef}
setFirepad=${setFirepad}
/>
</main>
</div>
</div>
</div>
</div>
`;
};
export default App;
render(html`<${App} />`, document.getElementById("app"));