Let's Coding

const logger = store => nextDispatch => action => {  
	console.log('dispatching', action)  
	let result = nextDispatch(action)  
	console.log('next state', store.getState())  
	return result  
}

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const todoApiService = createApi({

		reducerPath: 'todoApi',
		
		baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
		
		endpoints: (builder) => ({
		
		// getPokemonByName: builder.query<Pokemon, string>({
		
		// query: (name) => `pokemon/${name}`,
		
		// }),
		
		getTodoApi: builder.query<any, string>({
		
		query: (id) => `todos/${id}`,

	})

	}),

})
// Export hooks for usage in functional components, which are  
// auto-generated based on the defined endpoints 
// 以下會自動對應產生
export const { useGetTodoApiQuery } = todoApiService

import { createSlice } from '@reduxjs/toolkit'
// Define a type for the slice state  
interface todoState {  
  todoList: Array<string>
}
const initialState: todoState = {  
  todoList: []  
}
export const todoSlice = createSlice({  
	name:'todo',
	initialState,
	reducers:{
		//state:當下狀態
		//action:對應的動作
		addTodo: (state,action)=>{
			state.todoList.push(action.payload)
		},
		addTimestamp:(state)=>{
			state.todoList.push(Date.now().toString())
		}
		
	}
}  
})

import { Provider } from "react-redux";
import store from './store'
ReactDOM.render(

	<React.StrictMode>
		
		<Provider store={store}>
		
			<App />
		
		</Provider>
	
	</React.StrictMode>,
	
	document.getElementById('root')

);

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

import { useAppSelector } from './hooks';
function App() {

const todoReducer = useAppSelector(state => state.todoReducer)

const todoList = todoReducer.todoList


return (

<Wrapper>

	<Title>TODO LIST</Title>
	
	<NoteInput type="text" />
	
	<SubmitBtn>
	
		Submit
	
	</SubmitBtn>
	
	<SubmitBtn>
	
		Record Timestamp
	
	</SubmitBtn>
	
	<Title>List</Title>
	
	{
	
	todoList.map((todo, index) => {
		
		return <Item key={todo}>
		
			<b>{index + 1}</b>
		
			{todo}
		
		</Item>
		
		})
	
	}

</Wrapper>

);

}

  

export default App;

import { configureStore } from '@reduxjs/toolkit'

import todoReducer from './slice/todo'

const store = configureStore({

	reducer: {
	
		todoReducer
		
		}

})


// Infer the `RootState` and `AppDispatch` types from the store itself

//匯出對應的類型
export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

export default store

import './App.css';

import styled from 'styled-components'

import { useAppSelector, useAppDispatch } from './hooks';

import { addTodo, addTimestamp } from './slice/todo'

import React, { useState } from 'react';

  
function App() {

const todoReducer = useAppSelector(state => state.todoReducer)

const todoList = todoReducer.todoList

const dispatch = useAppDispatch()

const [text, setText] = useState("")

return (

<Wrapper>

	<Title>TODO LIST</Title>
	
	<NoteInput type="text" value={text} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
	
	setText(e.target.value)
	
	}} />
	
	<SubmitBtn onClick={() => {
	
		if (text === '') {
		
		alert('請輸入TODO內容')
		
		return
		
		}
	
		dispatch(addTodo(text))
	
		setText('')
	
	}}>
	
		Submit
	
	</SubmitBtn>
	
	<SubmitBtn onClick={() => {
	
		dispatch(addTimestamp())
	
	}}>
	
		Record Timestamp
	
	</SubmitBtn>
	
	<Title>List</Title>
	
	{
	
		todoList.map((todo, index) => {
		
		return <Item key={todo}>
		
			<b>{index + 1}</b>
			
			{todo}
		
		</Item>
	
	})
	
	}

</Wrapper>

);

}

  

export default App;

import React from 'react'

type ItemProps = {
  name: string;
  avatar: string;
}

const Item: React.FC<ItemProps> = ({ name, avatar }) => {
  return (
    <div className=" text-center ">
      <div className=" rounded-full w-[56px] h-[56px] ring-2 border-2 border-white ring-red-500 mx-[11px] p-[3px] "
        style={{
          backgroundImage: `url(${avatar})`,
          backgroundPosition: "center",
          backgroundSize: "cover",
        }}>
      </div>
      <p className="text-xs mt-1">{name}</p>
    </div>
  )
}

export default Item

var majorityElement = function (nums) {
  let newObj = {}
  for (let num of nums) {
    // console.log(num)
    (!newObj[num]) ? newObj[num] = 1 : newObj[num]++
  }
  // console.log(newObj)
  let nNum = nums.length / 2
  // console.log('nNum', nNum)
  for (let key in newObj) {
    if (newObj[key] > nNum) return key
  }

};

var majorityElement2 = function (nums) {
  let result;
  let count = 0;

  for (let elem of nums) {
    if (count === 0) {
      result = elem;
    }
    if (result === elem) {
      count++;
    } else {
      count--;
    }
  }

  return result;

};

var majorityElement = function (nums) {
  // 只要是 > n/3 就進入陣列
  let candidate1 = null;
  let candidate2 = null;
  let count1 = 0;
  let count2 = 0;

  for (let num of nums) {

    if (candidate1 === num) {
      count1++
    } else if (candidate2 === num) {
      count2++
    } else if (count1 === 0) {
      candidate1 = num;
      count1++
    } else if (count2 === 0) {
      candidate2 = num;
      count2++
    } else {
      count1--;
      count2--;
    }
  }

  console.log('data:', candidate1, candidate2)
  count1 = 0;
  count2 = 0;
  const res = [];

  limit = Math.floor(nums.length / 3)

  for (let num of nums) {
    if (candidate1 === num) count1++;
    else if (candidate2 === num) {
      count2++;
    }
  }
  if (count1 > limit) res.push(candidate1)
  if (count2 > limit) res.push(candidate2)
  console.log(res, count1, count2)
  return res

};
majorityElement([1, 2])

//會有 問題：Time Limit Exceeded
const rotateArray1 = function (nums, k) {
  //unshift 將給入的元素值放到最前面
  for (let i = 0; i < k; i++) {
    console.log('nums.pop()', nums.pop())
    nums.unshift(nums.pop());
  }
  console.log('num', nums)
  return nums;
}

const revNum = (nums, start, end) => {
  while (start < end) {

    [nums[start], nums[end]] = [nums[end], nums[start]]
    console.log('[nums[start], nums[end]]', [nums[start], nums[end]])
    start++;
    end--;
  }
  console.log(nums)
}
// revNum([1, 2, 3, 4], 0, 3)

const rotateArray2 = function (nums, k) {
  k = k % nums.length
  //先整個陣列 reverse
  nums.reverse()
  revNum(nums, 0, k - 1)
  revNum(nums, k, nums.length - 1)
}

test("username input should be rendered", () => {
  render(<Login />);
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  expect(usernameInputEl).toBeInTheDocument();
});

test("password input should be rendered", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);
  expect(passwordInputEl).toBeInTheDocument();
});

test("button should be rendered", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  expect(buttonEl).toBeInTheDocument();
});

test("username input should be empty", () => {
  render(<Login />);
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  expect(usernameInputEl.value).toBe("");
});

test("password input should be empty", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);
  expect(passwordInputEl.value).toBe("");
});

test("button should be disabled", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  expect(buttonEl).toBeDisabled();
});

test("error message should not be visible", () => {
  render(<Login />);
  const errorEl = screen.getByTestId("error");
  expect(errorEl).not.toBeVisible();
});

test("username input should change", () => {
  render(<Login />);
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  //模擬傳入的值
  const testValue = "test";

  fireEvent.change(usernameInputEl, { target: { value: testValue } });
  expect(usernameInputEl.value).toBe(testValue);
});

test("password input should change", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);
  const testValue = "test";

  fireEvent.change(passwordInputEl, { target: { value: testValue } });
  expect(passwordInputEl.value).toBe(testValue);
});

test("button should not be disabled when inputs exist", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  const usernameInputEl = screen.getByPlaceholderText(/username/i);
  const passwordInputEl = screen.getByPlaceholderText(/password/i);

  const testValue = "test";

  fireEvent.change(usernameInputEl, { target: { value: testValue } });
  fireEvent.change(passwordInputEl, { target: { value: testValue } });

  expect(buttonEl).not.toBeDisabled();
});

test('renders 3 list items', () => {
  render(<App />);
  const listItems = screen.getAllByRole("listitem");
  expect(listItems.length).toEqual(3);
});

test('renders title', () => {

	render(<App />);
	const title = screen.getByTestId("mytestid");
	expect(title).toBeInTheDocument();

});

test('sum should be 3', () => {
  render(<App />);
  const titleSum = screen.getByTitle("sum");
  expect(titleSum.textContent).toBe("3");
});

/**
 * Definition for singly-linked list.
 * function ListNode(val, next) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.next = (next===undefined ? null : next)
 * }
 */
/**
 * @param {ListNode} list1
 * @param {ListNode} list2
 * @return {ListNode}
 */

  var mergeTwoLists = function (l1, l2) {
    //current
    const dummy = new ListNode(-Infinity)
    //point dummy node
    let prev = dummy;
    while (l1 && l2) {
      if (l1.val <= l2.val) {
        prev.next = l1;
        //移動 prev list
        prev = l1
        //鏈錶指針 l1 就往後移動
        l1 = l1.next
      } else {
        prev.next = l2;
        prev = l2
        l2 = l2.next
      }
    }
    //如果 l1 是 null ,就是 l2
    if (!l1) prev.next = l2;
    if (!l2) prev.next = l1;
    return dummy.next
  };

  mergeTwoLists([1, 100], [3, 4, 6, 8])

var isValid = function (s) {
  const hashMap = { "(": ")", "{": "}", "[": "]" };
  const stack = [];
  for (let ch of s) {
    if (hashMap[ch]) {
      // ch is an opening bracket
      stack.push(hashMap[ch]);
    } else if (stack.length > 0 && stack[stack.length - 1] === ch) {
      //當空陣列裡面有值且陣列的最後一個值和 key 是一樣的就從陣列中刪除
      // ch is a closing bracket and top of stack matches
      stack.pop();
    } else {
      // ch is a closing bracket and top of the stack doesn't match
      return false;
    }
  }
  return stack.length === 0;
};