path change

soohoonc · Dec 17, 2023 · 084308a · 084308a
1 parent 9ca9fb6
commit 084308a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -8,12 +8,23 @@ import { createFileSystem, type FileSystem } from '@/lib/fs';
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
+type FSContext = {
+  fs: FileSystem;
+  path: string;
+  setPath: (path: string) => void;
+};
 
 const initialFileSystem = {
-  hello: () => 'hello',
+  hello: () => 'hello'
 } as FileSystem;
 
-const FileSystemContext = React.createContext<FileSystem>(initialFileSystem)
+const initialFileSystemContext = {
+    fs: initialFileSystem,
+    path: '',
+    setPath: (path: string) => {},
+};
+
+const FileSystemContext = React.createContext<FSContext>(initialFileSystemContext);
 
 export function useFileSystem() {
   const context = React.useContext(FileSystemContext);
@@ -25,19 +36,22 @@ export function useFileSystem() {
 
 export function FileSystemProvider({ children }: { children: React.ReactNode }) {
   const [fs, setFs] = React.useState<FileSystem>(initialFileSystem);
-  const [path, setPath] = React.useState<string>('');
+  const [path, setPath] = React.useState<string>('~');
   React.useEffect(() => {
     async function init() {
       const fs = await createFileSystem();
       console.log(fs.hello())
       fs.cd('/users/guest')
-      setPath(fs.pwd())
       setFs(fs);
     }
     init();
   }, []);
   return (
-    <FileSystemContext.Provider value={fs}>{children}</FileSystemContext.Provider>
+    <FileSystemContext.Provider value={{
+      fs,
+      path,
+      setPath
+    }}>{children}</FileSystemContext.Provider>
   );
 }
 
@@ -48,14 +62,10 @@ type TerminalState = {
   setUser: (user: string) => void;
   host: string;
   setHost: (host: string) => void;
-  path: string;
-  setPath: (path: string) => void;
   inputs: string[];
   setInputs: (inputs: string[]) => void;
   outputs: Message[];
   setOutputs: (outputs: Message[]) => void;
-  prompt: string;
-  setPrompt: (prompt: string) => void;
   inputIndex: number;
   setInputIndex: (inputIndex: number) => void;
 };
@@ -71,13 +81,12 @@ export function useTerminalState() {
 }
 
 export function TerminalStateProvider({ children }: { children: React.ReactNode }) {
+  const { path } = useFileSystem();
   const [showWelcome, setShowWelcome] = React.useState(true);
   const [user, setUser] = React.useState('guest');
   const [host, setHost] = React.useState('soohoonchoi.com');
-  const [path, setPath] = React.useState('~');
   const [inputs, setInputs] = React.useState<string[]>([]);
   const [outputs, setOutputs] = React.useState<Message[]>([]);
-  const [prompt, setPrompt] = React.useState(`${user}@${host} ${path} $`);
   const [inputIndex, setInputIndex] = React.useState(0);
 
   return (
@@ -89,14 +98,10 @@ export function TerminalStateProvider({ children }: { children: React.ReactNode
         setUser,
         host,
         setHost,
-        path,
-        setPath,
         inputs,
         setInputs,
         outputs,
         setOutputs,
-        prompt,
-        setPrompt,
         inputIndex,
         setInputIndex,
       }}

diff --git a/src/components/terminal-content.tsx b/src/components/terminal-content.tsx
@@ -4,7 +4,7 @@ import { useTerminalState } from '@/app/providers';
 import { getFormattedDate } from '@/lib/utils';
 
 export const TerminalContent = () => {
-  const { showWelcome, inputs, outputs, prompt } = useTerminalState();
+  const { showWelcome, inputs, outputs } = useTerminalState();
   return (
     <div className='bg-transparent outline-none resize-none break-all' suppressHydrationWarning>
       {showWelcome && (
@@ -17,7 +17,7 @@ export const TerminalContent = () => {
       )}
       {inputs.map((input, index) => (
         <React.Fragment key={index}>
-          <span>{`${prompt} ${input}`}</span>
+          <span>{`${input}`}</span>
           <span>{outputs[index]}</span>
         </React.Fragment>
       ))}

diff --git a/src/components/terminal-input.tsx b/src/components/terminal-input.tsx
@@ -6,17 +6,18 @@ import { useTerminalState, useFileSystem } from '@/app/providers';
 export const TerminalInput = React.forwardRef(({}, ref) => {
   const {
     setShowWelcome,
+    user,
+    host,
     inputs,
     setInputs,
     outputs,
     setOutputs,
-    prompt,
     inputIndex,
     setInputIndex,
   } = useTerminalState();
   const [input, setInput] = React.useState<string>('');
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const fs = useFileSystem();
+  const { fs, path, setPath } = useFileSystem();
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
@@ -30,9 +31,9 @@ export const TerminalInput = React.forwardRef(({}, ref) => {
     const inputsLength = inputs.length;
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      const output = handleCommand(input.trim(), fs);
+      const output = handleCommand(input.trim(), fs, setPath);
       if (!output) setShowWelcome(false);
-      setInputs(output ? [...inputs, input] : []);
+      setInputs(output ? [...inputs, `${user}@${host} ${path} $ ${input}`] : []);
       setOutputs(output ? [...outputs, output] : []);
       setInputIndex(inputsLength);
       setInput('');
@@ -71,7 +72,7 @@ export const TerminalInput = React.forwardRef(({}, ref) => {
 
   return (
     <div className='bg-transparent outline-none resize-none break-all'>
-      <span className='mr-[1ch]'>{prompt}</span>
+      <span className='mr-[1ch]'>{`${user}@${host} ${path} $`}</span>
       <span
         contentEditable
         ref={inputRef}

diff --git a/src/lib/commands.tsx b/src/lib/commands.tsx
@@ -2,7 +2,7 @@
 
 import { type FileSystem } from '@/lib/fs';
 
-export const handleCommand = (command: string, fs: FileSystem) => {
+export const handleCommand = (command: string, fs: FileSystem, setPath: (path: string) => void) => {
   // still better than yandere dev
   const parsedCommand = command
     .split(' ')
@@ -23,7 +23,20 @@ export const handleCommand = (command: string, fs: FileSystem) => {
       );
     case 'cd':
       try {
+        if(parsedCommand.length === 1) {
+          fs.cd('/users/guest');
+          setPath('~');
+          return <p></p>
+        }
         fs.cd(parsedCommand[1]);
+        const newPath = JSON.parse(fs.pwd());
+        if (newPath === '/users/guest') {
+          setPath('~');
+        } else if (newPath === "") {
+          setPath('/');
+        } else {
+          setPath(newPath.split('/').slice(-1)[0]);
+        }
         return <p></p>
       } catch {
         return <p>cd: no such file or directory: {parsedCommand[1]}</p>;